Present and layout with Cascade StyleSheets (CSS), Page 2

Media Queries

As an extension to the @media rules, Media Queries adds the ability to apply groups of styles to media with various sub details such as not just to a screen but a colour screen as:

@media screen and (color) {
  /* … */
}

For a range you can use min- and max- prefixes to any of the new terms which include color, width, height, device-width, device-height, aspect-ratio, device-aspect-ratio, color-index, monochrome, orientation and resolution:

@media screen and (max-width: 400px), handheld and (max-width: 400px) {
  /* … */
}

Apply to a 24-bit colour screen:

@media screen and (color: 24) { /* … */ }

The difference between width and device-width is that width is the width of the webpage (or webpage on paper) and device-width is the width of the screen (or paper).

aspect-ratio:

@media screen and (min-aspect-ratio: 16/9) { /* … */ }
@media screen and (aspect-ratio: 1280/720) { /* … */ }

color-index refers to the number of colours supported in the device's colour table (just like there are 256 colours in a GIF or 8-bit PNG image).

monochrome and orientation respectively provide the number of bits in a monochrome display and whether it is a landscape or portrait display.

Applying styles to a device with a certain amount of dots per inch resolution can be accomplished by:

@media print and (resolution: 300dpi) { /* … */ }

Mozilla 1.9.1 and Presto supports Media Queries while WebKit and Chromium based support these query features except resolution.

Multiple Background Images

In CSS 3 you can apply multiple background images with a single declaration using the same background-image, background-position and background-repeat properties by using a comma separated list of values each referring to a different background layer. The first value is the top most layer, the second value is the layer under that, third value is for the layer under that and so on.

.compositbkgrd {
  background-image: url('../images/logo.png'), url('../images/bird.png'), url('../images/bird.png'), url('../images/pattern.png');
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
  background-position: 5px 0, 20px 5px, 23px 10px, 0 0;
}

So far only Mozilla 1.9.2 based like Firefox 3.6, Apple WebKit 525 based like Safari 3, Chromium based like Google Chrome and KHTML 4 based like Konqueror support CSS 3 Multiple Background Images.

2D Transforms

Objects on the webpage or web application, including text, can be transformed such as scaled, rotated, skewed (stretched) and translated using the transform property.

 A transform-origin property with a space separated x value and y value can change the center of the object transformation so that it is not necessarily the very center of the object. Each value can be in typical CSS units including pixels and percentages. Alternatively the x value could be left or center or right and the y value could be top or center or bottom. Such as transform-origin: 25% 35%; making the transform origin at 25% by 35% from the left, top of the object (the default is 50% 50%).

The value of the transform property is usually either one transform function or a space separated list of transform functions.

• Translating: specifies a new location for the origin of the object – effectively moving the content. The translate() function takes an x,y coordinate with units. For instance transform: translate(125px, 125px); changes the origin to 125 pixels by 125 pixels from the previous origin. The second number is optional and if omitted will be zero. Plus a translateX() function just moves the horizontal origin and the translateY() function just moves the vertical origin.
• Scaling: gracefully resizes the object. The scale() function takes an x,y coordinate. For instance transform: scale(2, 2); increases to twice the size or transform: scale(.5, .5); decreases to half the size. The second number is optional and if omitted then is the same as the first. Plus scaleX() only handles the horizontal and scaleY() only handles the vertical sizing or zooming.
• Rotation: rotates the object. The rotate() function takes a number in degrees and the deg unit. For instance transform: rotate(-8deg); rotates 8 degrees anti-clockwise or transform: rotate(18deg); rotates 18 degrees clockwise.
• Stretching: stretches the object. The skew() function takes an x,y coordinate with the deg units to stretch both horizontal and vertical directions of the object. Plus skewX() function takes an angle to stretch horizontally and the skewY() function takes an angle to stretch vertically. For instance transform: skewX(45deg); or transform: skewY(15deg); or even transform: skew(45deg, 8deg);.

 There is a matrix() transform function with 6 values that is the core, advanced transform that will do translations, scaling, stretching and rotation but most authors use the translate(), scale(), skew() and rotate() functions instead.

Gradients

 For the value of background-image and list-style-image properties you can specify CSS Colour Gradients. Gradients can be defined as either linear or radial.

 Linear gradients are specified via the linear-gradient() function. In this function you can have an optional background position value or an angle value for the direction of the gradient. If not used then the position is 'top' for top to bottom by default.

Then you need at least two colour stops, all separated with commas. Each colour stop may have, in addition to the colour value, a space then a percentage or length value to specify the colour stops position with the gradient line.

background-image: linear-gradient(white, blue);
background-image: linear-gradient(top left, white, cyan, blue);
background-image: linear-gradient(45deg, #226622, #ffff00 46%, magenta 90%, black);

 Radial gradients are specified via the radial-gradient() function. In this function you can have an optional background position value or an angle value for the direction and the center of the gradient. If not used then the position is 'center' for the center of the background area by default.

Followed by an optional group of a comma and an optional shape then an optional space and size. This shape can be a 'circle' or by default is an 'ellipse'. This size can be 'closest-side', 'closest-corner', 'furthest-side', 'furthest-corner', 'contain' or 'cover'.

Then you need at least two colour stops, all separated with commas and may have percentages or lengths for each colour stop.

background-image: radial-gradient(circle, white, blue);
background-image: radial-gradient(left bottom, circle, white, cyan 10%, blue 25%, green 52%, red 75%, black);
background-image: radial-gradient(45deg, ellipse, #226622, #ffff00 46%, magenta 90%, black);

 So far no web browser supports proper CSS Gradients. Mozilla based supports the same syntax but with the -moz-linear-gradient() and -moz-radial-gradient() functionss.

 Apple WebKit and Google Chromium based support an alternative syntax with the single -webkit-gradient() function. The first parameter states whether it is 'linear' or 'radial'.

Then two pairs of positioning, almost like the background position but without the 'center' keyword and only the percentage value will have the percent unit. If the type is 'radial' then each position, in addition, will have a comma and a number for the radius.

Afterwards are at least two colour stops. Each colour stop is represented as a color-stop() function with a parameter stating the colour stop's position between 0.0 and 1.0 or a percentage; and a parameter of the colour itself. You can also use the from() function with a colour parameter, instead of the first colour stop function and use the to() function with a colour parameter, instead of the last colour stop function.

background-image: -webkit-gradient(linear, left bottom, right top, from(green), color-stop(90%, red), to(rgba(0,0,0,0.2)));

background-image: -webkit-gradient(radial, 50 50, 10, 50 50, 30, from(green), color-stop(90%, red), to(rgba(0,0,0,0.2)));