Fresh and Useful CSS3 Tutorials

Designing Mall has presented some bits and pieces about CSS. For example: 20+ JQuery and CSS Awesome Effects, Five Useful CSS Properties and Pure CSS Effects and Tips. This post is a big, fresh, excellent and useful collection of CSS3 Tutorials.


This will give you a thorough understanding about CSS3 and some of the Tutorials have a very essential blend of JQuery. CSS3 has properties, supported by all major and latest browsers like Internet Explorer, Firefox and Chrome etc.

CSS3 & jQuery Drop-Down Menu With Integrated Forms

When designing the layout for a website there’s one thing that we as
designers are always conscious of – making things easier for users. No
matter what it is your site offers, you’re still going to need to
balance the interface in a way that keeps it very easy for users to find
and perform core site functions around your site or service, ideally
without having to load up a completely different page.

How to create depth and nice 3d ribbons only using CSS3

Multiple Backgrounds with CSS3 and a Little of Animation

CSS3 Animated Owl Tutorial

3D Text Using Just CSS

Text Embossing Technique With CSS

If you’re like me, you love embossed text like it is going out of
fashion. In fact, it’s liked so much right now by many web designers
that it featured in Smashing Magazines “Web Design Trends for 2009”
article which firmly puts it up there! In this article I will show you a
couple of real world examples of this, as well as describing how to
implement this effect with CSS. More importantly, I give you the rules
around how to correctly add an embossed effect to any text depending on
the colors used.

Build Awesome Practical CSS3 Buttons

What once required background images and icons can now be created
with plain-old CSS. Because modern browsers have access to things like
box shadow, gradients, rounded corners, text-shadows, and font-face, we
can finally take advantage of this and remove any need for images, when
creating visual elements, such as buttons!

Awesome Overlays with CSS3

BonBon Sweet CSS3 Buttons

There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

And voila.. here they are, the BonBon Buttons. Named after the French
word for “Candy”. So, let’s take a tour trough the candy store.

Slide Down Box Menu with jQuery and CSS3

In this tutorial we will create a unique sliding box navigation. The
idea is to make a box with the menu item slide out, while a thumbnail
pops up. We will also include a submenu box with further links for some
of the menu items. The submenu will slide to the left or to the right
depending on which menu item we are hovering.

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Often used on e-commerce or large scale websites, mega menus are
becoming more and more popular, as they offer an effective solution to
displaying a lot of content while keeping a clean layout. In this
tutorial, we’ll learn how to build a cross-browser, awesome CSS-only
drop-down mega menu, using nice CSS3 features

jSlickmenu: A jQuery plugin for slick CSS3 menus

The plugin called jSlickmenu, creates, well, slick menus with jQuery.
Combined with some great CSS3 features likes rotation and shadows, this
plugin can really lift up your design. It’s fairly easy to use, highly
customizable and pretty cool (and fun!) to see.

jQuery & CSS3 3D Interactive Photo Stack

CSS3 has a lot of hidden power in it’s transform function including
the ability to do really neat things like skewing an image, rotating it
or scaling it, all in just one or two lines of code. You probably know
what rotating an image does but how about skewing?

Well, think of skewing as a way to transpose an image at particular
angles – basically, pulling the X axis at one angle and the Y axis in
another. It sounds a little complicated, but this technique is really
great for simulating 3D perspective effects.

In today’s demo, I’ve taken a gallery of images of the jQuery team
and transformed them into an interactive 3D stack. CSS3 provides the
underlying styling for this whilst jQuery is used for calculations and
positioning.

Awesome Cufonized Fly-out Menu with jQuery and CSS3

In today’s tutorial we will create a full page cufonized menu that
has two nice features: when hovering over the menu items we will move a
hover-state item that adapts to the width of the current item, and we
will slide out a description bar from the left side of the page,
reaching towards the current menu item.

We will use jQuery for the effect and some CSS3 properties for the style. We are not going to use any images.

Easily Turn Your Images Into Polaroids with CSS3

Love of CSS and doing something cool with it is kind of our thing and
we quickly jumped on a brand new idea: polaroid style images with just
CSS. Holy super awesome, Batman!

CSS3 Dropdown Menu

Lightbox effect in CSS3 through transition

Overlapped CSS menu using CSS Sprites

It is said that 70 to 80 percentage of the end-user response time is
spent on the front-end. A major portion of this time is exhausted on
downloading all the external components in a web page including,
stylesheet, images, scripts, flash etc. An extra HTTP request adds 200+
milliseconds to a page (worldwide average). Since most of today’s
browsers limit about 3 or 4 parallel requests at a time, a page with so
many external references can cause the requests to get queued up. This
may eventually cause the page loading time to increase. In short, the
fewer files the web browser has to fetch that much faster the site
loads. It’s as simple as that.

CSS Drop Shadows Without Images

Elegant Accordion with jQuery and CSS3

Today we will create an elegant accordion for content. The idea is to
have some vertical accordion tabs that slide out when hovering. We will
add some CSS3 properties to enhance the looks.

Pretty Simple Content Slider with jQuery and CSS3

Today we will create an auto-playing content slider with jQuery and
CSS3. The idea is to alter the background image and to slide in the
heading and the description. By clicking on one of the menu items, the
auto-play function is stopped and the respective content slides out.

Make An Elastic Thumbnail Menu

In an ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu.

What does it do exactly?
– Magnifies menu items when they are hovered over.
– Menu items expand upwards.

Greyscale Hover Effect w/ CSS & jQuery

A few months ago, James Padolsey introduced a cool greyscale
technique for non-IE browsers. His technique inspired me to come up with
a workaround with a similar effect.

My solution relies on CSS Sprites and a few lines of jQuery, but
requires a bit of preparation before it can be implemented. It is not
recommended for large scale projects and probably best for displaying
portfolio pieces.

Pure CSS speech bubbles

Speech bubbles are a popular effect but many tutorials rely on
presentational HTML or JavaScript. This tutorial contains various forms
of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No
images, no JavaScript and it can be applied to your existing semantic
HTML.

Animated wicked CSS3 3d bar chart

The principle is the same as the previous version: Create a beautiful
3d bar chart. But this time, we don’t create a “stacked” one (since
animation would be hard), but several bars placed under each other. When
hovering, the animation shows and the bar will grow to the appropriate
size.

Spin those Icons with CSS3

Related Articles