Wednesday, January 18, 2012

New CSS3 Features

see http://www.css3.info/preview/, hacked out highlights here

Links to individual features:

Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this page, when they get implemented in either FirefoxKonquerorOpera or Safari/Webkit.
Borders
  • border-color
  • border-image
  • border-radius - rounded corners on buttons
  • box-shadow - drop shadow on boxes
  • Firefox, Safari/Chrome, Opera and IE9 users should see a grey fading shadow under this box.
    #example1 {
    box-shadow: 10px 10px 5px #888;
    }

Color


Text effects

  • text-shadow - drop shadow on text
  • text-shadow: 2px 2px 2px #000;
    This produces the following text with a shadow 2px right and below of the text, which blurs for 2px:
    Users of Webkit (from Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror or iCab should see a grey drop-shadow behind this paragraph.

  • text-overflow
  • word-wrap

User-interface


Basic box model

  • overflow-x, overflow-y

Generated Content

  • content

Other modules

  • media queries
  • multi-column layout
  • Web fonts
  • @@font-face
  • {
  •     font-family: blah
  •     src: url(../fonts/blah.woff);
  • }
  • https://developer.mozilla.org/en/CSS/@font-face
  • @font-face allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.

    Syntax

    @font-face {
      font-family: <a-remote-font-name>;
      src: <source> [,<source>]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }
  • speech

Transforms 
-moz-transform scaleX(-1.1)
-webkit-transform

CSS Transforms

Posted by Dave Hyatt on Friday, October 26th, 2007 at 12:47 pm
WebKit now has rudimentary support for specifying transforms through CSS. Boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine transformations.
A transform can be specified using the -webkit-transform property. It supports a list of functions, where each single function represents a transform operation to apply. You can chain together operations to apply multiple transforms at once to an object (e.g., if you want to both scale and rotate a box). The supported primitives are:
scale, scaleX, scaleY – Scale an object around the transform origin. These functions take a number as an argument. The number can be negative (if you want to flip an object).
rotate – Rotate an object around the transform origin. This function takes a CSS angle (e.g., degrees or radian units).
translate, translateX, translateY – Translate an object. These functions take lengths or percentages as arguments. Percentages are relative to the border box of the object.
skew, skewX, skewY – Skew an object. These functions take CSS angles.
matrix – Specify a full affine transform matrix. This function takes six values. The last two values are the tx and ty, and they can be lengths or percentages.
-o-transform
-o-transform: scale(2) rotate(45deg) translate(80px);
transform
-ms-transform

No comments:

Post a Comment