Using CSS3 proficiently makes designing a lot more fun. With a good command of CSS, you can create beautiful designs with great efficiency and ease. These tutorials are extremely helpful, not only for the professionals, but, also for the beginners.
Here we have put together a smart collection of cool CSS effects to help you learn the nitty-gritty of it so that you can use it to create more beautiful web sites. Enjoy!
This awesome website consists of more than 100 different CSS effects like 2D transitions, background transitions, icon css effects, border transitions, shadow and glow transitions, speech bubble CSS effects and cool CSS curl effects. Check it out!
You will find more than 50 CSS animation examples on this simple website. Text CSS animation effects like bouncing, fading, flipper, zoom entrances etc.
16. Making a Page Flip Magazine with turn.js
50 Cool CSS Effects And Animation Examples
You can Use up, down, left and right keys to navigate the 3D cube. 3D cube built using -webkit-perspective, -webkit-transform and -webkit-transition.
Multiple 3D Cubes using CSS3 and proprietary ‘transform’ and ‘transition’ properties. I thought it was amazing, you can see the writing on the 3D object.
An accordion effect using only CSS. Proprietary animation in WebKit based browsers.
Isocube is like 3DCube but have litle different. Isocube can load images on one side
The Matrix is one of the best sci-fi films of all time. CSS3 capable of making such an amazing animated film made
13. 3D Meninas
14. Polaroid Gallery
Polaroid Gallery is animated pile of photographs utilizing a ton of new CSS3 commands. It’s interesting when your mouse cursor is above the image, the image will enlarge
16. CSS Mac Dock
This list of links as the basis and change into an OS X icon dock of amazing.
17. Drop-In Modals
With CSS3 effects and property Drop In Modals can help you make quick, animation, a simple change to using modals, and some subtle design cues.
18. Sliding Vinyl
Vinyl effect can be created by using CSS3 transition and a little HTML. This can make a standard album cover to have an interesting style
Polaroid is a picture that is in the box and spun like a pile of random photos that are sorting through CSS3 techniques. The text that comprises only extract the title and alt attribute
The principle of Animatid Roket is CSSEffect. The transformation changed the appearance of an element in the browser, moving, rotating, or other means. In determining the conversion of styles before making the application to happen so that you can not really animation.
21. Poster Circle
Poster Circle. is an animated spin column consists of a row of colored boxes and text are wonderful. The overall effect is crazy cool and undeniably dizzying
22. Morphing Cubes
Morphing Cubes will shows some of the more interesting content using 3D transformations, animations and transitions. Note that you can still select text in the element, even if the rotation. Converting elements are fully interactive.
This is the example of other Polaroid Gallery. Piles of images at random and when the cursor hovers over an image, selected images will be enlarged
When the cursor moves as if like a lamp spotlight leading up to the writing and cast
25. Colorful Clock
Colorful Clock is a colorful jQuery & CSS3 which will help you keep track of those precious last seconds of the year.
Lightbox Gallery is an awesome image gallery which leverages the latest CSS3 and jQuery techniques.Lightbox Gallery using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling.
Elastic Thumbnail Menu is an alternative method for smoothing the menu, in particular by increasing the menu items when the mouse is hovering over the menu. And then expand to the top menu
This animation Apple style that combines CSS transformation and jqueryUI. This one truly animate between two half states, making a slider like iTunes
29. jQuery DJ Hero
DJ Hero This is one of the interesting combination of CSS3 with jquery. On-screen controls you can control the pace or just take enough to record your mouse
inn is a dynamic stack of index cards that simply using HTML and CSS3 features such as change and transition (for the dynamic effects) and the @ font-face, box-shadow and border-radius (for styling).
This is an example of another image gallery that uses CSS3 transforms property and property transitions.
CSS3 animation can also be used in the package list price of a product. Animated Column Pricing can be applied properly there
Slick Jquery Menu achieved through a combination of CSS3 and JQuery menu below is very elegant and shows some great use of Jquery and CSS3. This is just one of those crazy concepts that the test can be used in CSS3 will be true of the standard Web.
37. SVG Fisheye Menu
CSS animation can animate almost any property on the item and do funny things, such as rotation and tilt. As proof,will created quick and dirty CSS3 Fisheye / Dock demo. Used as an added bonus, the demo-SVG in the tag IMG.
38. Falling Leaves
Like autumn. Animated falling leaves are made using CSS3
Image Gallery Rotaitng build with CSS transform transition and CSS features. To see the effects of rotation, click the small image
40. Dropdown Menu
41. Star Wars Crawl
Star Wars opening crawl, using only HTML & CSS. It only works in Snow Leopard in Safari 4.0.4 and the WebKit nightly.
42. Sticky Notes
This is another fisheye that using CSS3
The first demonstration reqires you to keep clicking the image to see the next frame, and it wraps around to the start when you reach the last frame.The second demonstration just needs you to keep the mouse moving over the image in MOST browsers. But the BIG drawback to this method is that the speed of movement of the mouse governs the speed of animation
46. AT-AT Walker
AT-AT Walker is not flash but only CSS3. That amazing !
Find more than 50 cool animation button examples on this website. Great inspiration and CSS showcase.
50 More CSS3 Effects And Tutorials You Always Wanted To Complete
The techniques that were new a year ago have become standard now. CSS3 is evolving fast and for that reason we’ve prepared 50 cool CSS3 tutorials.
CSS Text Effects & Typography
The idea in this tutorial is to rotate a part of a sentence. You’ll be “exchanging” certain words of that sentence using CSS animations.
While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius. This is not a tutorial but you can play with the plugin, break it down and learn new techniques.
4. How To Add Text Gradients With CSS
In this tutorial you are going to look at some of the new CSS3 features for dealing with text colors.
With CSS3, a whole host of text shadow effects are available for us to play with. In this article, you’ll see some of the effects you can make with relatively little CSS code.
One of the hot CSS3 skills for 2012. Implement a subtle texture over text with just a few lines of code.
The word-wrap property has been removed from the CSS3 spec but other related properties have been added. Find out what they are and how to use them.
Menus, navigation and sliders
In this tutorial you will learn how to code a pure CSS3 navigation dropdown menu.
You probably have already seen animated menus with the LavaLamp effect (based on jQuery plugin). In this tutorial you’ll learn how to repeat the same behavior using only CSS3.
Using hidden inputs and labels, you will create a CSS-only accordion that will animate the content areas on opening and closing.
This tutorial will show you how to create a content navigator with CSS only. The idea is to have several slides or content layers that will be shown or hidden using the :target pseudo-class.
This tutorial will show you how to create a pure CSS3 content accordion. This will work on all browsers and devices that support the :target selector.
In this tutorial you will create an image accordion that will expand an item on click. Using the sibling combinators and a nested structure you can control the opening of the items/slides with radio buttons.
Recreate Orman Clark’s Vertical Navigation Menu with CSS3 and jQuery while using the minimum amount of images possible.
In this article you’ll learn how to build some new CSS3 and jQuery tabs inspired by Google Play‘s design.
In this tutorial you’ll learn how to create an interactive menu using CSS3 goodness and jQuery’s power.
12. Create a Vertical Accordion Menu using CSS3 Tutorial
This tutorial will show you how to create an accordion menu using CSS3. There are many CSS3 accordion tutorials around on the web, this version is using the :target pseudo-class and works on browsers that support the CSS3 properties.
In this tutorial you will be creating a slider with “” and CSS3.
14. CSS3 breadcrumbs
A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages. In this tutorial you’ll learn how to create your own cool CSS3 breadcrumbs.
In this tutorial, you’ll learn how to build a teaser page using just CSS, no images or even a Photoshop design.
Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. Learn how to tweak the template with some CSS3 tricks.
A product page is any page on your website that showcases a product. It has to describe its features, have some screenshots, and be descriptive. Learn how to create one with CSS3 and a little touch of jQuery.
4. Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements
Hopefully you’re familiar with the use of the :before and :after pseudo-elements in order to create some interesting effects with CSS. This tutorial will show you how you can create a simple ‘stacked’ look to some images.
This tutorial will teach you how to create this pricing table with the CSS scaling effects. Improve a look of PSD just by using CSS.
In this tutorial you are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class:target.
If you’re about to launch a new web product or you just need to improve the user experience for an existing web form, then this tutorial is for you.
A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations you can create unique slide transitions.
In this tutorial you’ll be creating Premium Pixels’ Tagtastic Tag Cloud. As an experiment in alternative approaches, you’ll create the tags using gradients, shadows and (most importantly) CSS transforms, which will form the point of each tag. After completion you’ll have to even take a step further and cater for IE.
Create a sleek and functional video player using HTML5 and CSS3.
This tutorial will show you how to create a fancy image gallery with CSS3 transitions. The techniques used are mainly CSS3 transitions combined with CSS :hover pseudo-class.
Tips, tricks & techniques
Making media display consistently on your site can be a problem, especially with multiple content authors. Opera’s Chris Mills shows you how object-fit and object-position can solve it.
Using the general sibling combinator and the :checked pseudo-class, you can toggle states of other elements by checking a checkbox or a radio button. This tutorial will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.
In this tutorial you’ll learn how to create an animated 3D bouncing ball using only CSS3 transitions, animations, and shadow effects.
Have you ever seen a website showcasing image thumbnails that are slightly rotated? It’s a simple effect that adds a layer of visual personality. That said, if you’re not achieving the rotation effect with CSS, you’re working too hard. Learn how to do it right!
In this tutorial you will be driven through the basics of rotating in 3 dimensions and will combine these transforms with the scale and translate transforms for more complex results. You will also add a basic level of interaction to animate the effects as the user interacts with the page.
This tutorial will show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighboring thumbnails proportionally to their distance. You’ll also make a description appear.
This tutorial will show you a quick and easy way to incorporate a shine effect transition to your images with CSS3, useful in making your user interface elements look like they’re a real polaroid photo.
Learn how to style the image element with CSS3 inset box-shadow and border-radius so it works for responsive design.
In this tutorial you’ll learn how to use some fancy techniques like how to incorporate icon fonts into a design and how to insert objects using pseudo elements.
How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.
In this beginner tutorial you will be making some cool CSS3 buttons.
Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones.
Create an animated bird that animates each time you hover it. This is a very simple CSS3 trick and doesn’t require any advanced knowledge of HTML or CSS.
CSS3 Multi Column Module is perhaps one of the most interesting and exciting things that has happened to CSS in a long time. It’s not a gimmick or design trick like box-shadow or animation. It’s a real, tangible device which we can use to make designing websites easier. Check out what it does and see examples.
In this article you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach.
This tutorial will show you how to show product information with cube style using CSS3 3D Transform.
35 Tutorial Sites Where You Can Learn CSS Effects and Tricks
CSS ( Cascading Style Sheets) are the modern standard for presenting website. Combined with structural markup language like HTML, XHTML – CSS fully take care about presentation part, creating that good concept – HTML = Content, CSS = Presentation.
If you know CSS, you can really do everything controlling spacings, borders, positioning, margins, paddings, colors, fonts, background images, hover effects and more presentational effects. CSS is really easy to understand, and in my opinion every graphic designer should have at least simple coding skills with HTML and CSS, because CSS is really still design part, not really coding.
In this article, you’ll have all the best resources available, which will teach you how to use CSS really effectively.
I started myself with W3Schools and HtmlDog – pick your own favorite and stick with it! Also I wanted to mention especially Css-Tricks website and Delicious CSS tag usage – there you will find never-ending sources of CSS resources, you could ever need! Enjoy and good learning!
Great website maintained by Chris Coyier, who constantly offer on his site many useful CSS tutorials and screencasts.
The following chapters cover all the basics of CSS design.
A huge pile of CSS-related tips, tricks, showcase sites and resources – everything in very well categorized way.
Huge resource and link collection covering everything releated to coding, CSS, standards, books and so on.
Big collection of websites and CSS related articles.
Beautiful website showing a demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page. You can download HTML and CSS file to inspect each design submitted here and learn how unique CSS effects are achieved!
Delicious takes care of big statistics and you can rapidly find out – what’s hot now in CSS section (recent/popular) and also try to use not only CSS tag – but CSS together with Tutorial, Reference, Blog etc. to filter that list more suitable to your own needs.
CSS resources and tutorials for web designers and web developers – various collections with many navigation examples( Listamatic, Listamatic2) and several tutorials (ListTutorial, FloatTutorial,SelectTutorial) as well.
Free fixed and fluid CSS layouts, the modern way to learn CSS – inspect youself premade layouts to get better understanding how they work.
Select a layout and go to “View > View source” to view the layout’s source, then copy-paste the code in notepad and safe the file as index.html. Study the code and watch the changes when you change something. (best results with Firefox, download link available in the webmaster tools section on this site)
This site is primarily intended to be a place for authors to discuss real-world uses of CSS. This doesn’t preclude discussions of theory, or nifty cutting-edge tricks that show off the power of CSS, or even talking about (X)HTML, DOM, and so forth. Site has nice Wiki CSS section!
25.Web Design From Scratch
Scratchmedia are a London UK based Web design agency, which has impressive collection of web design related tutorials and articles, CSS section featured here.
These tutorials on web design/CSS makes learning this stuff fun and easy – you will be up and running in no time because it ain’t that hard!
Learn about CSS shorthand properties, CSS references and CSS3 selectors all in one place!
Huge resource list site featuring many articles and websites, which are directly related to web developing process, which also include CSS of course!
CSS Documentation Shortcut – just input your interesting css property and you’ll get full explanation to it, very handy, if you know what are you searching for, but forgot how specifically code looks.
Extremely useful one page CSS cheat sheet – I strongly suggest to print it out for later reference.
All CSS Properties Listed Alphabetically
If I have missed some useful sites – feel free to share them, I’ll edit this article and add them to list if those sites will be worthy!
CSSDeck showcases a collection of CSS Creations for educational and inspirational purposes that can also be used in your projects (to a certain extent).
GET EXCLUSIVE WORDPRESS & BUSINESS TIPS
Enter your email to join with 1WD in 2016. We will send you only the best content as well as special subscriber only tips to supercharge your WordPress website and how to succeed as freelance designer!