UNIT III ADVANCED UI WITH CSS3

Layouts with CSS Grids Flexbox– Responsive web design with media queries - Advanced
CSS Effects – Gradients, opacity, box-shadow - CSS3 Animations: Transforms and
Transitions – CSS Frameworks: Bootstrap

WEBSITE LAYOUT

A website is often divided into headers, menus, content and a footer:

Header

Navigation Menu

Content Content Content

Footer

There are tons of different layout designs to choose from. However, the
structure above, is one of the most common.

Header

A header is usually located at the top of the website (or right below a top
navigation menu). It often contains a logo or the website name:

Example

.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

1
Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your
website:

Example

/* The navbar container */

.topnav {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Links - change color on hover */

.topnav a:hover {
background-color: #ddd;
color: black;
}

Content

The layout in this section, often depends on the target users. The most common
layout is one (or combining them) of the following:

 1-column (often used for mobile browsers)

 2-column (often used for tablets and laptops)
 3-column layout (only used for desktops)
 * Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}

/* Clear floats after the columns */

.row:after {

2
 content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the three columns stack on top of each

other instead of next to each other on smaller screens (600px wide
or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

Content Section: The content section is the main body of the website. The
user can divide content section in n-column layout.
The most common layouts are:
 1-Column Layout: It is mostly used for mobile layout.

 2-Column Layout: This website layout is mostly used for tablets or laptops.

3
 3-Column Layout: This website layout is mostly used for desktops.

Footer

The footer is placed at the bottom of your page. It often contains information like
copyright and contact info:

Example

.footer {

background-color: #F1F1F1;

text-align: center;

4
 padding: 10px;

CSS page layout techniques allow us to take elements contained in a web page and
control where they're positioned relative to the following factors: their default position
in normal layout flow, the other elements around them, their parent container, and the
main viewport/window. The page layout techniques we'll be covering in more detail in
this module are:

 Normal flow
 The display property
 Flexbox
 Grid
 Floats
 Positioning
 Table layout
 Multiple-column layout

Each technique has its uses, advantages, and disadvantages. No technique is designed
to be used in isolation. By understanding what each layout method is designed for you'll
be in a good position to understand which method is most appropriate for each task.

CSS Flexbox
Before the Flexbox Layout module, there were four layout modes:

 Block, for sections in a webpage

 Inline, for text
 Table, for two-dimensional table data
 Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout
structure without using float or positioning.

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

5
Example

A flex container with three flex items:

<div class="flex-container">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

CSS Flex Container

Parent Element (Container)

Like we specified in the previous chapter, this is a flex container (the blue
area) with three flex items:

The flex container becomes flexible by setting the display property to flex:

Example

.flex-container {
display: flex;
}

The flex container properties are:

 flex-direction
 flex-wrap
 flex-flow
 justify-content
 align-items
 align-content

6
The CSS Flexbox Container Properties

The following table lists all the CSS Flexbox Container properties:

Property Description

align-content Modifies the behavior of the flex-wrap property. It is similar

to align-items, but instead of aligning flex items, it aligns flex
lines

align-items Vertically aligns the flex items when the items do not use all
available space on the cross-axis

display Specifies the type of box used for an HTML element

flex-direction Specifies the direction of the flexible items inside a flex

container

flex-flow A shorthand property for flex-direction and flex-wrap

flex-wrap Specifies whether the flex items should wrap or not, if there
is not enough room for them on one flex line

justify-content Horizontally aligns the flex items wh

7
The flex-direction Property

The flex-direction property defines in which direction the container wants to

stack the flex items.

.flex-container {
display: flex;
flex-direction: column; /

flex-direction: column-reverse;/

flex-direction: row;/

flex-direction: row-reverse;
}

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.

Example

.flex-container {
display: flex;
flex-wrap: wrap;/

flex-wrap: nowrap;/

flex-wrap: wrap-reverse;/

}
}

The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-
direction and flex-wrap properties.

.flex-container {
display: flex;
flex-flow: row wrap;
}

The justify-content Property

8
The justify-content property is used to align the flex items:

Example

The center value aligns the flex items at the center of the container:

.flex-container {
display: flex;
justify-content: center;/
justify-content: flex-start;/
justify-content: flex-end;/
justify-content: space-around;/
justify-content: space-between;

The align-items Property

The align-items property is used to align the flex items.

Example

The center value aligns the flex items in the middle of the container:

.flex-container {
display: flex;
height: 200px;
align-items: center;/
align-items: flex-start;/
align-items: flex-end;/
align-items: stretch;/
align-items: baseline;

The align-content Property

The align-content property is used to align the flex lines.

9
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;/

align-content: space-around;/

align-content: stretch;/

align-content: center;/

align-content: flex-start;/

align-content: flex-end;
}

CSS GRID LAYOUT

The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web pages without having to use floats and
positioning.

Grid Elements

A grid layout consists of a parent element, with one or more child elements.

Display Property

An HTML element becomes a grid container when its display property is set
to grid or inline-grid.

Example

.grid-container {
display: grid;
}

Example
.grid-container {
display: inline-grid;
}

can adjust the gap size by using one of the following properties:

10
  column-gap
 row-gap
 gap

Example
The column-gap property sets the gap between the columns:

.grid-container {
display: grid;
column-gap: 50px;
}

Example
The row-gap property sets the gap between the rows:

.grid-container {
display: grid;
row-gap: 50px;
}

Example
The gap property is a shorthand property for the row-gap and the column-
gap properties:

.grid-container {
display: grid;
gap: 50px 100px;
}

Example
The gap property can also be used to set both the row gap and the column gap
in one value:

.grid-container {
display: grid;
gap: 50px;
}

11
Grid Lines
The lines between columns are called column lines.

The lines between rows are called row lines.

Example
Place a grid item at column line 1, and let it end on column line 3:

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}

Example
Place a grid item at row line 1, and let it end on row line 3:

.item1 {
grid-row-start: 1;
grid-row-end: 3;
}

CSS Grid Properties

Property Description

column-gap Specifies the gap between the columns

gap A shorthand property for the row-gap and

the column-gap properties

12
grid A shorthand property for the grid-template-rows,
grid-template-columns, grid-template-areas, grid-
auto-rows, grid-auto-columns, and the grid-auto-
flow properties

grid-area Either specifies a name for the grid item, or this

property is a shorthand property for the grid-row-
start, grid-column-start, grid-row-end, and grid-
column-end properties

grid-auto-columns Specifies a default column size

grid-auto-flow Specifies how auto-placed items are inserted in the

grid

grid-auto-rows Specifies a default row size

grid-column A shorthand property for the grid-column-start and

the grid-column-end properties

grid-column-end Specifies where to end the grid item

grid-column-gap Specifies the size of the gap between columns

grid-column-start Specifies where to start the grid item

13
grid-gap A shorthand property for the grid-row-gap and grid-
column-gap properties

grid-row A shorthand property for the grid-row-start and

the grid-row-end properties

grid-row-end Specifies where to end the grid item

grid-row-gap Specifies the size of the gap between rows

grid-row-start Specifies where to start the grid item

grid-template A shorthand property for the grid-template-

rows, grid-template-columns and grid-
areas properties

grid-template-areas Specifies how to display columns and rows, using

named grid items

grid-template-columns Specifies the size of the columns, and how many

columns in a grid layout

grid-template-rows Specifies the size of the rows in a grid layout

14
 row-gap Specifies the gap between the grid rows

Responsive Web Design - Media Queries

Media query is a CSS technique introduced in CSS3.

The @media rule is used in media queries to apply different styles for different
media types/devices.

Media queries can be used to check many things, such as:

 width and height of the viewport

 width and height of the device
 orientation (is the tablet/phone in landscape or portrait mode?)
 resolution

It uses the @media rule to include a block of CSS properties only if a certain
condition is true.

Example
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;
}
}

Using media queries are a popular technique for delivering a tailored style sheet
(responsive web design) to desktops, laptops, tablets, and mobile phones.

Use media queries to specify that certain styles are only for printed documents
or for screen readers (mediatype: print, screen, or speech).

15
CSS Syntax

@media not|only mediatype and (mediafeature and|or|not mediafeature) {

CSS-Code;
}

not: The not keyword inverts the meaning of an entire media query.

only: The only keyword prevents older browsers that do not support media
queries with media features from applying the specified styles. It has no effect
on modern browsers.

and: The and keyword combines a media feature with a media type or other
media features.

They are all optional. However, if you use not or only, you must also specify a
media type.

Advantages:

1. Add a Break point

 We can add a breakpoint where certain parts of the design will behave
differently on each side of the breakpoint.


Desktop


 Phone

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

16
 /* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}

 Use a media query to add a breakpoint at 768px:

2. Always Design for Mobile First

Mobile First means designing for mobile before designing for desktop or any
other device (This will make the page display faster on smaller devices).

This means that we must make some changes in our CSS.

Instead of changing styles when the width gets smaller than 768px, we should
change the design when the width gets larger than 768px. This will make our
design Mobile First:

Example
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}

@media only screen and (min-width: 768px) {

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}

3. Provides typical Device Breakpoints

There are tons of screens and devices with different heights and widths, so it is
hard to create an exact breakpoint for each device. To keep things simple you
could target five groups:

Example
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
17
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

4. Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the
orientation of the browser.

You can have a set of CSS properties that will only apply when the browser
window is wider than its height, a so called "Landscape" orientation:

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;
}
}

5. Hide Elements With Media Queries

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

sizes:

I will be hidden on small screens.

Example
/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
div.example {
display: none;

18
 }
}

6. Change Font Size With Media Queries

You can also use media queries to change the font size of an element on
different screen sizes:

Example
/* If the screen size is 601px or more, set the font-size of <div> to 80px
*/
@media only screen and (min-width: 601px) {
div.example {
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) {
div.example {
font-size: 30px;
}
}

ADVANCED CSS EFFECTS

CSS Gradients

 We can normally declare the background of an element to be a solid color

in CSS, but we can also declare that background to be a gradient.

 Using gradients declared in CSS, rather using an actual image file, is

better for control and performance.

 Gradients are typically one color that fades into another, but in CSS we
can control every aspect of how that happens, from the direction to the
colors (as many as you want) to where those color changes happen.

 CSS gradients let you display smooth transitions between two or more
specified colors.

19
 Gradients are background-image

While declaring the solid color uses background-color property in CSS,

gradients use background-image.

.gradient {

background-color: red;

background-image: linear-gradient(red, orange);

background: red;

background: linear-gradient(red, orange);

CSS defines three types of gradients:

 Linear Gradients (goes down/up/left/right/diagonally)

 Radial Gradients (defined by their center)
 Conic Gradients (rotated around a center point)

1. CSS 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-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Example

#grad {

background-image: linear-gradient(red, yellow);

Direction - Top to Bottom (this is default)

Direction - Left to Right

Direction – Diagonal

20
Using Angles

If we want more control over the direction of the gradient, we can define an
angle, instead of the predefined directions (to bottom, to top, to right, to left, to
bottom right, etc.).

A value of 0deg is equivalent to "to top". A value of 90deg is equivalent to "to

right". A value of 180deg is equivalent to "to bottom".

Syntax

background-image: linear-gradient(angle, color-stop1, color-stop2);

Example

#grad {

background-image: linear-gradient(180deg, red, yellow);

Example

#grad {
background-image: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
}

Using Transparency

CSS gradients also support transparency, which can be used to create fading
effects.

To add transparency, we use the rgba() function to define the color stops.

The last parameter in the rgba() function can be a value from 0 to 1, and it
defines the transparency of the color: 0 indicates full transparency, 1 indicates
full color (no transparency).

Example

#grad {

background-image: linear-gradient(to right, rgba(255,0,0,0),

rgba(255,0,0,1));

21
}

Repeating a linear-gradient

The repeating-linear-gradient() function is used to repeat linear gradients:

Example

A repeating linear gradient:

#grad {

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

2.CSS 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-image: radial-gradient(shape size at position, start-color,
..., last-color);

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

Radial Gradient - Evenly Spaced Color Stops (this is default)

The following example shows a radial gradient with evenly spaced color stops:

Examples

#grad {
background-image: radial-gradient(red, yellow, green);
}

#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

22
Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse.
The default value is ellipse.

Example

#grad {

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

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

Example

A radial gradient with different size keywords:

#grad1 {

background-image: radial-gradient(closest-side at 60% 55%, red, yellow,

black);

#grad2 {

background-image: radial-gradient(farthest-side at 60% 55%, red, yellow,

black);

Repeating a radial-gradient

The repeating-radial-gradient() function is used to repeat radial gradients:

23
Example

A repeating radial gradient:

#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green
15%);
}

3.CSS Conic Gradients

A conic gradient is a gradient with color transitions rotated around a center

point.

To create a conic gradient you must define at least two colors.

Syntax

background-image: conic-gradient([from angle]

[at position,] color [degree], color [degree], ...);

By default, angle is 0deg and position is center.

If no degree is specified, the colors will be spread equally around the center
point

Example

A conic gradient with three colors:

#grad {

background-image: conic-gradient(red, yellow, green);

A conic gradient with five colors:

#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}

A conic gradient with three colors and a degree for each color:

24
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

Create Pie Charts

Add border-radius: 50% to make the conic gradient look like a pie:
Example
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}

Repeating a Conic Gradient

The repeating-conic-gradient() function is used to repeat conic gradients:

Example

A repeating conic gradient:

#grad {

background-image: repeating-conic-gradient(red 10%, yellow 20%);

border-radius: 50%;

A repeating conic gradient with defined color-starts and color-stops:

#grad {

background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg

20deg, blue 20deg 30deg);

border-radius: 50%;

25
CSS Gradient Functions

The following table lists the CSS gradient functions:

Function Description

conic-gradient() Creates a conic gradient. Define at least two

colors (around a center point)

linear-gradient() Creates a linear gradient. Define at least two

colors (top to bottom)

radial-gradient() Creates a radial gradient. Define at least two

colors (center to edges)

repeating-conic-gradient() Repeats a conic gradient

repeating-linear-gradient() Repeats a linear gradient

repeating-radial-gradient() Repeats a radial gradient

26
 CSS Shadow Effects
 With CSS we can add shadow to text and to elements.

 It includes text-shadow and box-shadow

 CSS Text Shadow property applies shadow to text.

Example

h1 {

text-shadow: 2px 2px;

Next, add a color to the shadow:

Example

h1 {

text-shadow: 2px 2px red;

Then, add a blur effect to the shadow:

Example

h1 {

text-shadow: 2px 2px 5px red;

The following example shows a white text with black shadow:

Text shadow effect!

Example

27
h1 {

color: white;

text-shadow: 2px 2px 4px #000000;

The following example shows a red neon glow shadow:

Text shadow effect!

Example

h1 {

text-shadow: 0 0 3px #FF0000;

Multiple Shadows

To add more than one shadow to the text, you can add a comma-separated
list of shadows.

The following example shows a red and blue neon glow shadow:

Example

h1 {

text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

h1 {

color: white;

text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

h1 {

28
 color: coral;

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

CSS box-shadow Property

The CSS box-shadow property is used to apply one or more shadows to an

element.

Specify a Horizontal and a Vertical Shadow

In its simplest use, only specify a horizontal and a vertical shadow. The default
color of the shadow is the current text-color.

A <div> element with a box-shadow

Example

Specify a horizontal and a vertical shadow:

div {

box-shadow: 10px 10px;

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

padding: 15px;

29
 background-color: coral;

box-shadow: 10px 10px;

</style>

</head>

<body>

<h1>The box-shadow Property</h1>

<div>This is a div element with a box-shadow</div>

</body>

</html>

Specify a color for the shadow:

div {

box-shadow: 10px 10px lightblue;

Add a blur effect to the shadow:

div {

box-shadow: 10px 10px 5px lightblue;

Set the Spread Radius of the Shadow

The spread parameter defines the spread radius. A positive value increases
the size of the shadow, a negative value decreases the size of the shadow.

A <div> element with a blurred, lightblue box-shadow, with a spread radius

of 12px

30
Example

Set the spread radius of the shadow:

div {

box-shadow: 10px 10px 5px 12px lightblue;

Set the inset Parameter

The inset parameter changes the shadow from an outer shadow (outset) to
an inner shadow.

A <div> element with a blurred, lightblue, inset box-shadow

Example

Add the inset parameter:

div {

box-shadow: 10px 10px 5px lightblue inset;

Add Multiple Shadows

An element can also have multiple shadows:

Example

div {

box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;

Cards

We can also use the box-shadow property to create paper-like cards:

31
Example

div.card {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,

0.19);

text-align: center;

CSS Shadow Properties

Property Description

box-shadow Adds one or more shadows to an

element

text-shadow Adds one or more shadows to a text

CSS opacity Property

 The opacity property sets the opacity level for an element.

 The opacity-level describes the transparency-level, where 1 is not

transparent at all, 0.5 is 50% see-through, and 0 is completely
transparent.

Example

Set the opacity level for a <div> element:

div {

opacity: 0.5; }

32
  When using the opacity property to add transparency to the
background of an element, all of its child elements become transparent
as well.
 This can make the text inside a fully transparent element hard to read.
 If we do not want to apply opacity to child elements, use RGBA color
values instead

CSS Syntax

opacity: number|initial|inherit;

Property Values

Value Description

number Specifies the opacity. From 0.0 (fully transparent) to

1.0 (fully opaque)

initial Sets this property to its default value. Read

about initial

inherit Inherits this property from its parent element.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: #4CAF50;

33
 padding: 10px;

div.first {

opacity: 0.1;

div.second {

opacity: 0.3;

div.third {

opacity: 0.6;

</style>

</head>

<body>

<h1>The opacity Property</h1>

<p> welcome</p>

<div class="first"><p>opacity 0.1</p></div>

<div class="second"><p>opacity 0.3</p></div>

<div class="third"><p>opacity 0.6</p></div>

<div><p>opacity 1 (default)</p></div>

</body>

</html>

34
 CSS Animations

 CSS allows animation of HTML elements without using JavaScript or

Flash!

 An animation lets an element gradually change from one style to another.

 We can change as many CSS properties we want, as many times as we

want.

 To use CSS animation, need must first specify some keyframes for the
animation.

 Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

When we specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.

To get an animation to work, we must bind the animation to an element.

The following example binds the "example" animation to the <div> element.
The animation will last for 4 seconds, and it will gradually change the
background-color of the <div> element from "red" to "yellow":

Example

/* The animation code */

@keyframes example {

from {background-color: red;}

to {background-color: yellow;}

/* The element to apply the animation to */

div {

35
 width: 100px;

height: 100px;

background-color: red;

animation-name: example;

animation-duration: 4s;

EXAMPLE:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

animation-name: example;

animation-duration: 4s;

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

36
 50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its

original style.</p>

</body>

</html>

Delay an Animation by

div {

width: 100px;

height: 100px;

position: relative;

background-color: red;

animation-name: example;

animation-duration: 4s;

animation-delay: 2s;

37
}

Set How Many Times an Animation Should Run

The animation-iteration-count property specifies the number of times an

animation should run.

The following example will run the animation 3 times before it stops:

Example

div {

width: 100px;

height: 100px;

position: relative;

background-color: red;

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

Run Animation in Reverse Direction or Alternate Cycles

The animation-direction property specifies whether an animation should be

played forwards, backwards or in alternate cycles.

The animation-direction property can have the following values:

normal - The animation is played as normal (forwards). This is default

reverse - The animation is played in reverse direction (backwards)

alternate - The animation is played forwards first, then backwards

alternate-reverse - The animation is played backwards first, then forwards

38
div {

width: 100px;

height: 100px;

position: relative;

background-color: red;

animation-name: example;

animation-duration: 4s;

animation-direction: reverse/ alternate/ alternate-reverse;

CSS-Transform

The transform property allows you to visually manipulate an element by

skewing, rotating, translating, or scaling:

.element {

width: 20px;

height: 20px;

transform: scale(20);

.element {

transform: scale(2, .5);

} (or)

transform: scaleX(2);

transform: scaleY(.5);

39
Values
 scale(): Affects the size of the element. This also applies to
the font-size, padding, height, and width of an element, too. It’s
also a a shorthand function for the scaleX and scaleY functions.
 skewX() and skewY(): Tilts an element to the left or right, like
turning a rectangle into a parallelogram. skew() is a shorthand that
combines skewX() and skewY by accepting both values.
 translate(): Moves an element sideways or up and down.
 rotate(): Rotates the element clockwise from its current position.
 matrix(): A function that is probably not intended to be written by
hand, but combines all transforms into one.
 perspective(): Doesn’t affect the element itself, but affects the
transforms of descendent elements’ 3D transforms, allowing them
all to have a consistent depth perspective.
Skew
/* Skew points along the x-axis */
.element {
transform: skewX(25deg);
}

/* Skew point along the y-axis */

.element {
transform: skewY(25deg);
}

/* Skew points along the x- and y-axis */

.element {
transform: skew(25deg, 25deg);
}

40
 The skewX and skewY transform functions tilt an element one way
or the other.

Rotate

.element {
transform: rotate(25deg);
}
This rotates an element clockwise from its original position, whilst a
negative value would rotate it in the opposite direction

Translate

.element {

transform: translate(20px, 10px);

This transform function moves an element sideways, or up and down

These values would be any length value, like 10px or 2.4em. One value will
move the element to the right (negative values to the left). If a second value
is provided, that second value will move it down (negative values up).

transform: translateX(value);

transform: translateY(value);

Multiple values

With a space-separated list we can add multiple values to the transform

property:

.element {

width: 20px;

height: 20px;

transform: scale(20) skew(-20deg);

41
}

Matrix

The matrix transform function can be used to combine all transforms into
one.

It’s a bit like transform shorthand.

The Matrix Resolutions, which can convert a group of transforms into a

single matrix declaration.

For the curious, this:

rotate(45deg) translate(24px, 25px)

can also be represented as:

matrix(0.7071067811865475, 0.7071067811865476, -
0.7071067811865476, 0.7071

3D Transforms

translate3d(x, y, z)

translateZ(z)

The third value in translate3d or the value in translateZ moves the element
toward the viewer, negative values away.

scale3d(sx, sy, sz)

scaleZ(sz)

The third value in scale3d or the value in scaleZ affects the scaling along the
z-axis (e.g. the imaginary line coming straight out of the screen).

rotateX(value)

rotateY(value)

rotate3d(x, y, z)

42
rotateX and rotateY will rotate an element in 3D space around those axises.
rotate3d allows us to specify a point in 3D space in which to rotate the
element around.

matrix3d(…)

A way to programmatically describe a 3D transform in a 4×4 grid. Nobody

will ever hand write one of these, ever.

perspective(value)

This value doesn’t affect the element itself, but it affects the transforms of
descendent elements’ 3D transforms, allowing them to all have a consistent
depth perspective.

CSS Transitions

CSS transitions allows us to change property values smoothly, over a given

duration.

Properties are:

 transition
 transition-delay
 transition-duration
 transition-property
 transition-timing-function

How to Use CSS Transitions?

To create a transition effect, we must specify two things:

1. the CSS property we want to add an effect to

2. the duration of the effect

If the duration part is not specified, the transition will have no effect, because
the default value is 0.

Example

div {
width: 100px;
height: 100px;
background: red;

43
 transition: width 2s;
}

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the

transition effect.

The transition-timing-function property can have the following values:

ease - specifies a transition effect with a slow start, then fast, then end
slowly (this is default)

linear - specifies a transition effect with the same speed from start to end

ease-in - specifies a transition effect with a slow start

ease-out - specifies a transition effect with a slow end

ease-in-out - specifies a transition effect with a slow start and end

cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier

function

The following example shows some of the different speed curves that can be
used:

Example

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the transition
effect.

44
The following example has a 1 second delay before starting:

Example

div {

transition-delay: 1s;

Transition + Transformation

The following example adds a transition effect to the transformation:

Example

div {
transition: width 2s, height 2s, transform 2s;
}

Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from
prototype to production—in minutes.

1.Create a new index.html file in your project root. Include the <meta
name="viewport"> tag as well for proper responsive behavior in mobile
devices.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

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

<title>Bootstrap demo</title>

</head>

<body>

45
 <h1>Hello, world!</h1>

</body>

</html>

2. Include Bootstrap’s CSS and JS. Place the <link> tag in the <head> for
our CSS, and the <script> tag for our JavaScript bundle (including Popper
for positioning dropdowns, poppers, and tooltips) before the closing
</body>.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

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

<title>Bootstrap demo</title>

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.
css" rel="stylesheet" integrity="sha384-
rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F
9CUG65" crossorigin="anonymous">

</head>

<body>

<h1>Hello, world!</h1>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.
min.js" integrity="sha384-
kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I
4" crossorigin="anonymous"></script>

</body></html>

3. Hello, world! Open the page in your browser of choice to see Bootstrapped page.

46