CSS3 Examples

CSS Text

• Setting the text color
• Alignment of text
• Indentation of text
• Decoration of text
• Sets the spacing between characters
• Sets the spacing between words
• Sets the spacing between lines of text
• Preserving white-space and line breaks
• Text wrapping inside an element
• Vertical alignment of an image inside text

CSS Fonts

• Sets the font of a text
• Sets the size of the font
• Sets the style of the font
• Sets the variant of the font
• Sets the boldness of the font
• Setting the all font properties in a single declaration - The font shorthand property

CSS Links

• Style different states of a link
• Remove the default underline from hyperlinks
• Customize a link to look like a button
• Create image rollover effect

CSS Lists

• Specify bullets and numbering in the lists
• Sets the position of list-item markers
• Sets an image as list-item markers
• Setting all list properties in a single declaration - The list-style shorthand property
• Crating a simple navigation menus with lists
• Crating a simple dropdown menu using lists

CSS Tables

• Setting the borders of a table
• Specify the dimension of a table
• Creating better tables by collapsing the table borders
• Setting the horizontal alignment of text inside table cell
• Setting the vertical alignment of content
• Specify how empty cells should be displayed
• Specify padding of table cell
• Specify table layout algorithm - Automatic or Fixed
• Setting the position of table caption

CSS Background

• Setting the background color of an element
• Setting the image as element's background
• Repeating background image horizontally or vertically
• Specify the positioning of background image
• A fixed background image that will not scroll with its containing element
• Setting the all background properties at once - The background shorthand property
• Setting the size of the background image
• Setting the background clipping
• Setting the background origin
• Adding multiple backgrounds to an element

CSS Units

• Working with absolute units (e.g. px, pt, cm etc.)
• Working with relative units (e.g. em, ex, % etc.)

CSS Dimension

• Setting width and height of an element
• Setting maximum width and height of an element
• Setting minimum width and height of an element
• Controlling overflow of content

CSS Alignment

• Alignment of text and inline element inside the block-level element
• Center alignment of block element using margin property
• Aligning element horizontally using the float property
• Aligning element horizontally and vertically using the position property
• Prevent parent collapsing with the clear property
• Creating a Simple horizontal menu

CSS Positioning

• Position an element relative to the browser window
• Position an element relative to its parent element
• Position an element relative to its normal position
• Overlapping of elements using the z-index property

CSS Display

• Hide an element using the visibility property
• Remove an element from DOM using the display property
• Display an element as an inline element
• Display an element as a block element
• Collapsing table elements

CSS Border and Outlines

• Draw border around element
• Draw border on the individual sides of an element
• Setting different styles for the borders
• Setting the all border properties at once - The border shorthand property
• Creating the rounded corners around an element
• Using images for creating borders
• Draw outline around element
• Draw border around element without effecting the surrounding elements

CSS Margin and Padding

• Sets the margins for individual sides of an element
• Setting all margin properties in a single declaration - The margin shorthand property
• Sets the paddings for individual sides of an element
• Setting all padding properties at once - The padding shorthand property

CSS Opacity

• Setting transparency of an element
• Image rollover effect and transparency
• Text in a transparent box

CSS Generated Content

• Specify the quotation marks
• Automatic numbering of sections and category
• Insert generated content using CSS

CSS Pseudo-classes

• Setting styles for different states of hyperlinks
• Setting styles for form element in focus using the :focus pseudo-class
• Setting the styles for first child of an element using the :first-child pseudo-class
• Setting styles for last child of an element using the :first-child pseudo-class
• Setting styles for nth-child of an element using the :nth-child pseudo-class
• Setting styles for specific language using the :lang() pseudo-class
• Using pseudo-classes with selectors

CSS Pseudo-elements

• Creating the drop cap effect using the ::first-letter pseudo-element
• Styling the first line of a text differently using the ::first-line pseudo-element
• Insert some content before and/or after an element using the ::before and/or ::after pseudo-element
• Using pseudo-elements with classes

CSS3 Gradients

• Creating linear gradients from top to bottom direction
• Creating linear gradients from left to right direction
• Creating linear gradients along the diagonal
• Setting the direction of linear gradients using angles
• Creating linear gradients using multiple color stops
• Setting the location of color stops while creating the gradients
• Repeating the linear gradients
• Creating radial gradients
• Setting the shape of radial gradients
• Setting the size of radial gradients
• Repeating the radial gradients
• Using transparency with gradients

CSS3 Drop Shadows

• Creating box shadow effect
• Adding multiple box shadows to an element's box
• Creating text shadow effect

CSS3 2D Transforms

• Moving the elements using the translate() method
• Rotating the elements using the rotate() method
• Increasing or decreasing the size of an element using the scale() method
• Applying 2D transformation using the matrix() method
• Applying multiple transformation to an element

CSS3 3D Transforms

• Moving an element in three dimensional space using the translate3d() method
• Rotating an element in three dimensional space using the rotate3d() method
• Scaling an element in three dimensional space using the scale3d() method
• Applying 3D transformation using the matrix3d() method
• Applying multiple 3D transformation to an element

CSS3 Transitions

• Applying transition effect to background-color
• Applying transition effect to multiple property
• Setting all transition properties at once - The transition shorthand property

CSS3 Animations

• Animating elements on a web page
• Defining keyframe while creating animations
• Setting all animation properties at once - The animation shorthand property

CSS3 Multi-column Layouts

• Creating multi-column layouts
• Setting column count or width
• Setting gap between the columns
• Adding rule or vertical lines between the columns