web applications, artwork, tutorials and much more | www.appslog.com

Look at some very useful CSS3 resources where you will get tons of information, tips and trick and much more.....a must see for CSS developers and designers

Tips

Backgrounds and Borders

Describes background colors and images and the style of borders. New functionality includes the ability to stretch the background image, to use images for the borders, to round the corners of the box and to add a box shadow outside the border.

• Multiple Backgrounds
  Explains how to add multiple backgrounds to an element using “background-image” property.
• Background Size
  Illustrates how to specify the size of the background images using “background-size” property (Opera & WebKit based browsers).
• Gradient Borders & Rounded Corners
  Illustrates adding gradient borders using “border-color” (Mozila based browser) and creating rounded corners by using “border-*-radius” property (Mozila & WebKit based browsers).
• Border Radius
  Explores “border-radius” property(Mozila & WebKit based browsers).
• Using Images For Border
  Illustrates using images as border using “border-image” property (Mozila & WebKit based browsers).
• Shadow Effect on Elements
  Illustrates adding shadow effects on elements using “box-shadow” property (Mozila & WebKit based browsers).

Selectors

Selectors are used to select elements in an HTML or XML document, in order to attach (style) properties to them.

• CSS3 Selectors Explained
  Provides great introduction to CSS3 Selectors
• Overview of CSS3 Structural pseudo-classes
  Provides brief description and usage of various pseudo-classes in CSS3.

Multi-Column Layout

Multi-Column Layout proposes new properties to flow content into flexibly-defined columns.

• Multiple Columns
  Illustrate how to create multiple columns using “column-width, column-gap, column-count, column-rule” properties (Mozila & WebKit based browsers).
• Multiple Columns Using CSS3
  Introduction to CSS3 multiple columns feature.

Colors

Specifies color related aspects of CSS, including transparency and the various notations for the <color> value type.

• Transparency of an Element
  Illustrates adding transparency to elements using “opacity” property.
• RGBA Color Values
  Illustrates use of RGBA that include ‘alpha’ to specify opacity to RGB color.
• HSL & HSLA Color Values
  Illustrates use of HSL & HSLA color values.
• CSS3 Color Names
  All 147 color names and their values in alphabetical order.

Tricks

a list of various attempts/tricks mostly using JavaScript to achieve some of these effects today.

• JavaScript (jQuery) Implementation of the CSS Template Layout Module
• Font Face in IE: Making Web Fonts Work
• Pure CSS Opacity and How to Have Opaque Children
• RGBA Today
• Simple CSS3 Rounded Corners With Support For IE
• jQuery Corners – Cross Browser Solution for Rounded Corners
• jQuery Solution for Cross Border Border Image
• CSS Multiple, Layered Backgrounds with jQuery
• jQuery Plugin – Drop Shadow Effects
• Cross Browser Text Shadow

Techniques

Following list of resources demonstrate various techniques; exposing what you will be able to achieve using new features in CSS.

• A Look at Some of the New Selectors Introduced in CSS3
• Fun with :target (CSS3)
• Super Slick jQuery Menu With CSS3
• Super Awesome Buttons with CSS3 and RGBA
• Text-Shadow Exposed: Make Cool and Clever Text Effects with CSS text-shadow
• Animation Using CSS Transforms
• Matrix Animation With WebKit CSS3
• Apple’s Navigation Bar Using Only CSS
• 3D Cube Using CSS Transformations
• Fun with 3D CSS and Video
• Auto Scrolling Parallax Effect without JavaScript
• Clever Lists with CSS3 Selectors
• CSS3 Two Column List Layout
• Futurebox, Lightbox Without the JavaScript
• Old School Clock with CSS3 and jQuery
• CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
• Tooltips With CSS3
• Styling Forms with Attribute Selectors
• The Shadow effect in CSS3
• Progressive Enhancement with CSS3
• Hidden Messages
• jQuery Style Menu With CSS3
• Creating a Polaroid Photo Viewer with CSS3 and jQuery
• CSS text-shadow Fun: Realtime Lighting Demo
• Overriding The Default Text Selection Color With CSS
• Enhance Internal Page Links
• Rotate3Di – jQuery Effect Plugin
• HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

Some Useful sites

• CSS3.Info
  Online resource covering CSS3
• Webfonts
  The website dedicated to webfonts & @font-face embedding
• A List Apart: Topics: Code: CSS
• CSS3.info: everything you need to know about CSS3.

If you like this article, please help us spread the word by bookmarking this article using any of the following bookmarking sites buttons.

You can also follow us on twitter or subscribe to our feed.

TrackBack URI for this entry

Comments (2)