CH.

INTRODUCTION
6.1
CSS
 CSS Display and Visibility
Hiding an Element - display:none or visibility:hidden
visibility:hidden hides an element, but it will still take up the same space
as before. The element will be hidden, but still affect the layout:
Example
[Link] {
visibility: hidden;
}

display:none hides an element, and it will not take up any space. The
element will be hidden, and the page will be displayed as if the element is
not there:
Example
[Link] {
display: none;
}
 CSS3 Introduction
• CSS3 is the latest standard for CSS.
• CSS3 is completely backwards-compatible with earlier versions of CSS.
 CSS3 Modules
CSS3 has been split into "modules". It contains the "old CSS specification"
(which has been split into smaller pieces). In addition, new modules are added.
Some of the most important CSS3 modules are:
• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface
 CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an
image as a border - without using a design program, like Photoshop.
Border properties:
• border-radius
• box-shadow
• border-image
 CSS3 Rounded Corders
CSS3 Rounded Corners
Example
• #rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
 CSS3 The box-shadow Property
In CSS3, the box-shadow property is used to add shadow to boxes:

div {
box-shadow : 10px 10px 5px #888888;
}
 CSS3 The border-image Property
With the CSS3 border-image property you can use an image to create a border:

div {
-webkit-border-image: url([Link]) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url([Link]) 30 30 round; /* Opera 11-12.1 */
border-image: url([Link]) 30 30 round;
}
 CSS3 Backgrounds
CSS3 contains several new background properties, which allow greater control
of the background element.

Background properties:
• background-size
• background-origin
• You will also learn how to use multiple background images.
 CSS3 The background-size Property
The background-size property specifies the size of the background image.
Before CSS3, the background image size was determined by the actual size of the
image. In CSS3 it is possible to specify the size of the background image, which allows
us to re-use background images in different contexts.
You can specify the size in pixels or in percentages. If you specify the size as a
percentage, the size is relative to the width and height of the parent element.
div {
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}

div {
background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
CSS3 The background-origin Property
The background-origin property specifies the positioning area of the
background images.
The background image can be placed within the content-box, padding-box, or
border-box area.

div {
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}
 CSS3 Multiple Background Images
CSS3 allows you to use several background images for an element.

body {
background: url(img_tree.gif), url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
 CSS3 Gradients
CSS3 gradients let you display smooth transitions between two or more
specified colors.
Earlier, you had to use images for these effects. However, by using CSS3
gradients you can reduce download time and bandwidth usage. In addition,
elements with gradients look better when zoomed, because the gradient is
generated by the browser.

CSS3 defines two types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
 CSS3 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.
Linear Gradient - Top to Bottom (this is default)
The following example shows a linear gradient that starts at the top. It starts
red, transitioning to blue:

#grad {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}
 CSS3 Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
By default, shape is ellipse, size is farthest-corner, and position is center.

#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}
 CSS3 Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The
default value is ellipse.

#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0
*/
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15
*/
background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}
 CSS3 Use of Different Size Keywords
The size parameter defines the size of the gradient. It can take four values:
• closest-side
• farthest-side
• closest-corner
• farthest-corner
Constant Description
closest-side The gradient's ending shape meets the side of the box closest to its center (for
circles) or meets both the vertical and horizontal sides closest to the center (for
ellipses).
closest-corner The gradient's ending shape is sized so it exactly meets the closest corner of
the box from its center.
farthest-side Similar to closest-side, except the ending shape is sized to meet the side of the
box farthest from its center (or vertical and horizontal sides).
farthest-corner The gradient's ending shape is sized so it exactly meets the farthest corner of
the box from its center.
CSS3 Use of Different Size Keywords (cont.)

#grad1 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
}
CSS3 Use of Different Size Keywords (cont.)

#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-
side,blue,green,yellow,black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);
}
 CSS3 Transforms
CSS3 transforms allow you to translate, rotate, scale, and skew elements.
A transformation is an effect that lets an element change shape, size and
position.
CSS3 supports 2D and 3D transformations.
 CSS3 3D Transforms
CSS3 allows you to format your elements using 3D transformations.
Click on the elements below to see the difference between a 2D transformation
and a 3D transformation
 CSS3 Transitions
With CSS3, we can add an effect when changing from one style to another,
without using Flash or JavaScript.
 CSS Transition Properties
The following table lists all the transition properties

Property Description CSS

transition A shorthand property for setting the four transition 3
properties into a single property
transition-delay Specifies when the transition effect will start 3
transition-duration Specifies how many seconds or milliseconds a 3
transition effect takes to complete
transition-property Specifies the name of the CSS property the transition 3
effect is for
transition-timing- Specifies the speed curve of the transition effect 3
function
 CSS3 Animations
CSS3 animations can replace animations created by Flash and JavaScript in
existing web pages
 CSS3 Animations
When an animation is created in the @keyframe rule, you must bind it to a
selector, otherwise the animation will have no effect.
Bind the animation to a selector (element) by specifying at least these two
properties:
• the name of the animation
• the duration of the animation
 What Are CSS3 Animations?
• An animation lets an element gradually change from one style to another.
• You can change as many properties you want, as many times you want.
• You can specify when the change will happen in percent, or you can use the
keywords "from" and "to" (which represents 0% and 100%).
• 0% represents the start of the animation, 100% is when the animation is
complete.
 CSS3 Animations Properties
Property Description CSS
@keyframes Specifies the animation 3
animation A shorthand property for setting all the animation properties, 3
except the animation-play-state and the animation-fill-mode
property
animation-delay Specifies when the animation will start 3
animation-direction Specifies whether or not the animation should play in reverse on 3
alternate cycles
animation-duration Specifies how many seconds or milliseconds an animation takes to 3
complete one cycle
animation-fill-mode Specifies what styles will apply for the element when the 3
animation is not playing (when it is finished, or when it has a
"delay")
animation-iteration-count Specifies the number of times an animation should be played 3
animation-name Specifies the name of the @keyframes animation 3
animation-play-state Specifies whether the animation is running or paused 3
animation-timing-function Specifies the speed curve of the animation 3
CHAPTER 7
Responsive Web
And Media Queries
 CSS3 Responsive Web Design
Responsive web design provides an optimal experience, easy reading
and easy navigation with a minimum of resizing on different devices such
as desktops, mobiles, and tabs).
Designing For The Best Experience For All Users

Web pages can be viewed using many different devices: desktops,

tablets, and phones. Your web page should look good, and be easy
to use, regardless of the device.
 RWD- The ViewPort

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a

mobile phone than on a computer screen.

Setting the Viewport:

You should include the following <meta> viewport element in all

your web pages:

<meta name="viewport" content="width=device-width, initial-

scale=1.0">
 RWD – Grid-View

Many web pages are based on a grid-view, which means that the
page is divided into columns:

Using a grid-view is very helpful when designing web pages. It

makes it easier to place elements on the page.

A responsive grid-view often has 12 columns, and has a total

width of 100%, and will shrink and expand as you resize the
browser window.
 Building a Responsive Grid-View

To use a responsive grid-view with 12 columns, we must

calculate the percentage for one column: 100% / 12 columns =
8.33%.

Then we make one class for each of the 12 columns,

class="col-" and a number defining how many columns the
section should span:
 RWD – Media Queries

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties

only if a certain condition is true.

If the browser window is 600px or smaller, the background color

will be lightblue:

@media only screen and (max-width: 600px) {

body {
background-color: lightblue;
}
}
 RWD – Media Queries

Add a Breakpoint

In media queries, we can add a breakpoint where certain parts

of the design will behave differently on each side of the
breakpoint.

Use a media query to add a breakpoint at 768px

 RWD – Media Queries

Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending

on the orientation of the browser.

Example:

The web page will have a lightblue background if the orientation is in

landscape mode:

@media only screen and (orientation: landscape) {

body {
background-color: lightblue;
}
}
 RWD – Media Queries

Hide Elements With Media Queries

Another common use of media queries, is to hide elements on different

screen sizes:

Example:

/* If the screen size is 600px wide or less, hide the element */

@media only screen and (max-width: 600px) {
[Link] {
display: none;
}
}
 RWD – Media Queries
Change Font Size With Media Queries

Example:

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
[Link] {
font-size: 80px;
}
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
[Link] {
font-size: 30px;
}
}
 RWD – Images

Create Responsive Images

Add HTML:

<img src="[Link]" alt="Nature" class="responsive">

Add CSS:

If you want the image to scale both up and down on

responsiveness, set the CSS width property to 100% and height to
auto:

.responsive {
width: 100%;
height: auto;
}
 RWD – Images

If you want an image to scale down if it has to, but never scale
up to be larger than its original size, use max-width: 100%:

.responsive {
max-width: 100%;
height: auto;
}
 RWD – Images

If you want to restrict a responsive image to a maximum size,

use the max-width property, with a pixel value of your choice:

.responsive {
width: 100%;
max-width: 400px;
height: auto;
}
 RWD – Videos

Using The width Property

If the width property is set to 100%, the video player will be

responsive and scale up and down:

video {
width: 100%;
height: auto;
}
 RWD – Videos

Using The max-width Property

If the max-width property is set to 100%, the video player will

scale down if it has to, but never scale up to be larger than its
original size:

video {
max-width: 100%;
height: auto;
}
 RWD – Videos

Add a Video to the Example Web Page

We want to add a video in our example web page. The video will
be resized to always take up all the available space:

video {
width: 100%;
height: auto;
}