Scribd
Upload
6 views

Introduction to CSS-2

This document provides an introduction to various CSS properties and techniques, including text shadows, box shadows, gradients, animations, and transformations. It includes examples of HTML and CSS code demonstrating how to implement these features, such as rounded corners, image borders, and transitions between images. The document serves as a comprehensive guide for enhancing web design using CSS.

Uploaded by

phtkgmz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

Introduction to CSS-2

This document provides an introduction to various CSS properties and techniques, including text shadows, box shadows, gradients, animations, and transformations. It includes examples of HTML and CSS code demonstrating how to implement these features, such as rounded corners, image borders, and transitions between images. The document serves as a comprehensive guide for enhancing web design using CSS.

Uploaded by

phtkgmz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Introduction to Cascading

Style Sheet (CSS): Part 2


Text Shadows
Text-shadow property makes it easy to add a text shadow effect to any text
Horizontal offset of the shadow the number of pixels that the text-shadow will appear to the left or the
right of the text.
For example, the horizontal offset of the shadow is -4px. A negative value moves the text-shadow to the
left; a positive value moves it to the right.
Vertical offset of the shadow the number of pixels that the text-shadow will be shifted up or down from
the text.
For example, the vertical offset of the shadow is 4px. A negative value moves the shadow up, whereas a
positive value moves it down.
Blur radius the blur (in pixels) of the shadow. A blur-radius of 0px would result in a shadow with a sharp
edge (no blur). The greater the value, the greater the blurring of the edges. We used a blur radius of 6px.
Color determines the color of the text-shadow. We used dimgrey.
syntax
text-shadow: Horizontal offset of the shadow Vertical offset of the shadow Blur radius Color;
text-shadow: -4px 4px 6px dimgrey;
<html>
<head>
<meta charset = "utf-8">
<title>Text Shadow</title>
<style type = "text/css">
h1
{
text-shadow: -4px 4px 6px red; /* add shadow */
font-size: 400%; /* increasing the font size */
} </style>
</head>
<body>
<h1>Text Shadow</h1>
</body>
</html>
<html>
<head>
<title>Gradient Heading</title>
<style>
.gradient-heading {
background: linear-gradient(to right, yellow,green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: -4px 4px 6px red; /* add shadow */
}
</style>
</head>
<body>
<h1 class="gradient-heading">CHANDU</h1>
</body>
</html>
Rounded Corners #chandu3 {

The border-radius property allows you to add rounded corners border-radius: 75px;
to an element background: url(paper.gif);
You can also specify the radius for each corner with border- background-position: left top;
top-left-radius, border-top-right-radius, border-bottom-left- background-repeat: repeat;
radius and border-bottom-right-radius.
padding: 20px;
<!DOCTYPE html>

<html>
width: 200px;
<head> height: 150px;
<style> }
#chandu1 {
p{ text-align:center;
border-radius: 25px;

background: #73AD21;
color:yellow; }
padding: 20px; </style>
width: 200px;
</head>
height: 150px;
<body>
}

#chandu2 { <p id="chandu1">CHANDU</p>


border-radius: 50px; <p id="chandu2">CHANDU</p>
border: 2px solid #73AD21;
<p id="chandu3">CHANDU😎</p></body>
padding: 20px;
</html>
width: 200px;

height: 150px;

}
Box Shadows

We can shadow any block-level element in CSS

we add the box-shadow property with four values

• Horizontal offset of the shadow the number of pixels that the box-shadow will appear to the
left or the right of the box. A positive value moves the box-shadow to the right

• Vertical offset of the shadow the number of pixels the box-shadow will be shifted up or down
from the box. A positive value moves the box-shadow down.

• Blur radius A blur-radius of 0px would result in a shadow with a sharp edge (no blur). The
greater the value, the more the edges of the shadow are blurred. We used a blur radius of 10px.

• Color the box-shadow’s color.


<html> h2
<head>
<title>Box Shadow</title> {
<style type = "text/css"> text-align: center;
div
{ }
width: 200px; </style>
height: 200px;
background-color: yellow;
</head>
box-shadow: 25px 25px 50px red; <body>
float: left;
margin-right: 120px;
<div><h2>Box Shadow Bottom and
margin-top: 40px; Right</h2></div>
} <div id = "box2"><h2>Box Shadow Top and
#box2 Left</h2></div>
{
width: 200px; height: 200px; </body>
background-color: green; </html>
box-shadow: -25px -25px 50px yellow;
Linear Gradients
Linear gradients are a type of image that gradually transitions from one color to the next horizontally,
vertically or diagonally
To create a CSS linear gradient, you must have to define two or more color stops. The color stops are
the colors which are used to create a smooth transition. Starting point and direction can also be added
along with the gradient effect.
Syntax:
background: linear-gradient (direction, color-stop1, color-stop2.....);
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
<html> #angle
<head> { width: 200px;
<title>Linear Gradient</title> height: 200px;
<style type = "text/css"> border: 3px solid Purple;

div padding: 5px 20px;

{ width: 200px; text-align: center;

height: 200px; border: 3px solid navy; padding: 5px 20px; text-align: center; background: linear-gradient(
45deg, white 15%, plum 50%, purple 75% ); }
background: linear-gradient( to bottom, white 15%, lightsteelblue 50%, navy
75% ); </style>
float: left; margin-right: 15px; } </head>
#horizontal <body>
{ width: 200px; <div><h2>Vertical Linear Gradient</h2></div>
height: 200px; <div id = "horizontal"><h2>Horizontal Linear
Gradient</h2></div>
border: 3px solid orange;
<div id = "angle"><h2>Diagonal Linear
padding: 5px 20px; Gradient</h2></div>
text-align: center; </body>
background: linear-gradient( 90deg, white 15%, yellow 50%, orange 75% ); </html>
margin-right: 15px; }
Radial Gradients
Radial gradients are similar to linear gradients, but the color changes gradually from an inner point (the
start) to an outer circle (the end)
background: radial-gradient(shape size at position, start-color, ..., last-color);
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;

background: radial-gradient(green, green, red); /* Standard


syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
</body>
</html>
Image Borders
The CSS border-image property uses images to place a border around any block-level element.
border-image-repeat—specifies how the regions of the border image are scaled and tiled (repeated). By
indicating stretch just once, we create a border that will stretch the top, right, bottom and left regions to
fit the area. You may specify two values for the border-image-repeat property
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 35px solid transparent;
padding: 15px;
border-image: url(logo.jpg) 80 80 80 80 stretch;
}
#borderimg1 {
border: 35px solid transparent;
padding: 15px;
border-image: url(logo.jpg) 34% 34% repeat;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p id="borderimg"> 🎉RVRJC🎉 </p>
<p id="borderimg1"> 🏆🏆DEPT OF CSE 🏆🏆 </p>
<p>Here is the original image:</p><img src=“logo.jpg">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>
</body>
Animation
The animation property in CSS can be used to animate many other CSS properties such as color, background-
color, height, or width.
Each animation needs to be defined with the @keyframes at-rule which is then called with the animation
property.
The animation property allows you to represent several animation properties in a shorthand notation, rather
than specifying each separately, as in:
animation-name represents the name of the animation .This name associates the animation with the keyframes
that define various properties of the element being animated at different stages of the animation.
animation-timing-function determines how the animation progresses in one cycle of its duration.
Possible values include linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier.
The value linear, specifies that the animation will move at the same speed from start to finish.
The default value, ease, starts slowly, increases speed, then ends slowly.
The ease-in value starts slowly, then speeds up, whereas the ease-out value starts faster, then slows down.
The ease-in-out starts and ends slowly.
Finally, the cubic-bezier value allows you to customize the timing function with four values between 0 and 1,
such as cubic-bezier(1,0,0,1).
animation-duration specifies the time in seconds (s) or milliseconds (ms) that the animation
takes to complete one iteration (10s in this case). The default duration is 0.

animation-delay specifies the number of seconds (1s in this case) or milliseconds after the page
loads before the animation begins.

The default value is 0. If the animation-delay is negative, such as -3s, the animation will begin
three seconds into its cycle.

animation-iteration-count specifies the number of times the animation will run. The default is 1.
You may use the value infinite to repeat the animation continuously.

animation-direction specifies the direction in which the animation will run. The value alternate
used here specifies that the animation will run in alternating, counterclockwise ,then clockwise.
The default value, normal, would run the animation in the same direction for each cycle.
<html>
<head>
<title>Animation</title>
<style type = "text/css">
img
{
position: relative;
animation: movingImage linear 18s 2 1s alternate;
}
@keyframes movingImage
{
0% {opacity: 0; left: 50px; top: 0px;}
25% {opacity: 1; left: 0px; top: 50px;}
50% {opacity: 0; left: 50px; top: 100px;}
75% {opacity: 1; left: 100px; top: 50px;}
100% {opacity: 0; left: 50px; top: 0px;}
}
</style>
</head>
<body>
<img src = "rvr.jpg" width = "138" height = "180"
alt = "RVRJC">
<div></div>
</body>
</html>
Transitions and Transformations
With CSS transitions, you can change an element’s style over a specified duration for example, you can
vary an element’s opacity from opaque to transparent over a duration of one second.
CSS3 transformations allow you to move, rotate, scale and skew elements.
transition: transform 4s, opacity 2s;
The transform property uses transformation functions, such as rotate and scale, to perform the
transformations.
The rotate transformation function receives the number of degrees. Negative values cause the element
to rotate left.
A value of 720deg would cause the element to rotate clockwise twice.
The scale transformation function specifies how to scale the width and height. The value 1 represents
the original width or original height, so values greater than 1 increase the size and values less than 1
decrease the size.
<html>
<head>
<title>Transitions</title>
<style type = "text/css">
img
{
margin: 80px;
transition: transform 10s;
}
img:hover
{
transform: rotate(360deg) scale(2, 2);
}
</style>
</head>
<body>
<img src = "rvr.jpg" width = "76" height = "100“ alt = "rvrjc">
</body>
</html>
Skew
The CSS skew() function is used to skew elements in a two-dimensional space.
The skew() element performs a shear transformation (also known as a shear mapping or a transvection),
which displaces each point of an element by a given angle in each direction.
Skewing an element is kind of like taking the points of an element, and pushing or pulling them in
different directions, based on a given angle.
CSS transformations also allow you to skew block-level elements, slanting them at an angle either
horizontally (skewX) or vertically (skewY)
The skew() function works like this:
skew(ax) or
skew(ax, ay)
<!DOCTYPE html>
<html>
<head>
<title>skew</title>
<style>
.skewx {
transform-origin: top left;
transform: skew(20deg, 0);
}
.skewy {
transform-origin: top left;
transform: skew( 0,20deg);
</style>
</head>
<body>
<img src="chess.png" alt="Sample image">
<img class="skewx" src="chess.png" alt="Sample image">
<img class="skewy" src="chess.png" alt="Sample image">
</body>
Transitioning Between Images
We can also use the transition property to create the visually beautiful effect of melting one image into
another.
The transition property includes three values.
First, we specify that the transition will occur on the opacity of the image.
The second value is the transition-duration.
The third value( ease-in-out) is the transition timing-function
<html>
<head>
<title>Melting Images</title>
<style type = "text/css">
#cover
{
position: relative;
margin: 0 auto;
}
#cover img
{
position: absolute; left: 0;
transition: opacity 4s ease-in-out;
}
#cover img.top:hover
{ opacity:0; }
</style> </head>
<body>
<div id = "cover">
<img class = "bottom" src = "rvr.jpg" alt = “rvrjc">
<img class = "top" src = "camel.jpg" alt = “camel">
</div>
</body> </html>

You might also like