Build Kick-Ass Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! This video tutorial will show you how.

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

Sexy Interactions with CSS Transitions

While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification.With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.There is only one problem: many of us have never created animations in JavaScript, Flash or some other environment before, and are therefore not as well-versed in the unwritten rules of the animation world…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Hover Controls On the iPhone

Here’s a simple technique to get hover controls working on the iPhone. Hover controls are links and buttons that appear when you hover your mouse over a a target area and so are useful for a lot of secondary actions like delete and edit links – a way to simplify your interface…

VN:F [1.9.22_1171]
Rating: -2 (from 2 votes)

Beautiful CSS3 Search Form

Lately I’ve been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers…

VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)

Center Multiple DIVs with CSS

At some point, you may have a situation where you want to center multiple elements maybe <div> elements, or other block elements on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.There really should be a similar simple way to center multiple elements evenly spaced. It would be nice if CSS had a property called “box-align” which you could set to “center” then the child elements would be centered evenly within their parent. Well, you can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements for lack of a better term…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

How to Center an Absolutely Positioned Element Using CSS

Centering an absolutely positioned element is a CSS challenge that occurs now and then. The solutions seem obvious once I’ve done it, but I still find myself googling the problem every few months…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Top 5 CSS Shorthand Properties

An excellent way to simplify and streamline your Cascading Style Sheets CSS is to take advantage of the many different shorthand properties available to you. Working with a lot of CSS, you eventually memorize these different shortcuts, but every now and then, I find myself needing a quick, straightforward reference for some of the more elaborate property combinations. In this post, I’ll show you the shorthand rules for the following properties: Font Properties, List Properties, Background Properties, Border and Outline Properties and Transition Properties…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Pimp Your Tables with CSS3

You can use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup.

We will be applying the -webkit and -moz gradients for creating a great look without images and learn how to insert content into elements with a specific class…

VN:F [1.9.22_1171]
Rating: +3 (from 7 votes)

CSS3 Solutions for Internet Explorer

Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer IE6, IE7, and IE8 – all of which are still currently in significant use…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)