Web Design

CSS3 Gradients
- The CSS3 gradient feature allows to create a gradient from one
color to another without using any images.
- Gradients are available in two styles: linear and radial.

2
CSS3 Linear Gradients
- Description: The linear gradient goes up/down/left/right and
diagonally.
- Property Name: background: linear-gradient(direction, color1,
color2, ...);

background: linear-gradient(to top, red, yellow);

background: linear-gradient(to bottom, #900, yellow);
background: linear-gradient(to left, rgb(255,0,0),
yellow);
background: linear-gradient(to right, red, yellow);
background: linear-gradient(red, yellow);
➔to bottom is the default direction

3
CSS3 Linear Gradients
- Using Vendor Prefixes:
- Example 1 (left to right gradient):

background: -webkit-linear-gradient(left, red, green);

background: -o-linear-gradient(right, red, green);
background: -moz-linear-gradient(right, red, green);
background: linear-gradient(to right, red , green);

4
CSS3 Linear Gradients
- Using Vendor Prefixes:
- Example 2 (bottom to top gradient):

background: -webkit-linear-gradient(bottom, red, green);

background: -o-linear-gradient(top, red, green);
background: -moz-linear-gradient(top, red, green);
background: linear-gradient(to top, red , green);

5
CSS3 Linear Gradients
- Diagonal Linear Gradient

background: linear-gradient(to top right, red, yellow);

background: linear-gradient(to top left, #900, yellow);
background: linear-gradient(to bottom right, red, yellow);
background: linear-gradient(to bottom left, red, yellow);

6
CSS3 Linear Gradients
- Using Vendor Prefixes:
- Example (to bottom right gradient):

background: -webkit-linear-gradient(left top, red , green);

background: -o-linear-gradient(bottom right, red, green);
background: -moz-linear-gradient(bottom right, red, green);
background: linear-gradient(to bottom right, red , green);

7
CSS3 Linear Gradients
- Setting Direction of Linear Gradients Using Angles

#div1{background: linear-gradient(90deg, red, yellow);}

#div2{background: linear-gradient(50deg, #900, yellow);}
#div3{background: linear-gradient(-30deg, red, yellow);}

8
CSS3 Radial Gradients
- Description: In a radial gradient color emerge from a single point
and smoothly spread outward in a circular or elliptical shape.
- Property Name:
background: radial-gradient(shape, color1, color2, ...);
- Example:
background: radial-gradient(circle, red, yellow, green);
background: radial-gradient(ellipse, red, yellow, green);

9
CSS3 Shadows
- The CSS3 gives the ability to drop shadow effects to the elements
like in Photoshop without using any images.
- box-shadow : used to add shadow to the element's boxes.
- Property Name:
box-shadow: offset-x offset-y blur color;
offset-x ➔Sets the horizontal offset of the shadow.
offset-y ➔Sets the vertical offset of the shadow.
blur ➔Sets the blur radius.
color ➔Sets the color of the shadow.
- Example:
box-shadow: 5px 5px 10px #000;
width: 200px;
height: 150px;
background: #900; 10
CSS3 Shadows
- Example
box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
width: 200px;
height: 150px;
background: red;

- Example
box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
width: 200px;
height: 150px;
background: red;

11
CSS3 text-shadow
- Description: used to add shadow to the text.
- Property Name:
text-shadow: offset-x offset-y blur color;

h1 {
text-shadow: 5px 5px 10px #666;
}
h2 {
text-shadow: 5px 5px 10px red,
10px 10px 20px yellow;
}

12
CSS3 Transition
- These transition properties allow elements to change values over
a specified duration, animating the property changes, rather
than having them occur immediately.

13
transition-duration
- Description: Used to define the duration of a specified transition;
the length of time it will take for the targeted to transition
between two defined states.
- Property:
transition-duration: time in seconds (s) or milliseconds (ms)
- Default Value: transition-duration: 0s;

div { width:300px; height:300px;

background-color:#900;
transition-duration: 2s;}
div:hover {
width:200px; height:200px;}

14
transition-duration
- Using the transition-duration will case all the changed CSS
properties to be affected (affects the width and the height).
- To target one specific CSS property the “transition-property”
property must be used.

15
transition-property
- Description: Used to define the CSS property, or properties, to
apply a transition effect to, when a user hover over an element
- Property:
transition-property: none | all | CSS Property
- Default Value: transition-property: all

div { width:300px; height:300px;

background-color:#900;
transition-duration: 2s; transition-property: width;}
div:hover {
width:200px; height:200px;}

16
transition-property
- Using the transition-property will cause the transition effect to
affect the CSS width property only, but the CSS height property
will change without any transitions effects.

17
transition-timing-function
- Description: used to define a function that describes how a
transition will proceed over its duration.
- Property: transition-timing-function: ease | linear | ease-in | ease-
out | ease-in-out
- Default Value: transition-timing-function: ease

18
transition-timing-function
- Values:
- Linear: The Transition takes the same speed from start to end.
- ease: The Transition starts slowly, then fast, then end slowly.
- ease-in: The Transition starts slowly, then progressively
accelerates until the final state.
- ease-out: starts quickly then slow progressively down to its final
state.
- ease-in-out: starts slowly, then accelerates, then slows down to
final state.
- cubic-bezier(n,n,n,n):Defines a cubic Bezier curve custom timing
function, Possible values are numeric values from 0 to 1. (see:
www.cubic-bezier.com).

19
transition-timing-function

div { width:300px; height:300px;

background-color:#900;
transition-duration: 1s; ➔duration is one second
transition-property: all; ➔transition applied for all
properties
transition-timing-function: linear;
}
div:hover {
width:200px; height:200px;}

20
transition-delay
- Description: Used to define a length of time to delay the start of a
transition.
- Property:
transition-delay: time in seconds (s)or milliseconds (ms)
- Default Value: transition-delay: 0s

div { width:300px; height:300px; background-color:#900;

transition-duration: 1s; transition-property: all;
transition-timing-function: ease-in-out;
transition-delay: 1s;}
div:hover {
width:200px; height:200px;}

21
transition shorthand property
- Description: Used as a shorthand for “transition-property”,
“transition-duration”, “transition-timing-function” and
“transition-delay” properties.
- Property: transition: transition-property duration timing-
function delay;
- Default Value: transition: all 0s ease 0s
div { width:300px; height:300px; background-color:#900;
transition: all 0.7s ease-in-out 100ms; }
div:hover {
width:200px; height:200px;}

22
transition shorthand property
- Example transition for 2 or more properties:

div { width:300px; height:300px; background-color:#900;

transition: width 0.7s ease-in-out 100ms,
height 0.2s ease 80ms;
}
div:hover {
width:200px; height:200px;}

23
CSS3 Filters
- used to perform visual effect operations like blur, balancing
contrast or brightness, color saturation etc. on graphical
elements like an image before it is drawn onto the web page.

24
Filter Property
- Description: performs visual effect operations on a graphical
elements like an image before it is drawn onto the web page.
- Property:
filter: none | blur(px) | brightness(%) | contrast(%) | grayscale(%) |
drop-shadow() | hue-rotate(deg) | invert(%) | opacity(%) |
sepia(%) |
saturate(%)
- Default value: filter: none;

img {
filter: blur(5px);
}

25
Filter Property
img {
filter: brightness(50%);
}

img {
filter: contrast(50%);
}

img {
filter: grayscale(100%);
}

26
Filter Property
img {
filter: hue-rotate(150deg);
}

img {
filter: invert(80%);
}

27
CSS Advanced Selectors
- “Attribute Present” Selector: identifies an element based on an
attribute, regardless of any actual value

a[target] { color: red;}

<div>
<a href="index.html" target="_blank">home</a>
<a href="about.html">About Us</a>
</div>

28
CSS Advanced Selectors
- “Attribute Equals” Selector: selects an element with a specific
and exact matching attribute value

a[href="http://google.com/"] { color: red;}

<div>
<a href="index.html"
target="_blank">home</a>
<a href="http://google.com/">Google</a>
</div>

29
CSS Advanced Selectors
- “Attribute Contains” Selector: selects an element based on part
of an attribute value, but not an exact match.

a[href*="dex"] { color: red;}

<div>
<a href="index.html">home</a>
<a href="http://google.com/">Google</a>
</div>

30
CSS Advanced Selectors
- “Attribute Begins With” Selector: selects an element with an
attribute value begins with a specific text.

a[href^="http"] { color: red;}

<div>
<a href="index.html">home</a>
<a href="http://google.com/">Google</a>
</div>

31
CSS Advanced Selectors
- “Attribute Ends With” Selector: selects an element with an
attribute value ends with a specific text.

a[href$="ml"] { color: red;}

<div>
<a href="index.html">home</a>
<a href="http://google.com/">Google</a>
</div>

32
CSS Advanced Selectors
- “Attribute Spaced” Selector: selects an element with an
attribute value that should be whitespace-separated.

div[title~="nti"] { color: red;}

<div title="mcit nti">

welcome to professional training program
</div>

33
Pseudo-classes
- a:link {...}: styles an anchor which has not been visited
- a:visited {...}: styles links that a user has already visited based
on their browsing history.
- a:hover {...}: applied to an element when a user moves the
cursor over the element
- a:active {...}: applied to an element when a user clicks an
element
- a:focus {...}: applied to an element when a user has made an
element the focus point of the page, often by using the
keyboard to tab

34
Pseudo-classes
- input:enabled {...}: selects an input that is in the default state of
enabled and available for use
- input:disabled {...}: selects an input that has the disabled
attribute tied to it.
- input:checked {...}: selects checkboxes or radio buttons that are
checked
- input:valid {...}: selects elements with valid state
- input[type='email']:invalid {...}: selects elements with invalid
state

35
Pseudo-classes
- :first-child select an element if it’s the first child within its
parent
- Example:

li:first-child{…}

<ul>
<li>selected</li>
<li>not selected</li>
</ul>
<ul>
<li>selected</li>
<li>not selected</li>
</ul>

36
Pseudo-classes
- :last-child: select an element if it’s the last child within its
parent
- Example:

li:last-child{…}

<ul>
<li> not selected</li>
<li> selected</li>
</ul>
<ul>
<li> not selected</li>
<li>selected</li>
</ul>

37
Pseudo-classes
- :nth-child(n): select elements based on their position within its
parent
- Example:

li:nth-child(3){…}

<ul>
<li> not selected</li>
<li> not selected</li>
<li>selected</li>
</ul>

38
Pseudo-classes
- :nth-last-child(n): select elements based on their position within
its parent, counting from the last child.
- Example:

li:nth-last-child(2) {…}

<ul>
<li> not selected</li>
<li> not selected</li>
<li> selected</li>
<li> not selected</li>
</ul>

39
Pseudo-classes
- :only-child: select an element if it’s the last child within its
parent
- Example:

li:only-child{…}

<ul>
<li> not selected</li>
<li> not selected</li>
</ul>
<ul>
<li>selected</li>
</ul>

40
Pseudo-classes
- :first-of-type: select the first element of its type within a parent
- Example:

li:first-of-type{…}

<ul>
<li>selected</li>
</ul>
<ul>
<p> not selected</p>
<li> selected</li>
</ul>

41
Pseudo-classes
- :last-of-type: select the last element of its type within a parent
- Example:

li:last-of-type{…}

<ul>
<li> not selected</li>
<li> selected </li>
</ul>
<ul>
<li> not selected</li>
<li> selected </li>
</ul>

42
Pseudo-classes
- :only-of-type: select an element if it is the only of its type within
a parent.
- Example:
li:only-of-type {…}

<ul>
<li>not selected</li>
<li> not selected</li>
</ul>
<ul>
<li>selected</li>
</ul>
<ul>
<p> not selected</p>
<li> selected</li>
<p> not selected</p>
</ul>
43
Pseudo-classes
- :nth-of-type(n) select elements based on their position, of a
particular type, within its parent
- Example:
li:nth-of-type(3) {…}

<ul>
<li> not selected</li>
<li> not selected </li>
<p> not selected </p>
<li> selected</li>
<li> not selected </li>
</ul>

44
Pseudo-classes
- :nth-last-of-type(n): select elements based on their position, of
a particular type, within its parent, counting from the last child
- Example:
li:nth-last-of-type(3) {…}

<ul>
<li> not selected</li>
<li> selected </li>
<p> not selected </p>
<li> not selected </li>
<li> not selected </li>
</ul>

45
Pseudo-classes
- :empty: selects elements that do not contain children or text
nodes.
- Example:
div:empty {…}

<div>not selected</div>
<div><!-- selected --></div>
<div></div>
<div> </div> ➔not selected
<div><strong></strong></div> ➔not selected

46