Beginner’s Guide to CSS3 (Updated)

Since its announcement back in 2005, the development of Cascading Style Sheet (CSS) level 3, or better known as CSS3, has been closely watched and monitored by designers and developers worldwide.

This post is dedicated to those who want to learn more, and get your hands dirty on coding CSS 3. It’s a compilation of useful CSS3 reads, sample codes, tips, tutorials, cheat-sheets, and more. Feel free to use them in your projects; just make sure it falls gracefully on incompatible browsers.

20 Useful CSS Tips For Beginners

20 Useful CSS Tips For Beginners

In the old days, we depend a lot on developers and programmers to help update the website, even... Read more

Getting Started with CSS3

Take Your Design To The Next Level With CSS3

Advantages of CSS3, with explanations and examples of CSS3 properties and selectors.

next level with css3
CSS3: Progressive Enhancement

How you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in browsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that do not yet support those features.

css3 progressive enhancement

CSS3 Background and Borders

CSS3 Rounded Corners

A collection of code snippets to create rounded corner with CSS3’s border-radius property.

border radius
CSS3 Border Image

How to use images with border-image property to create a more compelling borders.

css3 border image
CSS3 Gradient Borders

Did you know that you can also create borders with color gradients?

css3 gradient border
CSS3 Borders, Backgrounds and Boxes

Detail explanation with examples of new CSS3 properties like: background-clip, background-origin, background-attachment, box-shadow, box-decoration-break, border-radius and border-image.

css3 border background

CSS3 Text

Letterpress Effect

Create simple letterpress effect with CSS3.

css3 letterpress
Six text effects using text shadow

Text effects include: vintage/retro, neon, inset, anaglyphic, fire and board game.

css3 text effect
Text masking effect

Interactive text masking effect using the text-shadow CSS property.

css3 test shadow
CSS Selection Styling

Change text selection colors with CSS3.

css3 text selection
Perspective Text

You can use CSS3 Transform to create a fluid modern perspective for text.

perspective text
CSS3 Text Gradient

Grandient can also be applied on text, making text more colorful and pop.

css3 gradient
Text Mask

CSS3 also allows you to blend and image onto text using background-clip which gives the text more depth.

css3 text mask
Multiple-columns content

Using CSS3 to create a set of columns on your website without having to assign individual layers and (or) paragraphs for each column. You can take a look at this example on CodePen.io for a more compelling Newsletter-like layout with CSS3 Columns.

css3 columns

CSS3 Drop Shadow

Drop Shadown in Image

Showcase several techniques and some of the possible appearances for dropping shadows without using images.

css3 dropshadow
Glow Tabs with Box Shadow

How to create intuitive and beautiful tabs in CSS3 with no image.

Glow Tabs with Box Shadow

CSS3 Menus

Sexy Tooltips with Just CSS

How to use the evolving CSS standard can enhance some lovely cross-browser tooltips.

Sexy Tooltips
More tooltips:
How to spice up your menu with CSS3

Learn how to create an elegant menu with image slide-in and slide-out as you hover over the menu.

spice up css3 menu
Dropdown menu

How to create a Apple.com alike multi-level dropdown menu using border-radius, box-shadow, and text-shadow.

css3 gradient dropdown
CSS3-Only Tabbed Area

Click on a tab, hide all the panels, show the one corresponding to tab just clicked on – all with CSS.

CSS3-Only Tabbed Area

CSS3 Buttons and Bubbles

Speech Bubbles

Various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3.

css3 bubbles
Github alike buttons

Collection of buttons that show what is possible using CSS3 while also maintaining the simplest possible markup.

Github alike buttons

Generators

CSS Button Generator

Tool to help you create a button style conveniently. Use the options to change the size, color, border, shadow, and text shadow.

css3 button generator
Neumorphism

Generate Neumorphism styles which is a quite popular design direction in some mobile applications.

neumorphism
CSS3 Gradient Editor

Allows you to generate CSS3 gradient with cross-browser compatibility. You can compose a simple gradient to a more complex ones with multiple layers of gradient colors.

gradient editor
Animista

Generate smooth CSS3 transitions with an intuitive UI and quickly with some of the presets.

animista
Keyframes App

A tool that makes creating complex animation a lot easier. Compose many CSS3 properties like colors, transforms, sizing, spacing, and click the “Play” button to play it immediately.

keyframes app
NTH Master

Use this tool to help formulate CSS3 nth-child selector. As you type in, it’ll provide immediate visual feed on which child elements are selected.

Cross-browser CSS3 Rule Generator

CSS3 rules you can copy and paste onto your own stylesheet.

CSS3 Cheatsheets & References

CSS3 Cheat Sheet in PDF

Printable cheatsheet with complete list of all properties, selector types and allows values in the current CSS3 specification from the W3C.

css3 cheatsheet pdf
CSS3 Selectors Cheatsheet

A guide and reference to CSS3 selectors and its patterns.

css3 cheatsheet
CSS3 Click Chart

Get CSS3 styles like box sizing, border radius, text shadow, and more within a click.

css3 click chart
CanIUse

A vast database of compatibility of browser features. If you’d like to see if some CSS features are compatible with your target browsers, CanIUse.com is the site to go.

caniuse

More:

Show Comments
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail