Here we will cover some interesting topics with example.
The topics which we will discuss that is mentioned in the below:
- Shadow property to any block level elements
- Round corners
- Animations
- Scroll vertically
- After & before...etc
1) For shadow we will see only 'box-shadow' property and example.
First how your screen will look after coding in css that screenshot attached in the below
For the above box shadow use following code and run on browser to see result
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: orange;
text-align:center;
line-height:100px;
box-shadow: 10px 10px 5px grey;
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
2) Round corners will come with CSS border-radius property
Go with the below border-radius screenshot and try code after that.
The topics which we will discuss that is mentioned in the below:
- Shadow property to any block level elements
- Round corners
- Animations
- Scroll vertically
- After & before...etc
1) For shadow we will see only 'box-shadow' property and example.
First how your screen will look after coding in css that screenshot attached in the below
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: orange;
text-align:center;
line-height:100px;
box-shadow: 10px 10px 5px grey;
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
2) Round corners will come with CSS border-radius property
Go with the below border-radius screenshot and try code after that.
Code for the round corner (border-radius) is:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 200px;
background-color: #f44336;
border-radius: 15px 50px;
margin:25% auto;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
3) For animation use @keyframes rule and after that apply animation name.
In the below code after @keyframes you will get word 'mymove' that is the name of the animation.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
</style>
</head>
<body>
<div style=""></div>
</body>
</html>
4) For vertical scrolling suppose you have fixed heigh=200px and width=150px and you want your page description should not go out side of the div at that time use property 'overflow:auto'.
More information available in the below code use that and you will get the idea what I am talking about.
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:150px; height:200px; overflow:auto;
}
</style>
</head>
<body>
<div class="page-description">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</body>
</html>
Above code is useful for responsive site.
5) Before & After: Suppose you want to display double quotes (") automatically at the beginning of the paragraphs and in the ending of the paragraphs so its very easy to do that with the help of ::before Pseudo-element and ::after Pseudo-element.
Use the below code to get better understanding.
<!DOCTYPE html>
<html>
<head>
<style>
p::before {
content: '"';
}
p::after {
content: '"';
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
I thing you guys found above examples useful for your personal use and if you have any query or suggestion please use below comment section.
No comments:
Post a Comment