HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)

18 - Managing the Graphical Interface

CSS3 enables you to create stunning graphical elements for Web sites and applications, which ratchet up the satisfaction of the user experience.

You can create graphics effects such as rounded corners and drop shadows, and apply 2D and 3D transformations like rotations and7scaling.

Transitions and animations, performed completely with HTML and CSS3, bring life to otherwise static images, boxes, and text.

Rounded Corners

In CSS3, you can add rounded corners to layout elements, including headers, footers, sidebars, and images. Use the border-radius property along with a length value, such as pixels, ems, or a percentage.

- the higher the value, the more rounded a corner will be

- some browsers have problems rendering a percentage value

You can round individual corners with the following properties:

- border-top-left-radius

- border-top-right-radius

- border-bottom-right-radius

- border-bottom-left-radius

<!DOCTYPE html>

<html>

<head>

<style>

#rcorners {

border-radius: 15px 50px 30px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

</style>

</head>

<body>

<p id="rcorners">Rounded corners!</p>

</body>

</html>

Creating Shadows

Add drop shadows to elements using the box-shadow property. A drop shadow is a visual effect that makes an object appear like it is floating above other objects on a document.

There are six attributes that can be modified when using the box-shadow property: h-shadow, v-shadow, blur, spread, color, and inset.

The h-shadow and v-shadow attributes must be included, while the others are optional.

<!DOCTYPE html>

<html>

<head>

<style>

#box {

box-shadow: 10px 10px 5px #808080;

background: #73AD21;

padding: 20px;

width: 150px;

height: 100px;

}

</style>

</head>

<body>

</body>

</html>

box-shadow Attributes

Value	Description
none	Default value. No shadow is displayed
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed
v-shadow	Required. The position of the vertical shadow. Negative values are allowed
blur	Optional. The blur distance
spread	Optional. The size of shadow. Negative values are allowed
color	Optional. The color of the shadow. The default value is black. Look at CSS Color Values for a complete list of possible color values.
color	Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all.
inset	Optional. Changes the shadow from an outer shadow (outset) to an inner shadow
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Transparency

Apply the effect of transparency with the opacity property. Opacity determines how transparent an object appears.

The syntax for applying a transparency to an image or other element is:

opacity: value

The value for the opacity object is a number between 0.0 and 1.0.

*1.0 means that the object is entirely opaque, while 0.0 means that it is entirely transparent.

<!DOCTYPE html>

<html>

<head>

<style>

#box {

opacity: .5;

background: #73AD21;

padding: 20px;

width: 150px;

height: 100px;

}

</style>

</head>

<body>

</body>

</html>

Background Gradients

A gradient is a smooth transition from one color to another.

In CSS3, you can apply gradients to a number of objects, such as headers, footers, buttons, and more.

Gradients are applied through the background property with one of the methods:

- linear-gradient: Creates a gradient from top to bottom or vice versa, or from corner to corner

- radial-gradient: Creates a gradient that radiates out from a central point

- repeating-linear-gradient: Creates a repeating linear gradient, which results in straight bands of gradient color

- repeating-radial-gradient: Creates a repeating radial gradient, which results in circular bands of gradient color

Linear Gradients

To create a linear gradient, you must define at least two-color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax:

background: linear-gradient(direction, color stop1, color-stop2, ...);

<!DOCTYPE html>

<html>

<head>

<style>

#box {

background: linear-gradient(to right, purple, #3D5266, red, green);

padding: 20px;

width: 150px;

height: 100px;

}

</style>

</head>

<body>

</body>

</html>

Radial Gradients

A radial gradient is defined by its center. To create a radial gradient, you must also define at least two color stops.

Syntax

background: radial-gradient(shape size at position, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

<!DOCTYPE html>

<html>

<head>

<style>

#box {

background: radial-gradient(circle, red, yellow, green);

padding: 20px;

width: 150px;

height: 100px;

}

</style>

</head>

<body>

</body>

</html>

Transformations

In HTML5/CSS3, you can now transform 2D and 3D objects.

A transform is an effect that lets you change the size, shape, and position of an element. This includes rotating, scaling, stretching, spinning and moving elements.

To add transformations, use the transform property with one of its methods.

2D Translations

A translation moves an element without rotating, skewing, or turning the image.

To translate an object, use the transform property in combination with the translate() method.

The translate() method accepts two values: one to adjust its position on the x-axis and another on the y-axis.

transform: translate(100px,50px);

2D Scaling

Scaling an element will increase or decrease its size. To scale an object, use the transform property in combination with the scale() method.

The scale() method accepts two values: a factor to adjust its width and another to adjust its height.

transform: scale(2,4);

2D Rotation

Rotating an element will turn it clockwise or counterclockwise. To rotate an object, use the transform property in combination with the rotate() method.

The rotate() method accepts one value: the number of degrees to rotate the object.

transform: rotate(30deg);

3D Rotation

3D rotation will rotate an element around its x-axis or y-axis. To 3D rotate an object, use the transform property in combination with the rotateX() or rotateY() methods.

The rotateX() and rotateY() methods accepts one value: the number of degrees to rotate the object around an axis.

transform: rotateX(180deg);

2D and 3D Skewing

Skewing an element will stretch it one or more directions. To skew an object, use the transform property in combination with the skew() method.

The skew() method accepts two values: the number of degrees to turn the object around the x-axis and another for the y-axis

transform: skewX(45deg);

3D perspective

Perspective, in terms of drawings and illustrations, is the convergence of lines that give the

illusion of depth. The CSS3 3D perspective property defines how a browser renders the depth of a 3D transformed element. The perspective property takes on a number value: lower values (in the range of 1 to 1000) create a more pronounced effect than higher values.

perspective: number;

<!doctype html>

<html>

<head>

div {

padding: 40px 40px;

background: #B8860B;

width: 150px;

color: #fff;

font-family: sans-serif;

font-size: xx-large;

}

div#div2 {

margin: 100px;

perspective: 600;

margin: 100px 0 0 50px;

-ms-perspective: 600;

margin: 100px 0 0 50px;

-moz-perspective: 600;

margin: 100px 0 0 50px;

-o-perspective: 600;

margin: 100px 0 0 50px;

-webkit-perspective: 600;

margin: 100px 0 0 50px;

transform: rotate3d(0, 1, 1, 45deg);

-ms-transform: rotate3d(0, 1, 1, 45deg);

-moz-transform: rotate3d(0, 1, 1, 45deg);

-o-transform: rotate3d(0, 1, 1, 45deg);

-webkit-transform: rotate3d(0, 1, 1, 45deg);

}

</style>

</head>

<body>

<div>Original element</div>

<div id="div2">Transformed element</div>

</body>

</html>

Transitions

In CSS3, a transition is a visible movement from one state to another on screen. To create a transition, use the transition property.

Set the value as the property that you would like to change. You must also set the duration, the delay, and the timing function.

This can be done with the transition property or by using specific properties for each.

<!doctype html>

<html>

<head>

#wrapper {

transition-property: opacity;

transition-duration: 3s;

transition-delay: 1s;

transition-timing-function: linear;

}

#wrapper #before, #wrapper:hover #after {

opacity: 1;

}

#wrapper:hover #before, #wrapper #after {

opacity: 0;

}

</style>

</head>

<body>

</div>

</body>

</html>

Animations

Animations move static images in a way that makes them appear as though they are moving.

Unlike transitions, animations use the @keyframes rule, which allows you to adjust the timings of an animation.

You can dictate when an action occurs by using a percent. i.e. 50% of the way through this animation, the element should be yellow.

<!doctype html>

<html>

<head>

div {

width: 200px;

height: 200px;

background: limegreen;

animation: a1 3s;

}

@keyframes a1 {

from {

background: limegreen;

}

to {

background: dodgerblue;

}

</style>

</head>

<body>

</body>

</html>