Archives

25 Useful CSS3 Techniques and Tutorials

2010-03-09 10:31
Css3 have a capacity to revolutionize the way we design/develop website. css3 is intoducing loads of new and exciting features. Most of the browsers such as Firefox, Safari already support some of the CSS3 properties It is essential today for a web designer to know about CSS3 and there are many tutorials and resources for the CSS3. Below i 8217;ve listed 25 Useful CSS3 Techniques and Tutorials to get you started with CSS3, hope you find this collection useful 1.) Create a Dynamic Stack of Index Cards using CSS3 We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling). 2.) CSS3 Analogue Clock Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time 3.) Awesome Overlays with CSS3 The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS. 4.) CSS3 Flexible UI: Avoid Recutting UI Graphics for Mobile What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo After a few initial tests, the answer to both of those questions was a very solid ldquo;yes rdquo;. A solid ldquo;friggin rsquo; right rdquo; if in Cape Breton. 5.) Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible. 6.) Create Depth And Nice 3D Ribbons Only Using CSS3 We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 ndash; 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser. 7.) Sweet AJAX Tabs With jQuery 1.4 CSS3 This post is a tutorial of making an AJAX-powered tab page with CSS3 and the newly released jQuery 1.4. 8.) Sweet tabbed navigation bar using CSS3 Although I don rsquo;t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we rsquo;re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3. 9.) Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3 This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I...
Read More...