Home » Tutorials » HTML5/CSS3

HTML5/CSS3

Div not Adjusting Height based on Content

text over other text css

Have you ever wondered why your div height is not expanding with the content in it. For example if you have a dynamic, user generated text and you don’t know every time the exact height of the content, but below you have another div with relative position, then that might be a problem.  In this quick tip I will show ...

Read More »

Understanding ‘~’, ‘+’ and ‘>’ CSS Selectors

understanding CSS SElectors

In this tutorial I will explain the basic usage of CSS Selectors and more specifically for using the ~,+ and >. To make it easier to understand, let’s first take a look at the following HTML code: Blank space between elements: It is the descendant selector. Selects all <p> elements inside the <div> with id “container”. ~ Selector: Selects all ...

Read More »

Border-radius with CSS3

CSS3 wallpaper

With CSS3 you can easily give any element “rounded corners” by using the border-radius property. You can also create rounded borders and for Firefox 3.5+ you can even create elliptical borders. For easier use, you can try our Border Radius Generator tool. For best browser support you should prefix the border-radius with -webkit- and -moz-. Let’s look a few examples: ...

Read More »

Style HTML5 Placeholder with CSS

Change placeholder color

In the previous tutorial, I showed you how to create a responsive HTML5 Mail Form. In every form you can add placeholders that describe the expected value of an input field. They show as a short hint which is displayed in the input field before the user enters a value. The HTML syntax for using placeholder is: But how to ...

Read More »

Margin 0 auto is not working

a piece of css code

Very common problem nowadays is how to actually make margin: 0 auto; to work. You probably know that this CSS rule is used to center some content horizontally on the page. But sometimes it just refuses to work properly. First check if some of the following solutions will help: The element must not have a fixed or absolute position Try ...

Read More »

Creating a Full Width Background Image

full width background

In this tutorial I will show you a few simple ways to create a full page responsive background image. The main idea is the image to be centered on page, not to cause scrollbars, without white space and of course to adapt with the browser resolution. Full Page Background Image with CSS3 The whole secret is to use the CSS3 ...

Read More »

Open HTML form in new Window/Tab after submit

target blank wallpaper

Opening HTML form in new tab after submitted is easier than you expect. We use the target=”_blank” attribute, the same way as making a link open in new tab. <form action="someaction.php" method="post" target="_blank"> ... </form> Opening HTML form in new Window/Tab by using jQuery Here is an alternative way for opening form in new tab by using jQuery in case ...

Read More »

Insert HTML5 audio in your website

html5 audio

Before HTML5, it was very hard to embed audio in your website. In most cases, you had to use flash. Now thanks to the <audio> element, creating an audio player for your website is much easier. In this tutorial I will show you how to embed sounds in a web page. We will also take a look at how to ...

Read More »

Creating responsive web design

responsive webdesign

In this tutorial I will show you how to code your website in a way that it automatically conforms itself to multiple screen sizes. No matter if you open your website from laptop, tablet or smartphone, it will still look good. What is responsive design? To see it in action, just open this article on a desktop pc browser and ...

Read More »