Scribd
Upload
3 views

CSS3

The document provides an overview of various CSS properties and techniques for styling images, links, and text on webpages. It covers image properties such as border, height, and opacity, as well as link pseudo-classes, CSS3 features like rounded corners, shadows, and multi-columns. Additionally, it explains positioning methods and the use of gradients and transforms in CSS3 for enhanced visual effects.

Uploaded by

Sri Guru Harkrishan Private I.T.I
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS3

The document provides an overview of various CSS properties and techniques for styling images, links, and text on webpages. It covers image properties such as border, height, and opacity, as well as link pseudo-classes, CSS3 features like rounded corners, shadows, and multi-columns. Additionally, it explains positioning methods and the use of gradients and transforms in CSS3 for enhanced visual effects.

Uploaded by

Sri Guru Harkrishan Private I.T.I
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

CSS - Using Images

Images play an important role in any webpage. Though it is not recommended to include a
lot of images, but it is still important to use good images wherever required.
CSS plays a good role to control image display. You can set the following image properties
using CSS.
 The border property is used to set the width of an image border.
 The height property is used to set the height of an image.
 The width property is used to set the width of an image.
 The -moz-opacity property is used to set the opacity of an image.

The Image Border Property


The border property of an image is used to set the width of an image border. This property
can have a value in length or in %.
A width of zero pixels means no border.
<body>
<img style = "border:0px;" src = "/css/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
</body>

The Image Height Property


The height property of an image is used to set the height of an image. This property can
have a value in length or in %. While giving value in %, it applies it in respect of the box in
which an image is available.
Here is an example −
<body>
<img style = "border:1px solid red; height:100px;" src =
"/css/images/logo.png" />
<br />
<img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png"
/>
</body>

The -moz-opacity Property


The -moz-opacity property of an image is used to set the opacity of an image. This property
is used to create a transparent image in Mozilla. IE uses filter:alpha(opacity=x) to create
transparent images.
In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element
more transparent (The same things goes for the CSS3-valid syntax opacity:x).
<body>
<img style = "border:1px solid red; -moz-opacity:0.4;
filter:alpha(opacity=40);" src = "/css/images/logo.png" />
</body>

CSS - Links
set different properties of a hyper link using CSS. You can set following properties of a hyper
link −
We will revisit the same properties when we will discuss Pseudo-Classes of CSS.
 The :link signifies unvisited hyperlinks.
 The :visited signifies visited hyperlinks.
 The :hover signifies an element that currently has the user's mouse pointer hovering
over it.
 The :active signifies an element on which the user is currently clicking.
Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective. Also, a:active MUST come after a:hover in the CSS definition as follows −
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

CSS3 - Rounded Corners

CSS3 Rounded corners are used to add special colored corner to body or text by using the
border-radius property.A simple syntax of rounded corners is as follows −
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

The following table shows the possible values for Rounded corners as follows −

Sr.No. Value & Description


1
border-radius
Use this element for setting four boarder radius property

2
border-top-left-radius
Use this element for setting the boarder of top left corner

3
border-top-right-radius
Use this element for setting the boarder of top right corner

4
border-bottom-right-radius
Use this element for setting the boarder of bottom right corner

5
border-bottom-left-radius
Use this element for setting the boarder of bottom left corner

CSS3 - Border Image


CSS Border image property is used to add image boarder to some elements.you don't need
to use any HTML code to call boarder image.A sample syntax of boarder image is as follows
−
#borderimg {
border: 10px solid transparent;
padding: 15px;

The most commonly used values are shown below −

Sr.No. Value & Description

1
border-image-source
Used to set the image path

2
border-image-slice
Used to slice the boarder image

3
border-image-width
Used to set the boarder image width

4
border-image-repeat
Used to set the boarder image as rounded, repeated and stretched

<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}

CSS3 - Shadow

CSS3 supported to add shadow to text or elements.Shadow property has divided as follows
−

 Text shadow
 Box Shadow
Text shadow
CSS3 supported to add shadow effects to text. Following is the example to add shadow
effects to text −
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
box shadow
Used to add shadow effects to elements, Following is the example to add shadow effects to
element.
Live Demo

<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>

CSS3 - Text
CSS3 contained several extra features, which is added later on.

 text-overflow
 word-wrap
 word-break
There are following most commonly used property in CSS3 –

Sr.No. Value & Description

1
text-align-last
Used to align the last line of the text

2
text-emphasis
Used to emphasis text and color

3
text-overflow
used to determines how overflowed content that is not displayed is signaled to users

4
word-break
Used to break the line based on word

5
word-wrap
Used to break the line and wrap onto next line
Text-overflow
The text-overflow property determines how overflowed content that is not displayed is
signaled to users. the sample example of text overflow is shown as follows −

<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

CSS3 Word Breaking


Used to break the line, following code shows the sample code of word breaking.
Live Demo

<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>

CSS word wrapping

Word wrapping is used to break the line and wrap onto next line.the following code will have
sample syntax −
p {
word-wrap: break-word;
}

CSS3 - Box Sizing


Box sizing property is using to change the height and width of element.

CSS3 box sizing property


Live Demo

<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>

CSS3 - Multi Columns


CSS3 supported multi columns to arrange the text as news paper structure.
Some of most common used multi columns properties as shown below −

Sr.No. Value & Description

1
column-count
Used to count the number of columns that element should be divided.

2
column-fill
Used to decide, how to fill the columns.

3
column-gap
Used to decide the gap between the columns.

4
column-rule
Used to specifies the number of rules.
5
rule-color
Used to specifies the column rule color.

6
rule-style
Used to specifies the style rule for column.

7
rule-width
Used to specifies the width.

8
column-span
Used to specifies the span between columns.

Example
Below example shows the arrangement of text as new paper structure.
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;

/* Column gap property */


-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;

/* Column style property */


-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>

CSS – Positioning
CSS helps you to position your HTML element. You can put any HTML element at whatever location
you like. You can specify whether you want the element positioned relative to its natural position in
the page or absolute based on its parent element.

Relative Positioning
Relative positioning changes the position of the HTML element relative to where it normally
appears. So "left:20" adds 20 pixels to the element's LEFT position.
You can use two values top and left along with the position property to move an HTML
element anywhere in the HTML document.

 Move Left - Use a negative value for left.


 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.

<html>
<head>
</head>

<body>
<div style = "position:relative; left:80px; top:2px; background-
color:yellow;">
This div has relative positioning.
</div>
</body>
</html>

Absolute Positioning
An element with position: absolute is positioned at the specified coordinates relative to
your screen top-left corner.
You can use two values top and left along with the position property to move an HTML
element anywhere in the HTML document.

 Move Left - Use a negative value for left.


 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.

<body>
<div style = "position:absolute; left:80px; top:20px; background-
color:yellow;">
This div has absolute positioning.
</div>
</body>

Fixed Positioning
Fixed positioning allows you to fix the position of an element to a particular spot on the page,
regardless of scrolling. Specified coordinates will be relative to the browser window.
You can use two values top and left along with the position property to move an HTML
element anywhere in the HTML document.
 Move Left - Use a negative value for left.
 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.

<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>

CSS3 - Multi Background

CSS Multi background property is used to add one or more images at a time without HTML
code, We can add images as per our requirement.A sample syntax of multi background
images is as follows −
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}

The most commonly used values are shown below −

Sr.No. Value & Description

1
background
Used to setting all the background image properties in one section

2
background-clip
Used to declare the painting area of the background

3
background-image
Used to specify the background image

4
background-origin
Used to specify position of the background images

5
background-size
Used to specify size of the background images
Example
Following is the example which demonstrate the multi background images.
<style>
#multibackground {
background-image: url(/css/images/logo.png),
url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>

CSS3 - Gradients
What is Gradients?
Gradients displays the combination of two or more colors

Types of gradients
 Linear Gradients(down/up/left/right/diagonally)
 Radial Gradients
Linear gradients
Linear gradients are used to arrange two or more colors in linear formats like top to bottom.
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>

CSS3 Radial Gradients


Radial gradients appears at center.
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>

CSS3 - 2d Transforms
2D transforms are used to re-change the element structure as translate, rotate, scale, and
skew.
The following table has contained common values which are used in 2D transforms −

Sr.No. Value & Description

1
matrix(n,n,n,n,n,n)
Used to defines matrix transforms with six values

2
translate(x,y)
Used to transforms the element along with x-axis and y-axis

3
translateX(n)
Used to transforms the element along with x-axis

4
translateY(n)
Used to transforms the element along with y-axis

5
scale(x,y)
Used to change the width and height of element

6
scaleX(n)
Used to change the width of element

7
scaleY(n)
Used to change the height of element

8
rotate(angle)
Used to rotate the element based on an angle

9
skewX(angle)
Used to defines skew transforms along with x axis

10
skewY(angle)
Used to defines skew transforms along with y axis
Rotate 20 degrees
Box rotation with 20 degrees angle as shown below −
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);

CSS3 - 3D Transforms
Using with 3d transforms, we can move element to x-axis, y-axis and z-axis, Below example
clearly specifies how the element will rotate.

Methods of 3D transforms
Below methods are used to call 3D transforms −

Sr.No. Value & Description

1
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Used to transforms the element by using 16 values of matrix

2
translate3d(x,y,z)
Used to transforms the element by using x-axis,y-axis and z-axis

3
translateX(x)
Used to transforms the element by using x-axis

4
translateY(y)
Used to transforms the element by using y-axis

5
translateZ(z)
Used to transforms the element by using y-axis

6
scaleX(x)
Used to scale transforms the element by using x-axis
7
scaleY(y)
Used to scale transforms the element by using y-axis

8
scaleY(y)
Used to transforms the element by using z-axis

9
rotateX(angle)
Used to rotate transforms the element by using x-axis

10
rotateY(angle)
Used to rotate transforms the element by using y-axis

11
rotateZ(angle)
Used to rotate transforms the element by using z-axis

CSS3 - Animation

Animation is process of making shape changes and creating motions with elements.

@keyframes
Keyframes will control the intermediate animation steps in CSS3.

Example of key frames with left animation −


@keyframes animation {
from {background-color: pink;}
to {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
}

You might also like