Just how awesome is CSS3? The main goal of this round-up, is to try to give answer to this question, and show you how powerfull CSS3 is. We will share with you new powerful CSS3 techniques which you will hopefully find very useful and valuable.
We also hope that techniques presented here, in this article, will encourage you to experiment with CSS3 and help design community to push CSS forward.
Shadows are cool. We started out having to create our shadows in Photoshop and attaching them as background images. Now our lives are made easier with CSS.
Using a little HTML and some CSS we take a trip to the dark side of the moon, create a periodic table and make a radioactive love concoction. We even throw some CSS animations in there to add to the party.
The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects!
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!
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.
In certain situations, CSS can replace the inflexible image buttons we used in the past. Add on top of that the advances made in @font-face and you have yourself a powerful combination for creating a wide variety of interface elements that are reusable and will degrade well in older browsers.
Through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create highly polished interface components that don’t require images.
CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples of how CSS3 can improve the web.
The article presents various geometrical forms, all created using CSS and a single HTML element. The following forms are presented: square, rectangle, circle, oval, triangle, parallelogram, trapezoid, star, pentagon, hexagon, octagon, heart and infinity — all using CSS only.
In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.
In this tutorial, we’ll look at how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic.