CSS3

< < < <

Get flash to fully experience Pearltrees

CSS Textbox Elements

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. Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles . Take a look at the demo For CSS triangles you need to manipulate borders of an element that has zero height and width. CSS circle is simpler.

Pure CSS3 Post Tags

3D Flip Cards // CSS3 Playground

As of March 31st, 2013 the 3D transforms in this demo only work using Safari 5 , Chrome 10+, the WebKit Nightly build , and Firefox 10+ . Browsers without 3D acceleration just switch the z-index. You won't lose any functionality! These cards are using -webkit-transform: rotateY() and rotateX(); with some of the 3D settings: -webkit-transform-style: preserve3d; and -webkit-transform-perspective . Mozilla browsers are using the -moz-transform equivalents. Mouse Over Me!

buttons

When can I use... Support tables for HTML5, CSS3, etc

select html table cell values when clicking on a row

Spiffy Box - Simple Rounded Corner CSS Boxes made easy.

http://www.css3.info/preview/rounded-border/

Border-radius: create rounded corners with CSS!

Home / CSS3 Previews / Border-radius: create rounded corners with CSS! The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3. Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology. Here’s a basic example:

http://sublimeorange.com/css/css3-inner-shadow/

I’ve seen a good few tutorials on the css3 box-shadow but none about the inner shadow attribute of it, so i thought I’d show you here. Here’s our div with a few basic bits of styling: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Then when we add box-shadow:inset 0 0 10px #000000; to the css it becomes: Don’t forget that this property is only available on Firefox as far as i know but I’ve included both box-shadow:inset 0 0 10px #000000; and -moz-box-shadow:inset 0 0 10px #000000; in my css to futureproof it for when more browsers support it.