Scribd
Upload
3 views

CSS Part-2

Uploaded by

Shakeer Baba Mohammad
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

CSS Part-2

Uploaded by

Shakeer Baba Mohammad
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 40

CSS Transitions

Normally when the value of a CSS property changes, the rendered result is
instantly updated, with the affected elements immediately changing from the
old property value to the new property value. This section describes a way to
specify transitions using new CSS properties. These properties are used to
animate smoothly from the old state to the new state over time .

Note: Transition will we started when you move cursor on it. You must need to
specify time duration otherwise Transition have no effect. The default time
value is zero.
You need to specify two things for create CSS transition.
 The CSS property on which you want to add an effect.
 The time duration of the effect.

Transitions support only pixels based and colour based properties only.
Ex: width, height, opacity, font-size, border-width, background-colour, colour,
border-colour etc.
selector{
property : old-value;
property : old-value;
…
transition: property time (sec/ms), property time (sec/ms), …
}
Selector:hover{
property :new-value;
property : new-value;
….
}

Property Description

A shorthand property for setting the four


transition
transition properties into a single property

transition-delay Specifies when the transition effect will start.

Specifies how many seconds or milliseconds a


transition-duration
transition effect takes to complete

Specifies the name of the CSS property the


transition-property
transition effect is for.

transition-timing- Specifies the speed curve of the transition


function effect.
 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

Example1
<!DOCTYPE html>
<html>
<head>
<style>
img {
background: red;
transition: width 2s;
}
img:hover {
width: 500px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<imgsrc="car1.jpg" width="100" height="100">
<p>Hover over the img element, to see the transition effect</p>
</body>
</html>

Example2
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
width: 100px;
height: 100px;
background: #ff33cc;
transition: width 500ms;
}
.d1:hover {
width: 500px;
}
.d2 {
width: 100px;
height: 100px;
background: red;
transition: height 2s;
}
.d2:hover {
height: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>get mouse over the div element, to see the transition width effect</p>
<div class="d1"></div>

<br><br>

<p>get mouse over the div element, to see the transition height effect</p>
<div class="d2"></div>
</body>
</html>

Example3
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ff3300;
position: relative;
color: #00ff33;
font-size: 25px;
transition: background-color 2s, font-size 2s, width 2s;
}
div:hover {
background-color: blue;
font-size: 100px;
width: 400px;
}
</style>
</head>
<body>
<h1>The transition with mutiple Properties</h1>

<div>See effect</div>
</body>
</html>

CSS Transforms
Transforms are used to display the element in a different visual dimension.
Using predefine functions
Types of Transforms:
 matrix(1, 2, 3, 4, 5, 6…);
 translate(x, y) translateX(x) translateY(y)
translateZ(z)
 scale(x,y); scaleX(x) scaleY(y) scaleZ(z)
 rotate(deg) rotateX(x-deg) rotateY(y-deg)
 skew(Xdeg, Ydeg) skewX(Xdeg) skewY(Ydeg)

transform: fun1(..) fun2(..) fun3(..) …;

/* Keyword values */
transform: none;

/* Function values */
transform:matrix(1.0,2.0,3.0,4.0,5.0,6.0);
transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
transform:perspective(17px);
transform:rotate(0.5turn);
transform: rotate3d(1,2.0,3.0,10deg);
transform:rotateX(10deg);
transform:rotateY(10deg);
transform:rotateZ(10deg);
transform:translate(12px,50%);
transform: translate3d(12px,50%,3em);
transform:translateX(2em);
transform:translateY(3in);
transform:translateZ(2px);
transform:scale(2,0.5);
transform: scale3d(2.5,1.2,0.3);
transform:scaleX(2);
transform:scaleY(0.5);
transform:scaleZ(0.3);
transform:skew(30deg,20deg);
transform:skewX(30deg);
transform:skewY(1.07rad);
/* Multiple function values */
transform:translateX(10px)rotate(10deg)translateY(5px);
transform:translate(10px,0,20px)rotateY(3deg);

Example1
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: solid red;
transform: rotate(50deg);
width: 140px;
height: 100px;
}

div {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}
</style>
</head>
<body>
<h1>The transition with mutiple Properties</h1>

<div>See effect</div><br>
<imgsrc="car3.png">

</body>
</html>

Example2
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color:#00ccff;
margin-left: 150px;
box-shadow: 10px 10px10px10px #ff0000;
}
div:hover{
background-color:#0099ff;
transform: translate(30px, 30px); /* scale(1.5); */
}
</style>
</head>
<body>
<h1>The transform Properties</h1>
<div>See effect</div>
</body>
</html>

Example3
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color:#6633ff;
margin-left: 100px;
box-shadow: 5px 5px5px5px #ff0000;
transition: transform 1s;
}
div:hover{
background-color:#0099ff;
transform: rotate(90deg) scale(1.5);
}
</style>
</head>
<body>
<h1>Transform with Transition Properties</h1>
<div>See effect</div>
</body>
</html>
Animations
 Animations are “group of transitions/transform/properties”, which will
be performed one after another.
 Transition contains two points only (starting point, ending point).
 Animation contains multiple points of milestones.

Syn:
@keyframes Ani-name
{
from{ prop:value; prop:value; prop:value;…} old status
to{prop:new-value; prop:new-value; prop:new-value;…} new status
}

@keyframesAni-name
{
0%{ prop:value; prop:value; prop:value;…}
25%{ prop:value; prop:value; prop:value;…}
33%{ prop:value; prop:value; prop:value;…}
75%{ prop:value; prop:value; prop:value;…}
100%{ prop:value; prop:value; prop:value;…}
}

Mapping to tags:
Selector{
animation-name:ani-name;
animation-duration: Ns;
animation-direction: normal/reverse/alter;
animation-delay:Ns;
animation-iteration-count:count/infinite; default is 1
}
CSS Properties

Background

CSS background property is used to define the background effects on Html element. There are

5 CSS background properties that affect the Html elements.

background-color

background-image

background-repeat

background-attachment

background-position

background-color

The background-color property is used to specify the background color of the Html element.

Example

<html>
<head>
<style>
h3{ background:yellow; }
p{ background:cyan; }
</style>
</head>
<body>
<h3>This is h3 Heading</h3>
<p>This is paragraph</p>
</body>
</html>
Output:

This is h3 Heading

This is paragraph.

In above example we set the background color cyan for <p> and yellow for <h3>.

background-image

The background-image property is used to specify the image in background of the Html element.

Example

<html>
<head>
<style>
p{background-image:url(car2.png);}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>

background-repeat

By default, the background-image property repeats the background image horizontally and

vertically. Some images are repeated only horizontally or vertically. If you do not want to repeat

background image then set no-repeat.

Example: repeat in x-axis

<html>
<head>
<style>
p{
background-image:url(car2.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>

Example: repeat in y-axis

<html>
<head>
<style>
p{
background-image:url(car2.png);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>
background-position

background-position is use only in case of when you use image in background of any Html

elements. It is used to define the initial position of the background image. By default, the

background image is placed on the top-left of the webpage. You can set position of background,

all background image position are given below;

 top

 bottom

 center

 left

 right
example:
p{
background-image:url(car3.png);
background-repeat: no-repeat;
background-position: bottom;
}

CSS Border

The CSS border properties allow you to specify the style, size, and color of an Html element

border. Following CSS border properties are used for Html elements,

 border-style

 border-width

 border-color

 border-radius

 border-shadow : HposVerposblurradius spread shadowcolor


Border Style

The border-style property specifies what kind of border to display.

Value Description

none It is used for does not define any border.

dotted It is used to define a dotted border.

dashed It is used to define a dashed border.

solid It is used to define a solid border.

It defines two borders with the same border-width


double
value.

It defines a 3D grooved border. effect is generated


groove
according to border-color value.

It defines a 3D ridged border. effect is generated


ridge
according to border-color value.

It defines a 3D inset border. effect is generated


inset
according to border-color value.

It defines a 3D outset border. effect is generated


outset
according to border-color value.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>

Output

No border.

A dotted border.
A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

Border Width

The border-width property is used to set the border width. It is set in pixels. You can also set the

width of the border by using pre-defined values, thin, medium or thick.

Example: css border-color

<!DOCTYPE html>
<html>
<head>
<style>
p.para1 {
border-style: solid;
width:200px;
border-color: green;
}
p.para2{
border-style: solid;
width:100px;
border-color: red;
}
</style>
</head>
<body>
<p class="para1">This is a solid red border</p>
<p class="para2">This is a solid green border</p>
</body>
</html>

Output

border-radius 50px

border-radius 10px

Border Color

This properties are used for set the color of Html elements border. There are three method to set

the color of border.

 Name: It specifies the color name. For example: "red".


 RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
 Hex: It specifies the hex value of the color. For example: "#ff0000".

Example: css border-color

<!DOCTYPE html>
<html>
<head>
<style>
p.para1 {
border-style: solid;
border-color: green;
}
p.para2 {
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<p class="para1">This is a solid red border</p>
<p class="para2">This is a solid green border</p>
</body>
</html>

Output

This is a solid red border

This is a solid green border

Border Radius

border-radius are used for give the radius for border, using this you can make a circle.

Example: css border-color

<!DOCTYPE html>
<html>
<head>
<style>
p.parar1 {
border-style: solid;
border-radius: 100%;
border-color: green;
}
p.parar2 {
border-style: solid;
border-radius: 50%;
height:100px;
width:100px;
border-color: red;
}
</style>
</head>
<body>
<p class="parar1">This is a solid red border</p>
<p class="parar2">This is a solid green border</p>
</body>
</html>

CSS Display

CSS display is the most important property of CSS which is used to display Html elements on

web page. Every Html element on the webpage is a rectangular box and the CSS display

property specifies the type of box used for an Html element.

CSS display values

Values Description
It is used to displays an Html element in same line
inline
(like <span>).

none It is used to hide the Html element.

It is used to displays an element as a block element


block
(like <p>).

list-item Let the element behave like a <li> element.

display:inline

It is used to display an Html elements in same line without any line break. In below example three

paragraph display in same line.

<!DOCTYPE html>
<html>
<head>
<style>
p{
display:inline;
}
</style>
</head>
<body>
<p>Inline display</p>
<p>Inline display</p>
<p>Inline display</p>
</body>
</html>
Output:

Inline display Inline display Inline display

display:none

It is used for hide text on browser but it does not take any space. In below example we hide three

paragraph texts.

<!DOCTYPE html>
<html>
<head>
<style>
p{
display:none;
}
</style>
</head>
<body>
<p>Text not display</p>
<p>Text not display</p>
<p>Text not display</p>
</body>
</html>

display:block

It is used to displays an element as a block element. It displayselements same like <p> tag. In

below example we display text by using <span> tag. It take some space and also line break

same like paragraph.

<!DOCTYPE html>
<html>
<head>
<style>
span
{
display:block;
}
</style>
</head>
<body>
<span>Block display elements</span>
<span>Block display elements</span>
<span>Block display elements</span>
</body>
</html>

Output
Inline-Block elements
inline-Block elements

display:inline-block

It is used to displays an element as a block element. It display an elements same like <p> tag. In

below example we display text by using <span> tag. It take some space but it display all element

in same line.

<!DOCTYPE html>
<html>
<head>
<style>
p{
display:inline-block;
}
</style>
</head>
<body>
<span>Inline-block elements</span>
<span>Inline-block elements</span>
<span>Inline-block elements</span>
</body>
</html>

Output
Inline-Block elements Inline-Block elements

CSS Float

The CSS float property is a positioning property. It is used to push an element to the left or right,

allowing other element to wrap around it. It is generally used with images and layouts.

How it works

Elements are floated only horizontally. So it is possible only to float elements left or right, not up

or down.

 A floated element may be moved as far to the left or the right as possible.
Simply, it means that a floated element can display at extreme left or
extreme right.

 The elements after the floating element will flow around it.

 The elements before the floating element will not be affected.


 If the image floated to the right, the texts flow around it, to the left and if
the image floated to the left, the text flows around it, to the right.

CSS Float Properties

Property Description Values

The clear property is used to


left, right, both, none,
clear avoid elements after the floating
inherit
elements which flow around it.

It specifies whether the box


float left, right, none, inherit
should float or not.

<!DOCTYPE html>
<html>
<head>
<style>
input{
float:right;
}
</style>
</head>
<body>
<p>Float textbox's from right</p>
<input><input><input><input>
</body>
</html>

CSS Font
CSS font is used for design text or font for display on web page. CSS font properties define the font
family, boldness, size, and the style of a text.

Font-style property:

Font styles are used for set font style. Font style property has three values they are;

 normal: The text is shown normally


 italic: The text is shown in italics
 oblique: The text is "leaning" (oblique is very similar to italic, but less
supported)

Example: font style


<html>
<head>
<style>
h1 {
font-style: normal;
}
h2 {
font-style: italic;
}
p{
font-style: oblique;
}
</style>
</head>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>

Output

This is h1 Heading
This is h2 Heading

This is Paragraph

Font-Size property:
We can define size of font in following way
With Em
With Percent
With Pixels
If you set the text size with pixels then you can gives full control over the text size.

Example:
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}
</style>
</head>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>

Font size in Em
The em size unit is recommended by the W3C. 1em is equal to default text size in browsers (16px).
The size convert pixels to em using this formula: pixels/16=em

Example:
<html>
<head>
<style>
h1 {
font-size: 2.5em; * 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p{
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>
Font size in percent
Text size work on all browsers, you can use default font-size in percent for the <body> element.
Example:
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p{
font-size: 0.875em;
}
</style>
</head>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>
CSS Margin

margins are used for give sufficient space around an element (outside the border). The margin

does not have a background color, and it is completely transparent. Margin have four properties

which is given below;

 top

 bottom

 left

 right

Example

<html>
<body>
<p style="margin-top:150px;"> Margin from top</p>
<p style="margin-bottom:100px;">Margin from bottom</p>
<p style="margin-right:50px;">Margin from right</p>
<p style="margin-left:50px;">Margin from left</p>
</body>
</html>

CSS Padding

The padding clears an area around the content (inside the border) of an element. The padding is

affected by the background color of the element. Padding have four properties which is given

below;

 top

 bottom

 left

 right
Example

<html>
<body>
<div style="border:2px solid red;">
<p style="padding-top:50px;">padding from top</p>
<p style="padding-bottom:10px;">padding from bottom</p>
</div>
<p style="padding-right:50px;">padding from right</p>
<p style="padding-left:50px;">padding from left</p>
<!—NORMAL TEXTFIELD 
<input type="text" name="t1"/>
<!—TEXTFIELD WITH PADDING SETTINGS 
<input type="text" name="t1" style="padding-right:10px;padding-left:10px;padding-
top:5px;padding-bottom:5px;"/>
</body>
</html>

Output
CSS Overflow

CSS overflow property used to handle the content when it overflows its block level container.

Why need of Overflow?

Suppose if you do not set the height and width of any box then it goes larger as content, but if

you do not set height or width of box but content cannot fit inside box then it goes overflow. The

CSS overflow property is used to overcome this problem.

Overflow property values

Values Description

It specifies that overflow is not clipped. It renders


visible
outside the element's box. This is a default value.

It specifies that the overflow is clipped, and rest of


hidden
the content will be invisible.

It specifies that the overflow is clipped, and a scroll


scroll
bar is used to see the rest of the content.

It specifies that if overflow is clipped, a scroll bar is


auto
needed to see the rest of the content.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: cyan;
width: 200px;
height: 150px;
overflow: scroll;
}
div.hidden {
background-color: pink;
width: 100px;
height: 150px;
overflow: hidden;
}
div.auto {
background-color: yellow;
width: 100px;
height: 150px;
overflow: auto;
}
</style>
</head>
<body>
<p>overflow:scroll</p>
<div class="scroll">
If contents goes out the container then scroll bar is used to see the rest of the content.
</div>
<p>overflow:hidden</p>
<div class="hidden">
It specifies that the overflow is clipped, and rest of the content will be invisible.
</div>
<p>overflow:auto</p>
<div class="auto">
It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
</div>
</body>
</html>

Output

CSS Position

position properties are used for set the position of Html elements. css position properties are

used for set the position of text, image for display on web page.

CSS have following position properties;

 Static

 Relative

 Absolute

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.pos_static {
position: static;
top: 80px;
right: 40px;
color: green;
}
</style>
</head>
<body>
<p class="pos_static">This is my first html with csscode.</p>
<p>This is my first html with csscode.</p>
</body>
</html>

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.pos_relative {
position: relative;
top: 20px;
right: 10px;
color: green;
}
</style>
</head>
<body>
<p class="pos_relative">This is my first html with csscode.</p>
<p>This is my first html with csscode.</p>
</body>
</html>

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.pos_absolute {
position: absolute;
top: 140px;
right: 50px;
color: green;
}
</style>
</head>
<body>
<p class="pos_absolute">This is my first html with csscode.</p>
<p>This is my first html with csscode.</p>
</body>
</html>

CSS Opacity

In CSS we can easily create transparent images v ery easily by using Opacity.The CSS

Opacity property is used to specify the transparency of any Html element. In simple word, you

can say that it specifies the clarity of the image.

Opacity value should be range 0 to 1 only.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
img.trans {
opacity: 0.4;
filter: alpha(opacity=40); /* this one for For IE8 and earlier */
}
</style>
</head>
<body>
<imgsrc="car3.png" alt="logo">
<img class="trans" src="car3.png" alt="logo">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#i{
background-image:url("w.jpg");
}
#div1{
width:500px;
height:300px;
background-color:#3399ff;
opacity:0.6;
}
</style>
</head>
<body id="i">
<div id="div1">
hello world
</div>
</body>
</html>

CSS TextStyles

CSS text styles are used specify space between letters, words, lines etc…

Value Description

Letter-spacing This property specifies gap between letters.

Word-spacing This property specifies gap between words.

Line-height This property specifies height of line of text.

This property specifies

Text-decoration underline/overline/strikeout/overline/line-through/none.

Default value is none.

This property specifies case of text. Those are uppercase /


Text-transform
lowercase / capitalize / none. Default value is none.

Used to specify alignment of text. Alignments are left / right /


Text-align
center / justify. Default is left.
Used to apply shadow foe the text.
Text-shadow
Syn: Hposverposblurradiusshadowcolor

Example

<!-- text spaces -->


<!DOCTYPE html>
<html>
<head>
<style>
p{ font-size:20px; }
.p1{ letter-spacing: 5px; }
.p2{ letter-spacing: -1px; }
.p3{ word-spacing: 10px; }
.p4{ line-height: 40px; }
.p5{ text-decoration: line-through; }
.p6{text-transform:uppercase; }
.p7{ text-align: center; }
</style>
</head>
<body>
<p class="p1">This line Demonstrate letter spacing </p>
<p class="p2">This line Demonstrate letter spacing -ve value</p>
<p class="p3">This line Demonstrate word spacing </p>
<p class="p4">This line Demonstrate line height </p>
<p class="p5">This line Demonstrate text-decoration </p>
<p class="p6">This line Demonstrate text-transform </p>
<p class="p7">This line Demonstrate text-align </p>
</body>
</html>
Output

This line Demonstrate letter spacing

This line Demonstrate letter spacing -ve value

This line Demonstrate word spacing

This line Demonstrate line height

This line Demonstrate text-decoration

THIS LINE DEMONSTRATE TEXT-TRANSFORM

This line Demonstrate text-align

CSS Word Wrap

CSS Word Wrap properties are used for breaks the long words and wrap onto the next line. The

main use of these properties is to prevent overflow when a long string unable to fit into containing

box.

word wrap values

Value Description

This property is used to break words only at allowed


normal
break points.

break-word It is used to break unbreakable words.

initial It sets this property to its default value.


Example

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
width: 200px;
border: 1px solid #ff3333;
}
.p2{
width: 200px;
border: 1px solid #ff3333;
word-wrap: break-word;
}
</style>
</head>
<body>
<h3>without word-wrap</h3>
<p class="p1">Word Wrap properties are used for break the loooooooooooooooooooooooooooong
words and wrap onto the next line. </p>

<h3>with word-wrap</h3>
<p class="p2">Word Wrap properties are used for break the loooooooooooooooooooooooooooong
words and wrap onto the next line. </p>
</body>
</html>

Output

You might also like