background preloader


Facebook Twitter

CSS Textbox Elements. Pure CSS3 Post Tags. 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 CSS3 Post Tags

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. All you need is a square element with rounded corners set to at least half the size of the element. I usually markup tags with unordered list. <ul class="tags"><li><a href="#">tag</a></li><li><a href="#">tag name</a></li></ul> I will add :before and :after pseudo elements and style them to achieve the styling I wanted I am placing the tags list at the bottom of the post element with adjusting ULs absolute position Height (and line-height) of the list item LI and anchor A is set.

Next to style is the anchor element. To achieve the pointed edge we are adding a :before pseudo-element. The last element to add is the :after pseudo-element. That is it! 3D Flip Cards // CSS3 Playground. The 3D transforms in this demo work in latest Safari, latest latest Chrome, latest Firefox, and versions of Opera running the Blink rendering engine.

3D Flip Cards // CSS3 Playground

Browsers without 3D acceleration just switch the z-index, so 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! The effect on this box can be done using 100% CSS. The other boxes all require some Javascript, but the animation is driven by CSS3. check you on the flip side Click or tap this circle!

Tap Again! Click or tap for Diagonal Rotation woahdude like a diamond in the rough yes, I'm a little crooked.


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. Border-radius: create rounded corners with CSS! Home / CSS3 Previews / Border-radius: create rounded corners with CSS!

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: This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9. The code for this example is, in theory, quite simple: However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details): How it Works. CSS3 Rounded Corner Generator.

This generator will help you create the code necassary to use rounded corners (border-radius) on your webpages.

CSS3 Rounded Corner Generator

This example uses the CSS3 (border-radius) property. You can select from having all the corners the same radius or you can customize each corner individually. Corner Options 2px 5px CSS Code border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #800000; Browser Support.


Guillermo Rauch's Devthought. Css3.