web development -2

sri999

t4.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Graphic Design with CSS

Tutorial 4

Carey

Objectives

Create a figure box

Add a background image

Add a border to an element

Create rounded borders

Create a graphic border

Create a text shadow

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued)

Create a box shadow

Create linear and radial gradients

Set the opacity of an element

Apply a 2D and 3D transformation

Apply a CSS filter

Create an image map

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Figure Boxes

figure and figcaption elements:

They are used by HTML5 to introduce structural elements

The figcaption element is optional

The figcaption element can be placed directly before or after a figure box content

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Figure Boxes (continued 1)

The general syntax to create a figure box is as follows:

content

<figcaption>caption text</figcaption>

</figure>

content is the content appearing in a figure box

caption text is the description text that accompanies the figure

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Figure Boxes (continued 2)

The figure element – Used to mark a page content that should stand apart from the main content

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Background Styles

The use of images for backgrounds is supported by CSS using the following background-image style:

background-image: url(url);

url specifies the name and location of the background image

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Tiling a Background Image

Tiling – The process of repeating an image both vertically and horizontally until the background is filled

The type of tiling can be specified by applying the following background-repeat style:

background-repeat: type;

where type can be repeat (the default), repeat-x, repeat-y, round, or space

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Tiling a Background Image (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Attaching the Background Image

A background image is attached to its element so that it scrolls when the element content is scrolled

The attachment can be changed using the following property:

background-attachment: type;

where type is scroll (the default), fixed, or local

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Attaching the Background Image (continued 1)

type in the background-attachment property:

scroll sets the background to scroll with the element content

fixed creates a background that stays in place even as the element content is scrolled

local allows the element background to scroll along with the content within the box

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Attaching the Background Image (continued 2)

Watermarks:

Translucent graphics displayed behind a content

They can be created using fixed backgrounds

Often used to indicate that a content material is copyrighted

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Background Image Position

By default, background images are placed in an element’s top-left corner

The following property can be used to set the position of a background image:

background-position: horizontal vertical;

where horizontal and vertical provide the coordinates of an image within the element background

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Background Image Position (continued)

Keywords to position a background image are as follows:

left, center, and right are used to position the background horizontally

top, center, and bottom are used to position the background vertically

The background-position property is only useful for non-tiled images

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining the Extent of the Background

An element’s background extends only through the padding space excluding the border space

This can be changed using the following property:

background-clip: type;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining the Extent of the Background (continued)

type in the background-clip property:

content-box extends the background only through the element content

padding-box extends the background through the padding space

border-box extends the background through the border space

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Sizing and Clipping an Image

By default, the size of a background image equals the size stored in its image file

This size can be changed by using the following property:

background-size: width height;

where width and height can be specified in pixels or by using the keywords auto, cover, and contain

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Sizing and Clipping an Image (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The background Property

Different background options can be organized using the following property:

background: color url(url) position/size repeat attachment origin clip;

color is the background color

url is the source of the background image

position is the image’s position

size sets the image size

repeat sets the tiling of the image

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The background Property (continued)

attachment specifies whether the image scrolls with the content or is fixed

origin defines how positions are measured on the background

clip specifies the extent over which the background is spread

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Multiple Backgrounds

Multiple backgrounds can be added to a single element by listing the backgrounds in the following comma-separated list:

background: background1, background2, …;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting Border Width and Color

There are several style properties that can be used to format the border around each element using CSS

To define the thickness of a specific border, the following property can be used:

border-side-width: width;

side is either top, right, bottom, or left

width is the width of the border

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Border Design

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The appearance of borders can be further defined by using the following style:

border-side-style: style;

Creating Rounded Corners

Any of the four corners of a border can be rounded off by applying the following property:

border-radius: top-left top-right bottom-right bottom-left;

where top-left, top-right, bottom-right, and bottom-left are the radii of the individual corners

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Rounded Corners (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Rounded Corners (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying a Border Image

A border image is a border based on a graphic image

The graphic image is sliced into nine sections representing the four corners, the four sides, and the interior piece

The content of the object appears in the interior piece and this piece is discarded

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying a Border Image (continued 1)

The four corners become the corners of the border

The four sides are either stretched or tiled to fill in the border’s top, right, bottom, and left sides

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying a Border Image (continued 2)

A border image is applied using the following property:

border-image: url(url) slice repeat;

url indicates the source of the graphic image

slice indicates the width or height of the slice used to create the sides and corners

repeat indicates whether the side slices should be stretched or tiled to cover the four sides of the border

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying a Border Image (continued 3)

The repeat option supports the following values:

stretch: The slices are stretched to fill each side

repeat: The slices are tiled to fill each side

round: When the slices are tiled to fill each side, if they do not fill the sides with an integer number of tiles, the slices are rescaled until they do

space: When the slices are tiled to fill each side, if they do not fill the sides with an integer number of tiles, extra space is distributed around the tiles

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying a Border Image (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Text Shadow

A shadow can be added to a text on a page, to give the text a visual impact, by using the following property:

text-shadow: color offsetX offsetY blur;

color is the shadow color

offsetX and offsetY are the distances of the shadow from the text in the horizontal and vertical directions

blur creates a blurred effect by spreading out a shadow

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Text Shadow (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Box Shadow

Any block element can be shadowed by using the box-shadow property

box-shadow: color offsetX offsetY blur;

where color, offsetX, offsetY, and blur have the same meanings for box shadows as they do for text shadows

Multiple shadows can be added by including them in a comma-separated list

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Box Shadow (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Box Shadow (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying a Color Gradient

Color gradient:

One color gradually blends into another color or fades away if transparent colors are used

It can be used to modify a background color

Linear gradient:

Background colors transition from a starting color to an ending color along a straight line

The default direction is vertical, starting from top and moving to bottom

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying a Color Gradient (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Gradients and Color Stops

The colors specified in a gradient are evenly distributed

The following gradient starts with a solid red, solid green appears halfway through the gradient, and finishes with solid blue:

background: linear-gradient(red, green, blue)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Gradients and Color Stops (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Radial Gradient

Radial gradient:

It is a color gradient that starts from a central point

It proceeds outward in a series of concentric circles or ellipses

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Radial Gradient (continued 1)

Radial gradients are created using the following radial-gradient function:

radial-gradient(shape size at position, color-stop1, color-stop2, …)

shape defines the shape of the gradient

position defines where the gradients radiate from

color-stop1, color-stop2, … specify the colors and their stopping positions

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Radial Gradient (continued 2)

The size value in the radial-gradient function:

defines the extent of the gradient as it radiates outward

can be expressed with a CSS unit of measure

can be expressed as a percentage of the background’s width and height

can also be expressed with one of the following keywords: farthest-corner (the default), farthest-side, closest-corner, and closest-side

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Radial Gradient (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Repeating a Gradient

A gradient design can be repeated to avoid the gradient function from being complicated due to the addition of more color stops

repeating-linear-gradient(params)

repeating-radial-gradient(params)

where params are the parameters of the linear-gradient or the radial-gradient functions

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Semi-Transparent Objects

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Semi-Transparent colors can be created using the opacity property

Transforming Page Objects

Rotation, rescaling, and translation in space can be used to transform the appearance of page objects

transform: effect(params);

effect is the transformation function that will be applied to page objects

params specify the parameters required by the transformation function

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Transforming Page Objects (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Transforming Page Objects (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Transformations in Three Dimensions

A 3D transformation is a change that involves three spatial axes:

an x-axis that runs horizontally across the page

a y-axis that runs vertically

a z-axis that comes straight out of the page toward and away from the viewer

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Transformations in Three Dimensions (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Understanding Perspective

Perspective: A measure of how rapidly objects appear to recede from the viewer in a 3D space

It is used when only one object needs to be transformed in the 3D space

Perspective can be thought in terms of a pair of railroad tracks that appear to converge at a point, known as the vanishing point

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Understanding Perspective (continued 1)

The perspective of a 3D space can be defined using

perspective: value;

value is a positive value that measures the strength of the perspective effect

Lower value results in more extreme distortion

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Understanding Perspective (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring CSS filters

Filters adjust how a browser renders an image, a background, or a border

Filters modify an object’s color, brightness, contrast, or general appearance

Filters were originally introduced as a WebKit browser extension

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring CSS filters (continued 1)

Filters can be applied using the following property:

filter: effect(params);

effect is a filter function

params specify the parameters of filter function

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring CSS filters (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring CSS filters (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Image Maps

When an inline image is marked as a hyperlink, the entire image is linked to the same file

HTML allows an image to be divided into different zones, or hotspots

Hotspots can be linked to different URLs through information given in an image map

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Image Maps (continued)

Image maps supported by HTML:

Client-side image map – Image map defined within a web page and handled entirely by the web browser

Server-side image map – Image map that relies on a program running on the web server to create and administer the map

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining a Client-Side Image Map

Client-side image maps are defined with the following map element:

hotspots

</map>

text is the name of the image map

hotspots are the defined regions within an image that are linked to different URLs

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining a Client-Side Image Map (continued 1)

They can be placed anywhere within the body of a web page

They are not actually displayed by browsers

They are simply used as references for mapping the locations of the hotspots within the image

The most common practice is to place a map element below the corresponding image

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining a Client-Side Image Map (continued 2)

Hotspot within the map element can be defined using the following element:

<area shape=“shape” coords=“coordinates”

href=“url” alt=“text” />

shape is the shape of the hotspot region

coordinates are the list of points that define the boundaries of that region

url is the URL of the hypertext link

text is alternate text displayed for non-graphical browsers

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining a Client-Side Image Map (continued 3)

Circular hotspots are defined using the attributes

shape=“circle” coords=“x, y, radius”

where x and y are the coordinates of the center of the circle and radius is the circle’s radius

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying an Image Map

An image map can be applied to an image using the following usemap attribute to the img element:

where map is the name assigned to the image map within the current HTML file

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition