CSS3 drop shadow, 100+ best tutorials, scripts and examples | Bypeople

CSS3 drop shadow, 100+ best tutorials, scripts and examples

Until a while ago, web developers were forced to learn Photoshop or count with a trustful graphic designer to help them with things like shadows, gradients and stuff, this because there was no method to create these elements directly on CSS. Then the world saw the release of CSS3 with its fantastic features, which included of course making shadows. On this post we have gathered a big list with some of the best resources to let you know a little bit more about CSS3 shadows, you will find useful tutorials, great plugins and code examples, shadow generators and a few extra links. CSS3 drop shadow
Our best of the best
Without wanting to sound pretentious, we’ve just released a fantastic (and FREE) CSS3 shadow generator in ThemeShock, the tool incorporates tons of features and great accessibility to help you make the most astounding shadows with CSS only.
Open CSS3 Shadow Generator
    And in case that you’re looking for some fancy text shadow effects with CSS, ThemeShock has just released an amazing CSS text effects generator where you can test different shadow effects such as neon, anaglyph, blur and more, all this while using some of the most popular web fonts around.
    Open CSS Text Effects Generator
    Tutorials
    On this first category we have pure CSS3 shadow tutorials, we have listed a lot of useful articles that will show you how to leverage CSS3 to the maximum. Some of these posts include tips on how to create cross-browser shadows, emulate famous Photoshop effects, create text shadows and more.

    Advanced pure CSS3 boxes without using images

    css3shadows01 This tutorial shows you how to make a beautiful set of frame boxes (more than 15) using pure CSS3 techniques, many of these boxes include awesome shadings.

    Box-shadow: shadow effect on elements in CSS3

    css3shadows02 Very useful article that studies the different aspects of the box-shadow property in CSS3.

    Cross-browser CSS3 box-shadow

    css3shadows03 One of the most helpful tutorials on the list, it explains how to migrate many CSS3 properties to older browsers including IE6.

    Create a Slick CSS3 Button with box-shadow and RGBA

    css3shadows04 Using the box-shadow property to emulate the static and active states, this tutorial shows how to create a beautiful button design.

    Vignettes with CSS3 Box Shadows

    css3shadows05 Awesome tutorial that explains how to achieve Photoshop’s vignette effect using CSS3 only.

    Sponsor Flip Wall With jQuery & CSS

    css3shadows06 A combination of CSS3 properties and jQuery to generate a great sponsor page that recreates a nice inner shadow effect.

    Experiment: Realistic iPod with CSS3

    css3shadows07 Although this tutorial does more than just working with shadows, it makes a great use of them to create this iPod design without using images.

    How to Create CSS Drop Shadows Without Images

    css3shadows08 This post is a summary of CSS shadow techniques and some of the possible appearances you can obtain with them.

    Using CSS Text-Shadow to Create Cool Text Effects

    css3shadows09 Amazing tutorial by our friend Chris Spooner where he shows how to create great text shadow effects such as vintage, anaglyphic, pressed and more.

    Create a Letterpress Effect with CSS Text-Shadow

    css3shadows10 On this tutorial you will learn how to emulate Photoshop’s letterpress effect with CSS3.

    Drop Shadows with CSS3

    css3shadows11 After seeing Mike Matas’s old website, our friend Divya decided to make an improved and simpler version of these CSS3 shadows.

    Drop shadow with CSS for all web browsers

    css3shadows12 A primal version that recurs to plain CSS to create simple drop shadow effects, hopefully a CSS3 version of this will be released soon.

    Box-shadow, one of CSS3′s best new features

    css3shadows13 A thorough revision by the CSS3 Info team around the box-shadow property, the tutorials features examples, tutorials and a complete revision on the subject.

    CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?

    css3shadows14 This article deals with one of the must recurrent headaches of web developers, making CSS3 shadows work well on Internet Explorer. The tutorial explores the best way of fixing this problem.

    An Option to Mimic CSS3 Text Shadow in Internet Explorer

    css3shadows15 The author of this article exposes a good method to make CSS3 shadows look better on Internet Explorer without relying on plugins or heavy scripts.

    Text shadows with CSS3

    css3shadows16 In this six-minute video on CSS3 Text Shadows, you’ll learn all the basics about the text-shadow property, one of the nicest novelties in CSS3.

    CSS3 Advanced Box Shadows

    css3shadows17 In this 5 minute video, you’ll learn about additional box-shadow features, such as multiple shadows and inset shadows. You’ll also learn some advanced techniques, such as how to create a sunken well effect.

    CSS3 Tip: Removing Box Shadows

    css3shadows18 So it has been set that CSS3 shadows are one of the most awesome things around, but what happens when you want to remove it from certain objects?.

    Shadow Boxing: Image-free, CSS3, Glossy Buttons

    css3shadows19 This post takes a different approach to button design as they put aside background images and work everything straight with code.

    How to create slick effects with CSS3 box-shadow

    css3shadows20 Written by someone that evidently used to love Photoshop until discovering CSS3, this tutorial teaches you how to make beautiful elements using shadow properties.

    Realistic CSS3 Box Shadows

    css3shadows21 Using CSS3 only, this tutorial teaches how to implement a nice drop shadow effect to an element.

    CSS3 Text Shadow

    css3shadows22 It seems like CSS3 saved a lot of lives that were done with Photoshop, this article is a clear example as it explains how to leverage the magic CSS3 for stop relying in PS for doing elemental things such as shadows.

    CSS3: Box-shadow and inset-shadow

    css3shadows23 Useful tutorial that explains the different box-shadow styles (blurred, inset, both) along with some practical examples.

    How to Add Drop Shadows with CSS3

    css3shadows24 This topic shows you how to add drop shadows to the outside or inside of your layout elements by using Internet Explorer 9 and CSS3.

    CSS3 Drop Shadow Text in Dreamweaver

    css3shadows25 On this post you’re about to discover how to create fire and ice text effects or more conventional embossed text shadows using the text shadow property in CSS3.

    Cool Text Effects Using CSS3 Text-Shadow

    css3shadows26 This tutorial will show you how to create some really cool and inspiring text effects using text shadows in CSS3.

    CSS3 Tutorials: Box Shadow Effect

    css3shadows27 A complete study on box-shadow properties: Offset, blur, spread, distance, color and more.

    Slick CSS3 Image Drop Shadows

    css3shadows28 Helpful tutorial that explains how to create the popular curved shadow effect that we can see in many sites nowadays using CSS3 only.

    CSS Box Shadow

    css3shadows52 Quick study over CSS shadows accompanied with an useful explanation on how to make shadows for Internet Explorer.

    CSS3 From Scratch: Make Blurred Shadow Inside The Box

    css3shadows29 Great tutorial that explains how to take advantage of CSS3 shadows to create a lovely inner shadow with a blurred effect on it.

    How-to: CSS3 shadow effects – Part One

    css3shadows30 In this two part series you’ll learn how to add CSS shadows to both text and boxes with ease.

    CSS3 Text Shadows

    css3shadows31 Awesome tutorial that manages to create an astonishing 3D text through the implementation of CSS3 shadow properties.

    How To Create Text Shadows in CSS3

    css3shadows32 Quick tutorial that in a few steps teaches how to create text shadows in CSS3 with ease.

    CSS3 box-shadow to enhance your WordPress website

    css3shadows33 For all the WordPress fans, this tutorial shows how to add beautiful CSS3 shadows to your site and also implement a CSS 2.1 compliant version to be shown in older browsers.

    Add shadow to your text in CSS3

    css3shadows34 On this post you will see the different values for the text-shadow property, how to apply them to a text and some good examples.

    How to CSS3 Text Shadow

    css3shadows35 A quick review on CSS3 text-shadow properties along with a few great examples that show what can be achieved without relying on images.

    Using CSS3 Text Shadow for Active Link States

    css3shadows36 Based on previous CSS3 tutorials by Chris Spooner and Chris Coyier, this article assesses a nice way to utilize CSS3 shadows as hover states.

    CSS3 rounded box corners, box shadows, and text shadows

    css3shadows37 A quick review on rounded box edges, box shadows, and text shadows, all in CSS3 of course.

    CSS3 cross-browser box-shadow

    css3shadows38 The title might be a little tricky, as the cross-browser term actually refers to webkit compliant, but still a really nice tutorial.

    Creating a True Inset Text Effect Using CSS3

    css3shadows78 Awesome tutorial by Gordon Landry where he show us how to achieve the best inset text effect using CSS3 only, the demo works best in Google Chrome.

    Shadows and CSS3

    css3shadows81 Helpful tutorial that covers the implementation of box-shadow and text-shadow techniques along with RGBA.

    Rounded Corners, Drop Shadows, Opacity & CSS3

    css3shadows82 This tutorial explains how to leverage CSS3 shadows and rounded corners to create beautiful web elements like the ones displayed on the demo page.

    Sombras en CSS3 con box-shadow

    css3shadows83 This Spanish tutorial covers the main aspects of CSS3 shadows, including properties, browser compatibility and examples.

    Utilizando CSS3 hoy: Sombras

    css3shadows85 Another helpful Spanish tutorials that introduces text-shadow and box-shadow properties, two of the nicest properties included in CSS3.

    Como agrego sombra a un texto con CSS3?

    css3shadows90 Quick tip that explains the essence of working with CSS3 text-shadow in an understandable way.

    Paper Shadow Effect in CSS3

    css3shadows91 Really nice tip that teaches how to emulate the classic paper shadow effect without Photoshop but CSS3 only instead.

    Ombres avancées avec CSS3 et box-shadow

    css3shadows92 Awesome French tutorial about CSS3 shadows with beautiful examples with their corresponding code next to each one of them.

    Build Awesome Practical CSS3 Buttons

    css3shadows98 Amazing tutorial by the people from NetTuts+ where using nothing more than CSS3 properties they manage to create a beautiful web button design.

    CSS3 Typography that you’d Swear was made in Photoshop

    css3shadows99 Thanks to text shadows, outlines, transitions and even text gradients, this tutorial is able to show you how to create an eye-catching text design with CSS3 only.

    Design a Prettier Web Form with CSS3

    css3shadows100 Thanks to the advanced CSS3 properties such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful with minimal effort, and this tutorial will show you how.

    Quick Tip: Getting Clever with CSS3 Shadows

    css3shadows101 This tutorial by NetTuts+ explains how by simply detaching a CSS3 shadow from an element, you can transform it in very creative ways.
    Generators
    This section features some neat CSS3 generators that will save you a lot of trial and error time. These generators offer you many great features to create custom shadows and preview them in real time, and as if that was not enough, they also give you the resulting code ready to be pasted in your CSS.

    CSS3 Text Shadow Generator

    css3shadows39 Andy Webber brought to us this awesome CSS3 text shadow generator that upgrades the code in real time while you change the shadow using the different controllers.

    CSS3 Box Shadow Generator

    css3shadows40 And from the same author we find this great CSS3 box shadow generator with several features and real-time code.

    CSS3 Generator

    css3shadows41 Eric Hoffman and Peter Funk brought us this great CSS3 generator featuring the essential properties you may want wish, including a drop shadow effect.

    CSS3 Generator

    css3shadows42 Awesome CSS3 generator, that lets you experiment with RGBA, @font-face, box / text shadows, transitions and more.

    CSS3 Maker

    css3shadows43 Great CSS3 editor that allows you play with several CSS3 parameters and showing the changes in real time plus the code behind it.

    CSS3 Pie

    css3shadows44 CSS3 Pie makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 design features (including shadows), something quite useful for those who are forced to work with IE.

    CSS3 Linear Gradient Button Generator

    css3shadows45 An amazing CSS3 generator with tons of customizable options, clean interface and simply great for those who want to start learning CSS.

    CSS3 Playground

    css3shadows46 This online application was created with the only purpose of letting you experiment with the different CSS3 properties and see what they’re capable of.

    Tryit Editor v1.4 (Box Shadow)

    css3shadows47 A real-time editor that through a split screen lets you get your hands into the CSS code and play with the box-shadow property and see the changes instantly.

    Tryit Editor v1.4 (Text Shadow)

    css3shadows48 As the previous generator created by W3Schools, this tool lets you experiment with the text-shadow property in real-time.

    CarveMe

    css3shadows49 The approach of this tutorial is instead of having a dark inset shadow on top of the bright text, employ a bright text-shadow on the dark background.

    Box Shadows

    css3shadows50 Awesome shadow generator that works great in most browsers (except IE of course). You can adjust the offset, color and blur values while obtaining the corresponding code.

    Box Shadow Generator

    css3shadows74 This German website offer us a simple and yet awesome CSS3 generator, you can define the X and Y properties of your shadow as well as color and spread.
    Scripts and Examples
    On this part of the article we find useful scripts and code examples that show how to achieve different shadow effects in CSS3, these resources are not exactly tutorials, as they go straight to the code, which can be useful when you know exactly what you want and just need to find the code.

    Pure CSS3 box-shadow page curl effect

    css3shadows51 Great box-shadow examples to use in your designs, you can find the live demo and the code source on the same link.

    CSS3 box shadows, tips and examples

    css3shadows53 On this post the author displays 30 different CSS3 experiments that prove the great things that you can achieve with box-shadow, though the result can only be visualized in Chrome 11 +.

    CSS3 Text-Shadow

    css3shadows54 This plugin offers a method to display CSS3 shadows on IE through CSS Filter Blur and jQuery.

    CSS3 Text Shadows

    css3shadows55 CSS text shadows can produce some stunning textual effects without images and on this article you’re going to find some pretty cool examples along with their syntax code.

    8 CSS3 text-shadow effects

    css3shadows56 Using the text-shadow property and nothing else, this article shows 8 different examples of what you can do with CSS3.

    CSS3: Rotations, Shadows, Rounded Edges & Animations

    css3shadows57 As part of understanding CSS3, this tutorial grabs the main features of it and strips them down.

    CSS3 Box Shadow and Inset Shadow

    css3shadows58 Most tutorials talk about creating a drop shadow effect on CSS3, this one instead focuses its attention on inset shadow, which is as great as the first effect we’ve mentioned.

    CSS3’s Box-Shadow Adds Drop Shadows, Inner Shadows

    css3shadows59 Useful examples that show the different things that you can do with CSS3 to create great shadow effects.

    CSS3 inner shadow

    css3shadows60 Quick tip that explains how to easily create inner shadow effects with CSS3.

    Compass Box Shadow

    css3shadows61 This post teaches how the box-shadow mixing can be used to apply an inset or drop shadow to a block element.

    Using CSS3 Text-Shadow

    css3shadows62 Short post that indicates the benefits of CSS3 shadows as well as the way to use them.

    Quick Tips for CSS3 Box Shadow

    css3shadows63 A quick summary on CSS3 box-shadow property, you can find some useful tips to help you master this great feature.

    CSS Box-shadow rolled corners

    css3shadows64 Although CSS3 has proven to be able of recreating many of the Photoshop’s essentials, there are things that still are not as easier as you might think, one of these topics is rounded corners, which is the main theme that this article discusses.

    CSS3 Box-Shadow for Legacy IEs

    css3shadows65 An effective solution for CSS3 shadows on Internet Explorer thanks to our friend Christian ”Schepp” Schaefer.

    CSS3 Box Shadow

    css3shadows66 Although CSS2 already give people the chance of working with shadows, the process was a little messy and not many browsers supported it. Now with CSS3 and modern web browsers, you can use box-shadow to create things like the ones displayed on this post.

    CSS3 – Box Shadow

    css3shadows67 This Joomla fan show us how CSS3 shadows operate and the best way of implementing them on your site.

    Start Using CSS3: RGBa and better shadows

    css3shadows68 This post explores the RGBA (Red, Green, Blue, Alpha) property and how to take advantage of it to create better shadows.

    CSS3 Text-Shadow Preview

    css3shadows75 A quick review on CSS3 text shadows featuring some of the possibilities you can work with, including neon glow, blur and more.

    Text-shadow, Photoshop like effects using CSS

    css3shadows79 CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. This tutorial shows you how to properly utilize the text-shadow property.

    Sombras en CSS3

    css3shadows84 Quick tip that shows how to take advantage of box-shadow and text-shadow in CSS3 to create really nice shadings.

    Fun With Box Shadows

    css3shadows88 On this article the author starts from the basic CSS3 shadows and from there he explains how to add blur, spread and color to them.

    CSS3 box-shadow examples

    css3shadows89 Great list featuring several CSS3 shadow examples with different sizes, spread values and color, along with their corresponding code.

    Simple CSS3 buttons using box-shadow & border-radius

    css3shadows94 A simple and yet useful CSS3 exercise that shows how to create a nice set of web buttons using CSS3 shadows with ease.

    Can CSS3 box-shadow:inset do only one or two sides?

    css3shadows95 Nice tip that explains how to get rid of CSS3 shadow on sides using RGBA instead of hex color and setting a bigger offset value in y.

    jQuery Drop Shadow Plugin Revisited

    css3shadows96 Awesome jQuery plugin that automatically creates a CSS3 box-shadow for browsers that support it, for those who don’t, the plugin uses a double div technique to emulate the shadows.
    Others
    On the final section of this post we have left all those useful resources that don’t fit precisely in any of the previous category or fit in more than one. You will find useful charts, video tutorials and more great tips to help you master CSS3 shadows.

    CSS3 Files

    css3shadows69 This site is definitely one of the most complete CSS3 sources to understand its different properties in terms of design, functionality and more.

    CSS tips & tricks

    css3shadows70 The W3C take on CSS text shadows in several styles, including fuzzy shadows, glossy and multiple shadows.

    The ‘Box-shadow’ property

    css3shadows77 The official W3C documentation of CSS3 box-shadows, includes different examples, complete documentation and more.

    Web Design with CSS3 Text Shadows

    css3shadows71 This great video post makes a deep analysis on the advantages and disadvantages of CSS3 shadows from a SEO and web design point of view.

    When can I use CSS3 Text-shadow?

    css3shadows72 Very useful resource featuring a compatibility table for support of CSS3 text-shadow in desktop and mobile browsers.

    Pure CSS Drop Shadows Using CSS3 the box-shadow attribute

    css3shadows73 The first in a series of CSS3 articles that will cover the drop shadow (box shadow) effect driven purely by CSS.

    Designing with CSS – Box Shadow

    css3shadows76 An introduction to working with CSS3 shadows, the article includes a brief introduction as well as a reference to one of the CSS3 generators that we’ve mentioned on the list.

    CSS3 Gradiente e Box Shadow

    css3shadows80 On this Portuguese video tutorial you will learn how to make gradients and apply shadows with CSS3, really nice tutorial, specially if you’re not too much into English.

    CSS3 – Sombras em textos

    css3shadows86 Another Portuguese article, this one explains CSS3 shadows in many aspects, including browser compatibility, syntax and more.

    Sombras: la propiedad text-shadow

    css3shadows87 Although this post was published prior the release of Firefox 4, it presents a clever solution to make text-shadow work in Firefox 3,5.

    Les ombrages en CSS3

    css3shadows93 One of the most complete reference articles on CSS3 shadows, it covers all the basics (IE compatibility included) while showcasing some lovely examples.

    jSlickmenu: A jQuery plugin for slick CSS3 menus

    css3shadows97 jSlickmenu creates slick menus with jQuery combined with some great CSS3 features like rotation and shadows, this plugin can really lift up your design. And so we have reached the end of this article, more than 100 CSS3 shadow examples, tutorials, compatibility charts, etc. We hope this post can give you useful tips to help you dominate CSS3 and also make you less dependent of Photoshop’s features, don’t forget to follow us on Twitter and Facebook to find many more useful web design and development tips, thanks for reading us and we’ll see you next time.


    Related Deals


    Related Posts