Taking a look at what’s new in CSS 3. An abundance of exciting new properties can be found in CSS 3, more complex, more efficient, allowing lighter reuse of images, or even no images, less bandwidth, more layout flexibility, content display control, less Javascript, more colors, more color value declarations.
Although not all new CSS 3 properties are supported by all browsers and certainly not without prefixes, there’s enough to discover and learn, here we’re making a start with, not all are listed here, new background and border properties …
New Background & Border Properties in CSS 3
Border -image, -radius, and box-shadow
With the new selection of border properties you are now able to create rounded borders without having to use images, use image slices to create customized image borders, add drop and inner shadows on around and inside the borders of boxes:
| Property | Description |
|---|---|
| border-image | This shorthand property allows the definition of a border image |
| border-radius | This shorthand property allows the definition of corner radii |
| box-shadow | A shorthand property to define shadow offsets, spread, blur, color and position |
Backgrounds
Multiple background images, background clip, background origin and background size, with the new multiple background properties where saying a “tearful?” goodbye to the use of nested DIVs needed when assigning multiple background images:
| Property | Description |
|---|---|
| background | A shorthand property to define one or more sets of background properties of an element |
| background-clip | The background-clip property defines the paint area for the specified background image(s) |
| background-origin | The background-origin property defines the positioning area for the specified background image(s) |
| background-size | The background-size property defines the size of the specified background image(s) |
CSS 3 Text formatting and Custom Fonts
CSS 3 Text Effects
CSS 3 properties for decorating & emphasizing text, include text line decoration, text emphasis & outlines, transform. Some of these techniques are already being put into practice live, and they’re looking pretty good:
| Property | Description |
|---|---|
| text-decoration | Extends to a shorthand property that allows the definition of text-decoration-style, text-decoration-line, text-decoration-color in a single declaration, each separated by a space. |
| text-shadow | This shorthand property allows the definition of shadow properties for an element |
| text-outline | A shorthand property for defining the color, thickness and blur radius of the text of an element. |
| text-emphasis | A Shorthand property for setting values for text-emphasis-style and text-emphasis-color in a single declaration |
| text-transform | Extended to include property values fullwidth and large-kana |
What’s New in CSS 3 Properties for Formatting Text
Many of the already existing text formatting properties are being extended to include alignment, spacing, wrap and breaks:
| Property | Description |
|---|---|
| text-justify | Defines the justification method for elements on which text-align property value is justify |
| text-align-last | Defines a justify value for a trailing end row of text on which text-align property value is justify |
| text-align | Extended to include property values of start,end, match-parent |
| punctuation-trim | A kerning property for controlling full width punctuation that is at the start or end of a line or next to another full width punctuation character |
| hanging-punctuation | Controls the positioning of punctuation at either end of a full line of text |
| text-indent | Extended to include the keyword values: each-line and hanging |
| text-autospace | Adds extra spacing around specific inline characters |
| text-overflow | Defines the behavior of block containers when text overflows |
| text-wrap | Used to define how text should wrap |
| word-wrap | Defines if word breaks are allowed |
| line-break | Defines a set of line breaking rules for an element (CJK Scripts) |
| word-break | Defines the line breaking rules for an element (non CJK Scripts) |
| white-space-collapsing(ud) | Defines how the white space of an element is collapsed |
CSS 3 @font-face Rule
The @font-face rule is a long awaited property from designers, developers and clients alike. The need to choose standard browser fonts will no longer need to be the forerunner and corporate identity can now be brought to the Internet without the need for image replacement headers:
| Property | Description |
|---|---|
| @font-face | Defines descriptors for local or download font file sources |
| font-stretch | Selects a relative stretched or condensed face of a font family |
| font-size-adjust | Defines relative sizing adjustment of the x-height of fallback fonts (second or third etc. choices), based on the first font choice, to preserve readability |
CSS 3 Hyperlinks
Hyperlink properties for window control will be making it possible to create popup windows without the use of Javascript, an interesting advance:
| Property | Description |
|---|---|
| target | A shorthand property for defining the set of target properties:target-name, target-new and target-position |
CSS 3 – Getting Playful – Transit, Transform, Animate
Apply 2D and 3D transform properties, transitions and animation to add dynamic to the elements of HTML, if they really replace Flash and Silverlight as some predict, time will tell:
CSS 3 2D and 3D Transforms
| Property | Description |
|---|---|
| transform | Defines 2D or 3D transform function(s) to add translation, rotation, scaling and perspective to objects |
| transform-origin | Defines the X Y origin of transforms for an element |
| transform-style | Defines rendering of nested objects in 3D space |
| perspective | Defines transforms to positioned or transformed children of the element |
| perspective-origin | Defines the X Y origin for the defined perspective property |
| backface-visibility | Defines the visibility of the back of a transformed element |
What’s New in CSS 3 Transitions
| Property | Description |
|---|---|
| transition | Transition is a shorthand property used for defining transition properties in a single declaration |
| transition-delay | Defines the amount of time a transition should wait before starting |
| transition-timing-function | Defines how the transition should be implemented |
| transition-duration | Defines how long the transition of a property should take |
| transition-property | Specifies the name of one or more CSS properties, e.g. color, width, to which transition is applied |
CSS 3 Animation
| Property | Description |
|---|---|
| animation | The shorthand property for defining a set of animation behavior properties for block and inline level elements, including:
animation-name |
| @keyframes | Rule to define additional animations and timing controls, referenced using the animation-name and animation-timing-function properties |
More Flexibility for Layout
Extending Box Model properties in CSS 3:
| Property | Description |
|---|---|
| overflow | A shorthand property for defining overflow-x and overflow-y in a single declaration. |
| overflow-x | Defines clipping for the content of an element that horizontally extends past the edges (left, right) of the container |
| overflow-y | Defines clipping for the content of an element that vertically extends past the edges of the container (top, bottom) |
| overflow-style | Defines the scrolling method for overflowing content |
| marquee-style | Defines the scrolling style for overflowing content where overflow-style property value is marquee |
| marquee-loop | Defines the number of times the content is looped where overflow-style property value is marquee |
| marquee-direction | Defines the direction in which the content moves where overflow-style property value is marquee |
| marquee-speed | Defines the speed at which the content moves where overflow-style property value is marquee |
| rotation | Defines the angle (0-360deg) to which an element is rotated |
| rotation-point | Defines 2 values to define rotation-point offsets, where default is 50% 50% |
The New CSS 3 Flexible Box Model
The new CSS 3 Flexible Box Model provides advanced layout properties for arranging and distributing child elements. Directional flow and arrangement of box elements for layout.
| Property | Description |
|---|---|
| Orientation | |
| box-orient | Defines the orientation, (horizontal, vertical, inline or block), in which the child element layout should flow |
| Oder of Display | |
| box-direction | Defines if the direction in which the child elements of boxes are displayed, i.e.horizontal: left to right or right to left, vertical: top to bottom or bottom to top |
| box-ordinal-group | Defines the order in which the child elements of a box are displayed |
| Alignment | |
| box-align | Defines the alignment and placing of child elements |
| Flexibility | |
| box-flex | Defines if a child element is flexible, and its amount of flexibility in relation to sibling elements, allowing them to shrink or grow together with the containing box to prevent overflow or to use excess space |
| box-flex-group | Allows the grouping of box-flex defined elements, and thereby group priorities for flex |
| Axis Packing | |
| box-pack | Defines how additional box-axis space should be distributed between the elements, i.e. horizontal space distribution on horizontally flowed elements or vertical space on vertically flowed elements |
| Rows and Columns | |
| box-lines | Defines if multiple columns or rows are allowed when the sum of the dimensions of the child elements is greater than that of the box |
CSS 3 Multi Columns
CSS 3 Multi Columns allow the content of an element to flow into columns, with defined gutters and custom gutter lines. What until now has to be done with multiple floating DIVs, clear fixes, margin and padding values can now be achieved by assigning columns and gutters to a single element.
| Property | Description |
|---|---|
| columns | The shorthand property for defining the column-count and column-width properties in a single declaration |
| Column Areas | |
| column-count | Defines the optimal count of columns |
| column-fill | Allows the contents of the columns to be evenly distributed, i.e. balanced, among the available columns. In the case that a height restriction is assigned, the contents will fill each column until the height is used before flowing into the next column. |
| column-span | Allows the definition of column span for an element, allowing it to span across all or a specified number of columns |
| column-width | Defines the optimal width of the columns |
| Gutters | |
| column-gap | Defines the amount of gap (gutter or space) that divides the columns |
| column-rule | The shorthand property for defining all column-rule (separating line) properties in a single declaration. A column rule is positioned in the centre of a gap. |
| column-rule-color | Defines the color of the gap rule |
| column-rule-style | Defines the style of the rule |
| column-rule-width | Defines width of the rule |
CSS 3 Grid
The new CSS 3 Grid allows the definition of an explicit grid layout (as opposed to the implicit grid of Multi Column layout) divided into newspaper style grids and columns. Elements are aligned to the grid by defining float and float-offset properties which reference the columns and rows.
| Property | Description |
|---|---|
| grid-columns | Defines the widths of the columns of a grid, the number of columns being equal to the number of defined widths |
| grid-rows | Defines the heights of the rows of a grid, the number of rows being equal to the number of defined heights |
