Web Design & Inspiration
35 Fresh CSS3 Articles & Tutorials

35 Fresh CSS3 Articles & Tutorials

This is cool collection of most wanted, usefull tutorials and articles by CSS3. In this article you find out how make cool CSS3 Gradient Buttons, Sliding or bouncing Navigation without JavaScript, Slide effect menu with the Apple-Style and much more. Hope you like it. Thanks

CSS3 Gradient Buttons


Today I’m going to show you how to put the CSS gradient feature in a good practical use.

Design a Prettier Web Form with CSS 3


Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. I’ll show you how in today’s tutorial!

Pure CSS3 Animated AT-AT Walker from Star Wars


In this article we’ll quickly walk-through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back.

CSS3 Tutorial – sliding or bouncing Navigation without JavaScript


This Step-by-Step Navigation-Tutorial is made by the CSS3-Properties “border-radius” and “animation”. This demonstrates how easy it can be to get attention to your navigation without Images and JavaScript!

CSS3 Transition Tutorial – Slide effect menu with the Apple-Style


CSS Transitions – Fluent animated transitions such as Slide-effects for Web pages elements such as, for example, to create a menu, yet most were of small plugins implemented based on a JavaScript framework like jQuery…

How To Create Depth And Nice 3D Ribbons Only Using CSS3


There are some properties of the CSS3 languages that can help us to accomplish this mission.

Simulate Realism with CSS3


CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so.

CSS3 Glow Tabs


CSS3 Tabs like those found on the jQuery conference website, image-less, with CSS3 gradients, inner shadow, rounded corners, and CSS transitions.

CSS3 Dropdown Menu


Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow.

Create Windows 7 start menu using CSS3 only


I am fascinated with how much you can do with so little using CSS3. Many user interface elements that require images in order to have appropriate visual appearance now can be styled only with CSS3. In order to prove that I assigned myself a task to create Windows 7 start menu only with CSS3 (and some icons).

The CSS 3 Flexible Box Model


This article about the Flexible Box Layout was written by Jérémie Patonnier, French open Web enthusiast.

Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius


This article takes things further, showing how to use these properties to create beautiful UI elements without the use of any images, JavaScript or Flash.

Speed Up with CSS3 Gradients


WebKit browsers paved the way with CSS based gradients. Now Firefox 3.6 is out and is supporting them as well, which makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead.

Create a Color Changing Website Using CSS3


In this brief tutorial we’ll take go crazy with CSS3 transitions in Webkit to create a simple web page that showcases some really nice color fade effects.

Advertisement

CSS3 Click Chart


Since my knowledge of CSS3 is fairly shoddy, I decided to create and release a CSS3 “click chart” or “help chart” (for lack of a better term) that displays examples of some of the newest features in CSS.

The New Hotness: Using CSS3 Visual Effects


Not everything in this article is practical, or even bug-free, but it’s a fun primer on what’s in the pipeline for Web design. To get the most from these examples, you’ll have to use Safari 4 or Chrome.

CSS3 Transitions – Are We There Yet?


Like mentioned above, the whole topic has been split in two parts. The first part is offering a general overview in current status of CSS3 Transitions. Second part is called “CSS3 Transitions – Problems and Solutions”, which will explain in details how CSS3 Transitions behave in different browsers.

CSS3 Good Times


CSS3 is here! Well, kind of. Although the new specification is not yet finished, there are some really useful and impressive improvements already available in some of the latest browsers. Why not start getting familiar with the new features that will drive the future of web front end design and development? This article introduces you to CSS3 and provides tips and resources to get you started.

CSS bar charts—styling data with CSS3 and progressive enhancement


ar charts in CSS are neither very new, or very difficult. Using some pretty basic styling you can force lists etc into resembling graphs and charts fairly easily…

Microsoft Announces CSS3 support for IE9


Yes, you read that right. Someone at Microsoft must have noticed that 100% of their users were spending 99.99% of their time on the internet (using IE of course) and after years of hate mail and death threats sent to them by web developers (mine should arrive tomorrow) and now, thank the lord, they are realizing that Internet Explorer is junk.

Use CSS3 to Create a Dynamic Stack of Index Cards


Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features (including DesignLovr) we hardly ever see the full potential of what can be achieved with CSS3.
Today we’re going to take a step into that direction and discover some of the possibilities CSS3 gives us.

Beautiful Photoshop-like Buttons with CSS3


One of the elements on a web page that a visitor’s attention is drawn to first is in many cases a button. Whether it is a “Add to cart”, “Leave a comment” or “Subscribe” button, they all are designed to stand out from the rest of the design and make the visitor click on them.

CSS of the Future: How CSS3 can Optimize Design


The design blogosphere has been buzzing about the improvements level 3 of Cascading Style Sheets will bring. Although still a ways off from official recommendation status by the W3C, some browsers are already supporting pending features. I want to highlight a few of the CSS3 features I’m excited about that will not only add flexibility to the design process, but that will aid with search and conversion optimization as well.

Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5 – Look Ma, No Flash!


Searching YouTube for inspiration I stumbled on to the intro of the classic 1967 spider-man cartoon series. While watching I realized that the animation was very basic. It was the paper doll sort of animation that lends itself perfectly to css3. Hmmm… “I could something like that with a little css3″, I thought.

Create a studio-style backdrop with CSS3


As the title makes clear, the tutorial is for creating the effect in Photoshop — but really, the same effect is fairly easily achievable with some bleeding-edge CSS. That said, it won’t work in every browser, so currently it’s just a proof-of-concept piece.

How to use CSS3 Orientation Media Queries


For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries, which gives us greater control on when specific styles should be applied. In this article I will focus on the orientation media query and have a fun demonstration showing how to use it.

CSS3 Techniques You Should Know


Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

The best CSS3 techniques to improve your website


CSS3 is all about improving a design that already looks good and works well. Never rely solely on CSS3 as Internet Explorer (among others) fails to recognize the markup. Don’t let those browsers put you off though because the majority support various kinds of CSS3 attributes.

The hidden power of border-radius


So hopefully after reading – Understanding CSS – Padding, Positioning and CSS3 – you understand the basics of CSS and have been experimenting with other properties. It is important to remember that some properties will allow you to achieve effects that aren’t necessarily stated. In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images.

jQuery style menu with CSS3


Here’s a quick experiment I did with CSS3. Again I was just mucking about with CSS3 transitions which could one day replace all the fancy jQuery animation tricks people use. The outcome was a really simple animated sliding verticle menu.

CSS3 Transforms & @font-face Experiment


This is the first of what I hope are number of experiments I plan on working on over the next few months, all in an effort to get acquainted with some of the new CSS3 features out in the wild that seem to be gaining some traction.

Everything You Need to Know about CSS3 Color Techniques


CSS3 is revolutionizing Web by introducing a number of totally amazing elements and attributes that push modern web development a little bit forward. Many features are already supported to some extent in latest versions of the modern web browsers such as Chrome, Firefox, Safari, and Opera.

List of Really Useful Tools For CSS3 Developers


Generally speaking, CSS is very easy. But when browser vendors started implementing CSS3 features, things became little complicated. Not difficult but complicated. This is mainly due to two reasons: first of all many new CSS3 properties (e.g., transition, gradient, transform, etc) are not that simple and secondly we have to use vendor specific extensions.

CSS3 Poster With No Images


Another experiment in CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa, and maybe some more stuff. It’s not particularly clean HTML either; don’t look too closely at the markup rendering the robot. No images were used or harmed in the making of this thing.

  • Splashnology Editors,
  • May 11, 2010

SHARE THIS POST

This post has been written by the team here at Splashnology.com

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.