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

How to solve common IE bugs

Lately, I wrote more about CSS3 features and its awesomeness. Today’s article is about Internet Explorer common CSS bugs and how to solve them.

You may ask me “why this article?” and you have all the reasons to do that. If you read some of my previous articles, then you know I’m a CSS3 addicted. But sometimes, when working on some projects that require cross-browser compatibility, you need to know how to action when you encounter IE bugs.

Modern browsers are constantly evolving and their bugs or strange behaviors are always fixed due new version releases. But what about old browsers like Internet Explorer 6/7? As they are not maintained anymore, their rendering bugs became sort of “de facto”.

Internet Explorer common bugs

Put me in, coach!

Currently, I’m just one in a huge crowd, a prospect who has seen so many “dribbbles” and who learned a lot of new techniques.

Today’s post is about… me. With your permission and hoping I’m not too selfish, I’d like to show you some of my latest CSS3 designs.

Dribbble invite

How to create slick effects with CSS3 box-shadow

Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending options. But now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.

Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore.

Box shadow slick effects

CSS ribbons

You may already know what a ribbon is and how it looks. Nowadays, the CSS ribbon effect is a web design trend. It’s cool and it can help you by adding a 3D effect to your design.

So, in this article you’ll learn how to create CSS ribbons, without any images and minimal HTML markup.

CSS ribbons

CSS3 dropdown menu

While this is still an up-to-date version, I just wanted to let you know I made an improved and animated version of this CSS3 menu. You may want to check that first.

Today you’ll learn how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let’s see how is made:

CSS3 dropdown menu

Inset box-shadow behavior on Chrome beta

In my previous article, border, ` border-radius and box-shadow` properties were used to create a slick HTML5 search box. As you may know, when using all these together, a well-known Chrome bug is triggered.

Although this bug was fixed in the latest Chrome beta releases, below you’ll see the strange (may I call it like that?) or should I better say different behavior:

Chrome Beta version

How to create a cool and usable CSS3 search box

In this new article, you’ll learn how create a cool and usable CSS3 search box using the HTML5 placeholder attribute. For the browsers that don’t support this new HTML5 attribute, a fallback is created using Modernizr’s feature detection.

CSS3 searchbox