Outline the big data presentation screen with the shortest CSS style

See case effect first, see experience and summary again

Some time ago a demo platform, input any mobile phone number, can track its trace, similar to “the name of the people” tracking Ding Yizhen effect, obviously involved in secret, so a special clone, and the back end castration, the current query number written dead for my number, data replaced with static:

Demo address (castration back end)

This article is github and updated continuously at……

Results the preview

↓↓↓ Overview of animation effects: Wait for A moment to load the GIF. ↓↓↓

Implementation of commonly used effects (minimal code)

Again beautiful design, can also be dismantled into a combination of basic effects, here, I put some commonly used effects on the list, and additional code

Elegant presentation

The mask words

Cover with a mask and write on the mask. Need 2 layers, from bottom to top for picture layer, mask layer (upper can write)

<div class='box' >
	<div class='back'></div> <! -- Text layer -->
	<div class='modal'></div> <! -- Template layer -->
</div>
<style>
.box{
	position: relative;
	height: 200px; width: 300px
}
.back{
	background-image: url(http://www.imaoda.com/s/img/github/21.jpg);
	height: 100%; width: 100%;
}
.modal..desc{
	position:absolute;
	height: 20%; width: 100%;
	bottom: 0; color: white
}
.modal{
	background: rgba(0, 0, 5)}</style>
Copy the code

Frosted glass mask

Ground-glass masks, in essence, are two layers, the bottom layer is clear and complete, the top layer is blurred and incomplete, and the displacement of both is exactly the same, so when they are added together, they look like a map. To ensure consistent displacement, we used background: fixed, which fixes the background image relative to the browser.

<div class='box'>
	<div class='blur-modal'></div>
	<div class='black-modal'>Describe the text</div>
</div>
<style>
.box{
	position: relative; height:200px; width:300px;
	background: fixed url(http://www.imaoda.com/s/img/github/21.jpg);
}
.blur-modal{
	position: absolute; height:50px; width:300px;
	top: 150px;
	background: fixed url(http://www.imaoda.com/s/img/github/21.jpg);
	filter:blur(1rem)
}
.black-modal{
	position: absolute; height:50px; width:300px;
	top: 150px;
	background: rgba(0, 0, 2);color: white
}
</style>
Copy the code

Gaussian blur background image

When the film is introduced, the background color is similar to that of the poster, which is actually a magnified corner of the poster + Gaussian blur + black translucent mask effect

<div class='suit' >
	<div class='figure'></div>
	<div class='modal'>Kung fu panda</div>
</div>
<style>
.suit{
	position: relative
}
.figure{
	background: url(http://www.imaoda.com/s/img/github/21.jpg);
	background-size: 200%;
	height: 200px; width: 400px;
	filter: blur(16px)
}
.modal{
	position: absolute;
	height: 200px; width: 400px; top: 0px; left: 0px; 
	background: rgba(0, 0, 5);color: white; text-align: center
}
</style>
Copy the code

Filter also has a special effect that allows the image to naturally blend in with the background at the edges

The picture frame

In the past, we used to do background borders, div nesting, an image for the outer background, and a smaller, centered inner layer, but this method required accurate measurement. A more convenient approach is to use a border-image

<div class='back'><br>Operating status monitoring</div>
<style>
body{
	background: # 003366;
}
.back{
	height: 180px;width: 400px;
	background: url(http://www.imaoda.com/s/img/tpl/content-frame1.png) no-repeat;
	background-size: contain; 
	background-position: center;
	color: white;
	text-align: center;
}
</style>
Copy the code

Technology sense inside luminous border

Lighting inside the frame gives a futuristic look (even better with animation)

<div class='box'>The data overview</div>
<style>
body{
	background: black;padding: 10px
}
.box{
	height: 20rem; width: 40rem; color:white; padding: 1rem;
	box-shadow: 0 0 3rem rgbaAn inset (100200255, 5);background: rgba(0, 0, 3); }</style>
Copy the code

Technology sense picture border

Choose the picture border, you can achieve more effects, of course, the cost is that you need to design in Photoshop first

5% of the border-image determines the thickness of the border

<div class='panel'>normal</div>
<br><br><br>
<div class='panel'>Outer glow</div>
<style>
.panel{
	height: 10rem; width: 20rem; color:rgba(255255255, 9);border: 20px solid transparent;
	border-image: url(http://www.imaoda.com/s/img/tpl/border.png) 5%;
	background:rgba(0, 0, 3); }.panel:last-child{
	box-shadow:  0 0 5rem rgb(0110150)}</style>
Copy the code

Tech sense picture border 2

This is kind of like the border in the game, the effect is a little more heavy

<style>
body{
	background: rgb(22,22,22); padding:10rem
}
.box{
    height: 10rem; width: 30rem;
    border: 1.5 rem solid transparent;
    border-image: url(http://www.imaoda.com/s/img/tpl/border1.png) 15% 5%;
}
</style>
Copy the code

Translucent panel

In science fiction, future technology is translucent

The main use of transparency gradient, a small amount of internal luminescence can increase three-dimensional sense

<div class='panel'>Real-time Monitoring Data</div>
<style>
.body{
    background: url(http://www.imaoda.com/s/img/tpl/sky1.jpg); padding: 10rem
}
.panel{
	height: 12rem; width: 24rem; color:rgba(60240250, 1);font-size: 1.5 rem; padding:1rem;
	border-radius:.5rem;
	border: 1px solid rgba,0.5 (0180220);background: linear-gradient(180 deg, rgba (0180220,0.3),rgba,0.1 (0180220),rgba,0.1 (0180220),rgba,0.3 (0180220));box-shadow: 0 0 2rem rgbaAn inset (0180220, 1)}</style>
Copy the code

Stereoscopic Panel – with title bar

The head of the panel adopts the transition from the top to the bottom, and the panel adopts the translucent black
The side-slide popup animation is even better

<div class='panel'>
	<div class='panel-head'>User behavior analysis</div>
	<div class='panel-body'></div>
</div>
<style>
.panel{
	display: flex; flex-flow: column nowrap;
	height: 23rem; width: 40rem;
	box-shadow: 0 0 1rem rgba(0, 0, 5); }.panel-head{
	flex: 0 0 3rem; font-size: 1.5 rem; color: rgba(255255255, 7);line-height: 3rem; text-align: center;
	background: linear-gradient(RGB (0, 30),rgb,40,70 (0));border: 2px solid rgba(0,90,120,. 3); }.panel-body{
	flex: 1 0 auto;
	background: rgba(0, 0, 3);border: 2px solid rgba(0,90,120,. 4);border-top:none
}
.panel:hover{
	filter:brightness(1.2)}</style>
Copy the code

The Angle of the panel

The corner mark is the same color as the border
The missing rectangle uses the Linear gradient transparency effect

<div class='panel' data-corner='New'></div>
<style>
body{
	padding: 10rem;background: rgba(0, 0,. 9)}.panel{
	height: 12rem; width: 24rem;
	border: 1px solid rgba(22,78,137,1);
	background: rgba(13,35,61,1);
	position: relative;
}
.panel::after{
	content: attr(data-corner);
	display: block; position: absolute; top: 0; right: 0; 
	width: 5rem; padding: 0 1rem; overflow: hidden; text-align: right; color: rgba(255255255, 9);background: linear-gradient(45deg,transparent 0%, transparent 30%, rgba(22,78,137,1)30%.rgba(22,78,137,1) 100%)}</style>
Copy the code

Cambered screen card

Use inner shadow to give the card a sense of dimension and bezel

<div class='box'>
	<div class='card'></div>
</div>
<style>
.box{
	height: 406px; width: 206px; 
	background: linear-gradient(180deg,#116448,#116448);
	overflow: hidden;
	border: 1px solid rgba(0, 0, 2);box-shadow: 0 0 1px black
}
.card{
	height: 400px; width: 200px; margin: 2px; border: 1px solid rgba(0, 0, 2);box-shadow: 0 0 15px black inset;
	background: # 009966;
}
</style>
</style>
Copy the code

Dynamic rotating frame

The two outer rings in the figure are positioned with absolute position, background-position:center in the middle, background-size to adjust the size, and add animation to make them move
The task image is centered by the outer Flex layout

<div class='box'>
    <div class='ring-outer'></div>
    <div class='ring-inner'></div>
    <div class='avatar'></div>
</div>
<style>
.box{
  position: relative; width: 220px; height: 220px;
  display: flex; justify-content: center; align-items: center
}
.ring-inner{
  height: 220px; width: 220px; position: absolute;
  background: url(http://www.imaoda.com/s/img/tpl/ring-inner.png) no-repeat;
  background-size: 90%; background-position: center;
  animation: clockwise 3s linear infinite;
}
.ring-outer{
  height: 220px; width: 220px; position: absolute;
  background: url(http://www.imaoda.com/s/img/tpl/ring-outer.png) no-repeat;
  background-size: 100%;
  background-position: center;
  animation: anti-clockwise 3s linear infinite;
}
.avatar{
  height: 160px; width: 160px;
  background: url(http://www.imaoda.com/s/img/lessons/92.jpg);
  background-size: cover;
  border-radius: 50%
}
@keyframes clockwise{
  100%{
    transform: rotate(360deg)
  }
}
@keyframes anti-clockwise{
  0%{
    transform: rotate(360deg)
  }
}
</style>
Copy the code

Element Background (box)

The aspect ratio of the outer layer of the bearing background is similar to the figure
Background imagebackground-position: center; background-size: contain;Implement adaptive size center
The inner layer, which holds the content, is slightly smaller than the outer frame and is centered by flex on the outer frame
Make the text clear against any background: white text with black glow, black text with white glow

<ul>
	<li> <div class='content'>The first name</div> </li>
	<li> <div class='content'>Second,</div> </li>
	<li> <div class='content'>The third</div> </li>
</ul>
<style>
body{
	background: linear-gradient(0deg,#006666,#003333)
}
ul{
	margin: 20px 10px;
	display: flex
}
li{
	list-style: none; margin: 10px; height: 150px; width: 200px;
	background: url(http://www.imaoda.com/s/img/github/31.png) no-repeat;
	background-position: center; background-size: 100%;
	color: white; text-shadow: 0 0 2px # 222222;
	display: flex; justify-content: center; align-items: center
}
.content{
	height: 80px; width: 120px;
}
</style>
Copy the code

Gradient border

Although the border-image is used, only the Linear gradient is actually passed

.box{
	height: 400px; width: 400px;
	border: 30px solid transparent;
	border-image: linear-gradient(45deg,red,blue) 10%
}
Copy the code

The above methods cannot achieve border-RADIUS, so a double-div method can be adopted, with the bottom gradient layer and the upper content layer. The downside is that size needs to be measured precisely.

<div class='border'>
	<div class='content'></div>
</div>
<style>
.border{
	width: 300px; height: 600px; border-radius: 20px;
	background: linear-gradient(45deg,red,blue);
	overflow: hidden
}
.content{
	width: 260px; height: 560px;
	background: white;
	margin: 20px;
}
</style>
Copy the code

Crystal navigation sidebar

Here is the main set of nav on the left, covering the following points:

White text with black shadow, can avoid the background white display is not clear
Ul unified with the right border (darker than the button RGB +10) and the right 1px #222222 dark gray shadow
Li uses the way of dark down and light up; Hover after using a brighter left dark right bright
Font darkgray, hover after using white, with shadow
The brightness scheme can also be used after the hover
Li’s transition is to show the 3D effect, so transition to [dark, dark, light]
Li: Hover in order to highlight, the transition effect is [dark, bright, bright]

<style>
body{
	background: rgb(14,28,44)}ul {
	text-align: center; width: 6rem; color: darkgray;
	border-right:1px solid rgb(41,51,3); 
	box-shadow: 1px 0 0px # 222222 ; 
}
li {
	list-style: none; font-size: 2rem; 
	border-top:1px solid rgb(91101123);background: linear-gradient(180 deg, RGB (51,61,83),rgb(31,41,63),rgb31,41,63 ()); }li:hover{
	background: linear-gradient,54,86 (90 deg, RGB (34),rgb(36171232).rgb(36171232));color: white;
	text-shadow: 1px 1px 1px black
}
</style>
Copy the code

Hover appears in the navigation sidebar

The inner glow gives the impression of a bulge, and can also be used when the menu is highlighted, but as long as the top and bottom sides are illuminated (with a gradient background)

Gradient using 180, bright dark bright, bright part of the three channel brightness can be added 20

<style>
li{
	height: 3rem; width:10rem; line-height: 3rem; 
	color: rgba(255255255, 8);cursor: pointer; list-style: none; 
	padding-left: 1rem;
	background: rgb,21,37 (8);border-bottom: 3px solid rgba(0, 0, 5);transition: margin-left .5s;
}
li:last-child{
	border: none
}
li:hover{
	background: linear-gradient(180 deg, RGB (28,41,57),rgb,21,37 (8),rgb,21,37 (8),rgb(28,41,57));
	margin-left: 2rem;
}
</style>
Copy the code

Stereoscopic button pressing effect

Before pressing, the button floats and has a shadow; When pressed, the button goes down, the shadow disappears and the volume shrinks (further away from the field of view).

.box{
	height: 100px; width: 300px; background: green; margin: 2rem;
	box-shadow: 0 0 1rem gray;
	cursor: pointer;
	transition: all .3s;
	border-radius: 50px;
}
.box:active{
	box-shadow: 0 0 0px gray; transform: scale(0.99)}Copy the code

Metallic transition

45 degree Angle, deep on both sides, shallow in the middle

.box{ height: 3rem; width: 5rem; border-radius: 1rem; Background: linear gradient(45deg, RGB (31,89,146), RGB (35,175,230), RGB (29,136,203))}Copy the code

So consider the button transition carefully. When the button is pressed, change the outer shadow to the inner shadow, and scale(0.95). Plus a transition of.1s, it’s even better

<style>
.box{
	height: 3rem; width: 3rem; 
	line-height: 2.8 rem; text-align: center; 
	color: white; 
	text-shadow: 1px 1px 5px black;
	font-weight: bold;
	font-size: 2rem;
	border-radius:.5rem;
	background: linear-gradient(225 deg, RGB (31,89,146),rgb(31,89,146) 10% ,rgb(35175230).60%.rgb(35175230).70%.rgb(29136203));box-shadow: 0 0 5px black
}
.box:hover{
	box-shadow: 0 0 5px gray inset;
	transform: scale(.95)
}
</style>
Copy the code

Texture progress bar

The progress bar should be bright in the middle and dark on the sides, giving it a rounded look, and the progress bar container should have an inner shadow to give it a recessed feel

<div class='box'>
	<div class='progress'></div>
</div>
<style>
.box{
	height: 2rem; width: 30rem; 
	box-shadow: 0 0 5px white inset;
	border: 1px solid black;
	background:# 003366
}
.progress{
	width: 1rem;
	height: 2rem;
	background: linear-gradient(180deg, #00CCCC,#00CCCC,#009999);
	transition: all 3s;
	box-shadow: 0 0px 5px white
}
.box:hover .progress{
	width: 30rem
}
</style>
Copy the code

Gold surprise font

The box {color: RGB (253219 hanjie xuebao/transactions); font-size: 3rem; text-shadow: 1px 2px 2px black }Copy the code

Dividing line

Sometimes we just need a line in the border, and the color should not be too conspicuous.

You can use the border directly
The border color is black, but the opacity is only 0.2 (to dissolve in the background color)

<ul>
	<li>The first name</li>
	<li>Second,</li>
	<li>The third</li>
</ul>
<style>
body{
	background: linear-gradient(0deg,#006666,#003333)
}
ul{
	margin: 20px 10px;
	display: flex
}
li{
	list-style: none; width: 100px; line-height: 40px; color: white; text-align: center;
	border-right: 2px solid rgba(255255255, 2); }</style>
Copy the code

Short vertical bar in front of list

Add a leading child for title with the pseudo-before class
This child element has an inline-block layout and is sized using em

<div class='title'>User data</div>	
<style>
body{
	background: linear-gradient(0deg,#006666,#003333)
}
.title{
	font-size: 2rem; line-height: 5rem; color: white
}
.title::before{
	content: ' ';
	display: inline-block;
	width:.2em; background: yellow; 
	height:.8em; margin-right:.5em;
}
</style>
Copy the code

Text color

Text color with pure white, pure black, too eye-catching. Often we choose “less white” or “less black” colors to soften the text. If the choice of color is troublesome, you can use pure black or pure white, plus transparency, blend into the background, appear much softer.

rgba(255255255,9.)
Copy the code

Prompt effect

Highlighted area

Highlighting areas is usually used to highlight user selection. Common methods are as follows:

A modified RGBA color of the background, right amount raised each component (or A component adjusts its transparency) | | modified filter: the value of brightness
Consider using Transfrom: Scale (1.1) to zoom in && to add shadows
Add a very small amount of transition to increase the transition effect

Regional dim

Dim parts of the area and reduce the user’s attention, such as completed or unlocked:

Modify the RGBA color of the background, a moderate amount of lower each component | | modified filter: brightness
Absolutely define a black translucent mask (mask click) and place it on top of it. Use translucent + Gaussian blur to enhance the effect, and use after/before pseudo-classes to achieve (ATTR) batch Settings

Rotating light effect

If there is a ready-made PS to make the light better, low version of the light production method:

Create a triangle in powerpoint and select Linear Transition, yellow at the top and yellow transparent at the bottom
The triangle is copied in two to make 8 sub-shapes, then n 8’s are copied and rotated to make light

The rotating light uses two elements: Animation: My 5S Linear 0S Infinite, Transform: Rotate (360deg). Dynamically change the duration of the animation, such as 2s, to achieve rotation acceleration

<div class='box'>
	<img class='light' src="http://www.imaoda.com/s/img/tpl/light.png" alt="">
	<div class='btn'>start</div>
</div>
<style>
body{
	background: rgb(14,28,44)}.box{
	position: relative; height: 400px; width: 400px; 
	display: flex; justify-content: center; align-items: center;
}
.light{
	width: 200px; height: 200px;	
	filter: drop-shadow(0 0 5px yellow);
	animation: rotate linear 3s infinite;
}
.btn{
	position: absolute; 
	top: 50%; left: 50%; transform: translate(50%, 50%);padding:3rem;
	background:green; color: white; border-radius: 50%;
}
@keyframes rotate{
	100%{
		transform: rotate(360deg)
	}
}
Copy the code

The light element is positioned static and the Flex is centered. If the top/left+ Tranlate is centered, it conflicts with the rotate element
Button elements are positioned with Absolute, top/left+ Tranlate center (because Absolute elements are not controlled by Flex)

Spotlight effect

An animation of the illuminated circular border gradually shrinking:

The outer layer is fixed size, and the inner layer is absolutely centered using a Flex layout
Animate the width and length
Border-radius: 50% the percentage is fixed and the circle is maintained

<div class='box'>
	<div class='circle'></div>
	<div class='btn'>start</div>
</div>
<style>
.box{
	position: relative;
	height: 300px; width: 300px;
	display: flex; justify-content: center; align-items: center;
}
.circle{
	height: 200px; width: 200px;
	border-radius: 50%;
	border: 10px solid yellow;
	filter: drop-shadow(0 0 10px white);
	animation: shrink 1s infinite;
}
.btn{
	position: absolute; 
	top: 50%; left: 50%; transform: translate(50%, 50%);padding:3rem;
	background:green; color: white; border-radius: 50%;
}
@keyframes shrink{
	100%{
		height: 10px; width: 10px; }}</style>
Copy the code

Light box prompts

When the user clicks or hover, the border highlights and lights up to prompt

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
<style>
li{
	display: inline-block; height: 200px; width: 150px;
	background: url(http://www.imaoda.com/s/img/github/sgs.jpg);
	background-size: 100%;
	box-shadow: 0 2px 2px # 222222;
	border: 2px solid transparent;
	border-radius: 5px;
	filter: brightness(7);cursor: pointer;
	transition: all .2s
}
li:hover{
	box-shadow: 0 0 30px yellow;
	border: 2px solid yellow;
	transform: translate(0-10%);filter: brightness(1);
}
</style>
Copy the code

Finally, let’s reinforce the basics

RGBA color

You can add the opacity behind the normal RGB color. 0 is completely transparent and 1 is completely opaque. Available in:

color
background
gradient
box-shadow
text-shadow

Rgba (123222, 2, 5)Copy the code

The gradient

Linear Gradient: Angle, color 1, Color 2… Color n. % can be appended, if omitted, then evenly divided

Linear - gradient (45 deg, rgba (0,0,255,. 1) 0%, rgba (0255, 0, 1) 90%, rgba (255, 0, 6) 100%)Copy the code

Radiant Gradient: Color 1, Color 2… Color n. % can be appended, if omitted, then evenly divided

Linear - gradient (rgba (0,0,255,. 1) 0%, rgba (0255, 0, 1) was 90%, 100% rgba (255, 0, 6))Copy the code

The filter filter

Filter filters all the contents of the current element (including child elements, including frame). If you want to filter just the image, you need to use Position to position the text element above it.

<! -- Filters can be overlaid: first blur, then gray -->
filter: blur(.1rem) grayscale(.5);
Copy the code

Common filters include:

Blur: The default value is 0rem
Opacity: The default value is 1 and the opacity is 0
Brightness, default 1, full black 0, overexposure 2+
Saturate: Saturation, default 1, gray 0, gorgeous 2+
Contrast: contrast, default 1, full gray 0, black and white 2+
Grayscale: Overlay grayscale, default 0, gray 1
Sepia: Overlay brown, default 0, brown 1
Invert: 0, full gray 0.5, invert 1
Drop-shadow: indicates the box-shadow of the transparent area with no shadow

Border-image Border of the image

In the past, to achieve the border-image effect, you need to use a slightly larger circle of the image as the base

border: 30px solid transparent;
border-image: url(b.png) 10%; 
Copy the code

Background-attachment fixes the background

If fixed, the background does not follow scroll

background-blend-mode

Multiply by six

A partially rounded rectangle

Border-radius can be set for the upper left, upper right, lower right, and lower left respectively. So you can set up a partial rounded rectangle

.box{
height: 400px; width: 400px; background: green;
border-radius: 0 2rem 0 2rem 
}
Copy the code

Matter shadow/glow

Box-shadow Specifies the right shadow, lower shadow, Gaussian blur, and color. Among them, shadow is solid color, layer sense is slightly strong, generally add fuzzy can. The blur spreads out in four directions, and

.box{
height: 400px; width: 400px; background: black; margin: 2rem; padding: 2rem; color: lightgreen; font-size: 28px;
box-shadow: 0 0 1rem gray;
}
Copy the code

The glow is the same as the shadow, but the color is light (white/yellow, etc.) and the environment is dark. The effect of border-RADIUS is more natural

Inner shadow, to highlight the sunken feel, just add the inset keyword at the end of box-shadow

Font light/black frame

Text-shadow, just blur, white light to make the font glow, black light to make the white font fit the image background

.box{
	height: 400px; width: 400px; background: black; margin: 2rem; padding: 2rem; color: lightgreen; font-size: 28px;
	text-shadow: 0 0 .5rem yellow
}
Copy the code