The Beauty of CSS3 – Useful and Innovative Coding Techniques

    written by Nikola Lazarevic

    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.

    Shadow Experiments: Have Some Fun with CSS Shadows

    Shadow Experiments: Have Some Fun with CSS Shadows
    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.

    Build a Kickbutt CSS-Only 3D Slideshow

    Build a Kickbutt CSS-Only 3D Slideshow
    This tutorial will show us how to create a 3D slideshow using only HTML and CSS. No JavaScript required!

    Equal Height Column Layouts with Borders and Negative Margins in CSS

    Equal Height Column Layouts with Borders and Negative Margins in CSS
    This techinque does not rely on any of the usual tricks. It does not use images, nor extra markup, nor CSS3, nor pseudo-classes, nor Javascript, nor absolute positioning. All it uses is border and negative margin.

    The Man From Hollywood

    The Man From Hollywood
    The Man From Hollywood is a kinetic type animation using only HTML, CSS and Javascript. All of the animation is done using Webkit CSS transition, transforms, as well as standard CSS properties. Javascript just acts as a helper to turn CSS classnames on and off at the appropriate times. All of the content you see on the demo is HTML and CSS, no images were used.

    3D Text Using Just CSS

    3D Text Using Just CSS
    3D text using nothing but CSS. No extra markup, no :before or :after mess, and no images. Just progressively enhancing CSS to add some flair to your work.

    Using CSS Text-Shadow to Create Cool Text Effects

    Using CSS Text-Shadow to Create Cool Text Effects
    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!

    CSS3 Dropdown Menu

    CSS3 Dropdown Menu
    Create a Mac-like multi-level dropdown menu using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome.

    Build Kick-Ass Practical CSS3 Buttons

    Build Kick-Ass 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!

    Create a Vibrant Digital Poster Design with CSS3

    Create a Vibrant Digital Poster Design with CSS3
    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.

    Type Study: An All CSS Button

    Type study: An all CSS button
    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.

    Simulate Realism with CSS3

    Simulate Realism with CSS3
    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 Shapes of CSS

    The Shapes of CSS
    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.

    Pure CSS Folded-Corner Effect

    Pure CSS folded-corner effect
    Create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds.

    Angled Content Mask with CSS

    Angled content mask with CSS
    This article explains how to create angled CSS content “masks”. The idea is pretty simple and uses CSS transform property (rotation, to be more precise).

    Subtle CSS3 Typography That You’d Swear Was Made in Photoshop

    Subtle CSS3 Typography that you’d Swear was Made in Photoshop
    Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby!

    Case Study: Getting Hardboiled with CSS3 2D Transforms

    Case Study: Getting Hardboiled with CSS3 2D Transforms
    In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.

    Let’s Create Paper with CSS

    Let’s Create Paper with CSS
    If we’re smart with our shadows, gradients, and borders, we can relatively easily create nice looking notepad paper with just CSS3. I’ll show you exactly how in this week’s video tutorial.

    How To Create Customizable Mac Dock With CSS3 Only

    How To Create Customizable Mac Dock With CSS3 Only
    This post will show you how to create a customizable Mac like Dockbar using only CSS3. The mouse over animations are implemented only with CSS3 transitions without the help of Javascript.

    Awesome Overlays

    Awesome Overlays
    An example of using border-image and other new properties to make killer image overlays.

    Pure CSS3 Post Tags

    Pure CSS3 Post Tags
    This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts.

    Type Study: A Layered Text Shadow

    Type study: A layered text shadow
    Learn how to create three-dimensional feel and emulate offset printing mishaps occasionally seen in newspapers, using CSS3 text-shadow property.

    CSS Box-Shadow:Inset

    CSS Box-Shadow:Inset
    It’d be nice to be able to add a vignetting effect to photos sans-Photoshop, but the way browsers interpret box-shadow:inset is to throw the shadow behind the image, rendering it invisible.

    Create Beautiful CSS3 Typography

    Create Beautiful CSS3 Typography
    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.

    Applying a Clean & Imageless Design to an Article – Part I

    Applying a Clean & Imageless Design to an Article – Part I
    In this first installment of a two part tutorial, I would like to show you how to use simple CSS to apply an attractive, well-balanced design to an article.

    CSS3 Border-Radius & Rounded Avatars

    CSS3 Border-Radius & Rounded Avatars
    I love this solution. It yields rounded avatars with no additional images or scripts loading, just an extra line of code.

    We offer all kinds of certification exams including MB2-867. Our guaranteed MB6-204 exams are freely accessible all around the world of testking microsoft and 70-683.

     
    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

10 Comments
ADD COMMENT
  • Sergei Tatarinov says:

    March 13, 2011

    Really useful posts and just in time! Thanks mate!

  • Marcel says:

    March 13, 2011

    Great examples dude!

  • Nurul Ishlah says:

    March 14, 2011

    nice share, there are some techniques that I looking for, thanks a lot :)

  • Web Design Company Mumbai says:

    March 14, 2011

    Nice Set of tutorials.

  • Milos says:

    March 14, 2011

    Bookmarked. Planning on checking every single tut… let’s see if that’ll happen.

    Anyway – nice roundup, thanks!

  • jp says:

    March 14, 2011

    hello, thanks for this great roundup, you missed this one:
    http://www.wordpressthemeshock.com/clean-css3-boxes/

    Impressive css3 boxes with no images :)

  • Shay Howe says:

    March 16, 2011

    Thanks for the nice roundup. I’ve been digging pretty deep into CSS3 lately and these tutorials will help out.

    I wrote my own tutorial including CSS3 transforms, transitions, and animations at http://www.shayhowe.com/tutorial/css3-animated-owl-tutorial/

    Please feel free to check it out!

  • Beben Koben says:

    March 16, 2011

    this is a great story…
    ck ck ck
    thanks \m/

  • SHAFIKJNU says:

    March 20, 2011

    It is really helpful

  • Sagar Ranpise says:

    March 31, 2011

    Awesome Post!!!