Slick login form with HTML5 & CSS3

We already know that CSS3 has the ability to create a lot of new possibilities to design and implement better web forms. Also, HTML5 has its important role when it comes about creating more usable forms, without actually needing any Javascript code.

Knowing that, check out the below preview to see the login form we’re going to create in this article:

CSS3 login form

Just some other awesome CSS3 buttons

Whether you’re designing a website or a web application, you’ll need buttons for it. Now, with CSS3’s help, it was never easier to create nice looking buttons.

In this article you’ll learn how to create some cool CSS3 buttons in just a few steps.

Some other awesome CSS3 buttons

Clearing floats nowadays

At my beginnings as a web developer, when I first discovered how to clear floats I was so happy and it was for sure an “a-ha” moment. Since then, so many things have changed and new clearing methods have appeared. One thing remained the same: the need to clear floats.

In this article, we’ll see some effective solutions for clearing floated elements.

How to clear floats

Create a stylish HTML5 template from scratch

HTML5 is certainly one of the latest buzzwords in the web community. It isn’t something new anymore and we’ve already seen how cool it is. Features like simplified doctype, more semantic markup, input types and placeholders are just some of the reasons you’d like to use a HTML5 template.

So, today we’re going to build a HTML5 template using the full power of CSS3.

HTML5 template preview

Cool notification messages with CSS3 & jQuery

Nowadays, UX is a key factor when it comes about creating/designing a product or system. To keep users happy, developers struggle to create a good experience and a better interactivity.

UX is a term used to describe the overall experience and satisfaction a user has when using a product or system. So, a good UX will always make users happy and businesses more successful.

Notification messages are an important part of the user experience and you can’t afford to omit them. A notification alert message should appear every time the user perform important tasks.

In this article, you’ll learn how to create some alert messages with CSS3 and jQuery.

Sexy CSS3 menu

One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way.

In today’s article, you’ll learn how to create a good looking menu using some CSS3 magic.

Sexy CSS3 menu

Pure CSS3 accordion

A while ago, I wrote about the CSS3 :target pseudo-class and how can that help you achieve cool results. Today you’ll learn how to create a pretty simple animated CSS3 accordion with its help.

CSS3 accordion

HTML5 & CSS3 envelope contact form

Nowadays, contact forms can be found everywhere. To attract visitors’ attention, you need a cool CSS3 contact form, with a catchy look, one that your visitor would love to fill.

In this article you’ll learn how to create a nice CSS3 contact form using also some HTML5 features.

CSS3 contact form

The :before and :after pseudo-elements syntax

In my previous articles, you may have noticed how often I used these pseudo-elements. Why I like to use them? Because they are so handy to use as no extra HTML markup is required, but this article’s purpose isn’t about pseudo-elements advantages.

This article’s purpose is to clarify some common misunderstandings regarding the above pseudo-elements syntax.

CSS pseudo elements

CSS3 tooltips

If your icon or button has insufficient text or none at all, or it just needs some additional explanation, then you surely need a CSS3 tooltip for it. Why’s that? Because, as they have proved till now, they can help you improve your website usability.

Having said that, in this article you’ll learn how to create your own CSS3 tooltips: no images, no javascript.

CSS3 tooltips