background preloader

CSS3 Patterns Gallery

CSS3 Patterns Gallery
Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique?

CSS3 linear gradients By Chris Mills Introduction For as long as we can remember, we have used colour gradients on the Web to brighten things up, and add class to designs. If you want to create a fantastic looking button, panel, gauge, progress bar or other UI feature, a gradient is the way to go. Perfectly Rotate and Mask Thumbnails With CSS3 Ever seen a website showcasing image thumbnails that are slightly rotated? It's a simple effect that adds a layer of visual personality. Saying that, if you're not achieving the rotation effect with CSS, you're working too hard! Learn how to do it right! Republished Tutorial Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. Using Sass’s @error, @warn, and @debug Directives Feedback methods are essential in any programming language. In JavaScript, you’ve probably used console.log() or maybe alert(). In PHP, you can use var_dump() or print_r(). In Ruby, you may use debug or inspect.

Infographics Showcase - Infographic Reviews - Submit Infographic - Part 2 Filed under: Business Infographics, Legal Infographics, People Infographics | Comments Off The Special Risks Bureau has compiled a list of the most expensive body parts celebrities have insured, and used them to create the most valuable celebrity couple in the world. Body parts include Gene Simmons’ tongue, Rod Stewart’s voice, Cristiano Ronaldo’s legs, Julia Roberts smile, Jennifer Lopez’s bum, and Mariah Carey’s legs. Circle Hover Effects with CSS Transitions « Previous Demo: Animated Responsive Image Grid Back to the Codrops Article Use what you have by Angela Duncan View on Dribbble Common Causes of Stains by Antonio F. Mondragon View on Dribbble Pink Lightning by Charlie Wagers View on Dribbble

A new micro clearfix hack The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required. Demo: Micro clearfix hack Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ Create Pure CSS3 Ticket-Like Tags Tags are a familiar feature of many Web 2.0 services, websites and especially blogs. During this tutorial we're going to use CSS3 to create ticket-like tags, without relying on any images. Here's a quick breakdown of the process: Create the HTML markup.Style the main tags.Style the four corners of the tag.Style the link.Add and style a punched hole in the tag. Step 1: HTML Header Markup

Stripes in CSS By Chris Coyier On Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place.

Related:  CSSWeb designResourcesStars