Some tips on css
1. Vertically centered, horizontally centered
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outer {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.inner {
position: absolute;
top: 50%;
/* left: 50%; */
-webkit-transform: translateY(-50%);
-o-transform: translateY(-200px);
transform: translateY(-50%);
/* -webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%); */
width: 200px;
height: 200px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outer {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
/* -webkit-transform: translateY(-50%);
-o-transform: translateY(-200px);
transform: translateY(-50%); */
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
width: 200px;
height: 200px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Note that this method cannot be used horizontally and vertically together. Centering will overwrite.
If you want to center both horizontally and vertically, you can consider the grid layout, which is very powerful. You can read my other article.
grid layout
2. Background gradient animation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.liner {
width: 500px;
height: 100px;
margin: 0 auto;
background-image: linear-gradient(green,yellow);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 1s;
}
.liner:hover {
background-position: 0 0;
}
</style>
</head>
<body>
<div class="liner"></div>
</body>
</html>
In the initial picture, the
mouse passes
over and transitions to another appearance within 1 second, which makes people look animated.
Third, make fuzzy text
Use color: transparent; and text-shadow: 0 0 5px rgba(0,0,0,0.8);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.blur {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid red;
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
/* .text {
background-image: url(images/banner5.jpg);
background-size: 100% 100%;
filter: blur(2px);
} */
</style>
</head>
<body>
<div class="blur">
哈哈哈哈哈哈哈
<!-- <div class="text">哈哈哈哈哈哈哈</div> -->
</div>
</body>
</html>
Let the image and the text blur together.
First, the effect
of blurring is not added. Blur processing is added.
Use filter: blur(2px);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.blur {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid red;
/* color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.8); */
color: #333;
}
.text {
background-image: url(images/banner5.jpg);
background-size: 100% 100%;
filter: blur(2px);
}
</style>
</head>
<body>
<div class="blur">
<!-- 哈哈哈哈哈哈哈 -->
<div class="text">哈哈哈哈哈哈哈</div>
</div>
</body>
</html>
