Effects of CSS ✍🏻
Css shadow effects:-
With Css you can add shadow to text and to elements.In this Chapter you will learn about the following:-
Properties:-
Css text-shadow:-
The text-shadow property is used to set the text shadow around a text.
Syntax:-
.kim
{
text-shadow:5px 5px 6px red;
}
.sim
{
text-shadow:-5px -5px 6px green;
}
.bob
{
text-shadow:0px 0px 6px yellow;
}
Coding:-
<html>
<head>
<style type="text/css">
.tim
{
text-shadow: 5px 5px 6px red;
}
.sim
{
text-shadow: -5px -5px 6px green;
}
.rim
{
text-shadow: 0px 0px 7px skyblue;
}
</style>
<title>
</title>
</head>
<body>
<h1 class="tim">Honesty is the best policy!!
</h1>
<h1 class="sim">Honesty is the best policy!!
</h1>
<h1 class="rim">Honesty is the best policy!!
</h1>
</body>
</html>
Output is:-
CSS Box-shadow :-
The box-shadow property is used to set the box shadow around a box.
Syntax:-
.bob
{
Box-shadow:5px 5px 5px skyblue;
}
Coding:-
<html>
<head>
<style>
.bob
{
background-color: skyblue;
height:150px;
width: 150px;
box-shadow: 5px 5px 5px red;
}
.kim
{
background-color: Yellow;
height:200px;
width:200px;
box-shadow: 5px 5px 5px orange;
}
</style>
<title>
</title>
</head>
<body>
<div class="bob"></div>
<br><br>
<div class="kim"></div>
</body>
</html>
Output is:-
Css multiple columns:-
Coding :-
<html>
<head>
<style>
.king
{
column-count:3;
text-align: Justify;
column-gap: 35px;
column-rule: dashed 1px grey;
background-color: yellow;
}
</style>
<title>
</title>
</head>
<body>
<div class="king"><p style=color:green;><b><i>Video provides a powerful way to help prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page and text box designs that complement each other. For example, you can add a matching cover page, header and sidebar. Click Insert, then choose the elements you want from the different galleries.
</b></i></p></div>
</body>
</html>
Output is:-
Css gradients:-
Two types of gradients:
1.linear gradients(goes down/up/left/right/diagonally).
Syntax:-
Div
{
Background-image:linear- gradient(to right,red, yellow, orange, blue,RGB(0,255,0);
}
Coding :-
<html>
<head>
<style type="text/css">
.bob
{
height: 250px;
width: 340px;
background-image: linear-gradient(to bottom,red, yellow,orange)
}
</style>
</head>
<body>
<div class="bob"></div>
</body>
</html>
Output is:-
2.Radial gradients(defined by their center).
Syntax:-
Div
{
Background-image:radial-gradient(red, blue);
}
Coding:-
<html>
<head>
<style type="text/css">
.kim
{
height: 200px;
width: 200px;
background-image: radial-gradient(yellow,orange,red,pink,purple)
}
</style>
</head>
<body>
<div class="kim"</div>
</body>
</html>
Output is:-
Css layout- The position property:
The position property are:-
The position property specifies the type of positioning method used for an element.
There are four different position values:
1. Sticky:-positioned based on users scroll position.
2.Relative:-element is relative to itself.(The top,right, bottom,and left will work).
3.Fixed:-position relative to browser.(removed from flow).
4. Static:-default position (top,right, bottom,left).
5. Absolute:-element is relative to itself.(Top,right, bottom,left will work)
Css layout-The display property:
The display property are:-
Display: inline/block/inline block/none
Inline:-Takes only the space required by the element.(no margin/no padding).
Block:-Takes full space available in width.
Inline:-block:-Similar to inline but we can set margin and padding.
None:-To remove element from document flow.
Comments
Post a Comment