50 Outstanding CSS3 Tutorials
50 Outstanding CSS3 Tutorials
Join the DZone community and get the full member experience.Join For Free
Almost all modern browsers support CSS3. In this post, we present 50 best css3 tutorials for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.
We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease.
Creating buttons with CSS becomes a lot more comfortable. The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.
In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: “Jacob already wrote a Photoshop tutorial on how to do that.”
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).
With no clear purpose or plan, I’ve resolved to experiment with CSS3 on a regular basis. Some of these note-posts may be more useful and practical than others, but the only way to know for sure is to learn by doing.
I had a lot of fun dabbling in CSS3 on a recent post, but had to hold back a bit to keep things looking presentable in most browsers. To carry out the DIN typeface I chose into the header, I used a transparent png with the letters knocked out to achieve that subtle yellow to blue fade animation.
This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. It uses CSS3 to style everything and it looks really nice!
Earlier this week, while working on ZineScripts‘ coupon code system, I found the need to be able to dynamically create and present a message box to Zine’s visitors. The usual routine would include digging through jQuery’s plugin repository and ending up with using a lightbox alternative, but I decided to take the time and build an one-off notification solution, which I am sharing with you today.
CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.
Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses. This has actually allowed them to target the Google homepage to the webkit engine, probably after some sort of browser detection.
Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image.
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.
I had previously created the Cadmus “post” button in Photoshop and it was essentially three images for the different states. I wanted to use this style for all our buttons, but doing it with single images is not a good idea. So I set about creating the same style of the buttons with CSS3.
Today we are making a sleek feed widget, that will fetch any feed and display it in your blog sidebar. You can set it up to show the latest posts from the different categories of your blog, your latest stumbles, or even people mentioning you on twitter.
We are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.
In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.
Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.
Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age.
I wanted to take this concept and bring it to the next level using CSS3 transitions. The goal was to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit. With that in mind, I was able to create a beautiful social media icons display using CSS3.
The key is to first determine whether or not you’re okay with a slightly different presentation from browser to browser. Are you okay with, say, IE displaying 90 degree corners, rather than slick rounded ones? That’s up to you to decide. However, always remember that websites needn’t look identical in every browser. At the conclusion of this article, we’ll work on a fun final project.
Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I’m proud to release the animated wicked CSS3 3d bar chart.
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! I’ll show you how in today’s video tutorial.
In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.
At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don’t support CSS3 animations yet). So today, I present you Five examples of CSS3 animations and their jQuery equivalents.
Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template here.
CSS3 is one of the coolest new web technologies available to web developers right now. Using some of its many features, it is possible to reproduce the effects that you might have previously done in Photoshop, with CSS code that is more maintainable, faster to load, and hip with the latest trends. Read on to learn about the power tools available to you and how to combine them to produce the ultimate graphical effects.
In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.
Published at DZone with permission of Dong Nguyen , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.