Cool notification messages with CSS3 & jQuery

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

The user experience 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 performs important tasks.

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

Info, error, warning & success notification messages with CSS 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

Last updated on

A while ago, I wrote about the CSS3 :target pseudo-class and how can that help you achieve some cool results when that matches an element that’s the target of a identifier in the document’s URI.

Today you’ll learn how to create a pretty simple animated CSS3 accordion with its help.

CSS3 simple 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 CSS ::before and ::after pseudo-elements syntax

In my previous articles, you may have noticed how often I used these pseudo-elements. Why do 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 single colon versus double colon syntax

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

CSS drop and inner shadows with box-shadow

Last updated on

The CSS box-shadow property allows you to add multiple shadows, outer (often called drop shadows) or inner, on the HTML elements. To do that you must specify values as horizontal and vertical offsets, blur radius, spread distance, inset and color.

A gray rectangle with a CSS box shadow effect

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 code.

CSS ribbon effect