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 Basic CSS Tips for Designers
Boost your web designs with our guide to 20 must-know CSS tips and tricks. Read more
Getting Started with CSS3
Advantages of CSS3, with explanations and examples of CSS3 properties and selectors.
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 Background and Borders
A collection of code snippets to create rounded corner with CSS3’s
How to use images with
border-image property to create a more compelling borders.
Did you know that you can also create borders with color gradients?
Detail explanation with examples of new CSS3 properties like:
Create simple letterpress effect with CSS3.
Text effects include: vintage/retro, neon, inset, anaglyphic, fire and board game.
Interactive text masking effect using the
text-shadow CSS property.
Change text selection colors with CSS3.
You can use CSS3 Transform to create a fluid modern perspective for text.
Grandient can also be applied on text, making text more colorful and pop.
CSS3 also allows you to blend and image onto text using
background-clip which gives the text more depth.
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 Drop Shadow
Showcase several techniques and some of the possible appearances for dropping shadows without using images.
How to create intuitive and beautiful tabs in CSS3 with no image.
How to use the evolving CSS standard can enhance some lovely cross-browser tooltips.
Learn how to create an elegant menu with image slide-in and slide-out as you hover over the menu.
How to create a Apple.com alike multi-level dropdown menu using
Click on a tab, hide all the panels, show the one corresponding to tab just clicked on – all with CSS.
CSS3 Buttons and Bubbles
Various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3.
Collection of buttons that show what is possible using CSS3 while also maintaining the simplest possible markup.
Tool to help you create a button style conveniently. Use the options to change the size, color, border, shadow, and text shadow.
Generate Neumorphism styles which is a quite popular design direction in some mobile applications.
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.
Generate smooth CSS3 transitions with an intuitive UI and quickly with some of the presets.
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.
CSS3 rules you can copy and paste onto your own stylesheet.
CSS3 Cheatsheets & References
Printable cheatsheet with complete list of all properties, selector types and allows values in the current CSS3 specification from the W3C.
A guide and reference to CSS3 selectors and its patterns.
Get CSS3 styles like box sizing, border radius, text shadow, and more within a click.
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.
- The Power of HTML 5 & CSS 3 – HTML 5 and CSS 3 are quickly gaining popularity, Perishable Press is here to explain how and why.
- CSS3 Polaroid Photo Gallery – How to build a cool looking stack of Polaroid photos with pure CSS styling.
- HTML 5 and CSS 3: The Techniques You’ll Soon Be Using – A walkthrough on building a blog from ground up with HTML5 and CSS3.