What you didn't know about CSS3 (Part 1) - Add scenery to your components with CSS3

Write in front: a lot of front-end articles are actually talking about JS and some JS framework things, but in fact, CSS3 has a lot of fun things, you can add some bright colors to your CSS components, this article introduces a few more fun effects, hope to have a spark to attract the effect

1.3D landscape dynamic dice

The online demo

1. Basic knowledge of css3D and animation

2, to create a 3D scene, first place a. Box div parent container, place a. Dice div in the box, and then place 6 div inside it, respectively representing the 6 sides of the dice.

<div class="box">
 <div class="dice">
   <div class="surface front ">anyway style(text or img)</div>
     <div class="surface left">anyway style(text or img)</div>
     <div class="surface right">anyway style(text or img)</div>
     <div class="surface bottom">anyway style(text or img)</div>
     <div class="surface top">anyway style(text or img)</div>
     <div class="surface back">anyway style(text or img)</div>		
   </div>
</div>
Copy the code

2. Set the CSS style

.dice {
	width:200px;
	height:200px;
	position:relative;
	margin:100px auto;
	transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
}
Copy the code

The transform-style attribute specifies how to render nested elements in 3D space. By default, its children do not render 3D, so we need to add preserve-3D to preserve their 3D effects. Next, we make each side of the cube:

.face {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: # 666;Opacity: 0.8; font-size: 60px; text-align: center; line-height: 200px; font-weight: bold; color:#fff;
    border: 1px solid #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.face img {
    width: 100%;
    height: 100%;
}

.front {
    transform: rotateY(0) translateZ(100px);
}

.back {
    transform: translateZ(-100px) rotateY(180deg);
}

.left {
    transform: rotateY(-90deg) translateZ(100px);
}

.right {
    transform: rotateY(90deg) translateZ(100px);
}

.top {
    transform: rotateX(90deg) translateZ(100px);
}

.bottom {
    transform: rotateX(90deg) translateZ(-100px);
}
Copy the code

In the code above, we use the Rotate () and translateZ() of the Transform to transform each side, with the shift being half the width. Note the rotate() and translateZ() order, for example, the left side, we rotate 90 clockwise around the Y axis, and then we rotate 150 in the Z direction, if you rotate first and then you have a different result, you can try that. Finally, we animate div.cude:

@-webkit-keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); }}Copy the code

2. Image reflection effect

1, Box-reflect (Method 1)

(1) Box-reflect is the easiest way to reflect an image.

Box-reflect:

?

?

Parameter Description:

: indicates the direction of the reflection. Possible values: above, below, left, right. : represents the distance between the reflection and the element; : represents the mask image, can be URL address, gradient

(2) Specific code

Simply place an image:

! [](images/example.jpg)

(3) Set the style

Use the box-reflect method directly:

img {
   -webkit-box-reflect: below 0 -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 20%, rgba(250, 250, 250, .3));
}
Copy the code

In this method, a gradient is used as a mask image, which looks like the following:

Setting the URL attribute for Box-reflec allows you to customize the reflection with another image:

img {
   -webkit-box-reflect: below 0 url(images/star.png);
}
Copy the code

Note: Since the Box-reflect method is currently only supported by webKit engine browsers, the second method described below can be used for compatibility purposes

2. Pseudo-element Method (Method 2)

(1) The pseudo-element method essentially copies the image, uses transform and then flips it, and finally uses a gradient to act as a mask layer over the flipped image.

(2) Specific code

Slightly different from the first method, we wrap the image around a div:

<div class="box-reflect">
	![](images/example.jpg)
</div>
Copy the code

(3) Set the style

Clone the image and flip it over:

.box-reflect {
    position: relative;
  width: 150px;
    float: left; margin-right: 40px; } .box-reflect img { width: 100%; height: 100%; } .box-reflect:before { background: url(images/example.jpg) no-repeat; background-size: 100% 100%; transform: scaleY(-1); /* Set opacity enhancement effect */ opacity: 0.5; /* Set transparency in IE */. filter: alpha(opacity='50');
}
.box-reflect:before, .box-reflect:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 0;
    content: "";
}
Copy the code

Note: Transform :scaleY(-1) is the same as transform:rotateX(-180deg)

Then, add a gradient that overlays the reflection. The value of the gradient can be adjusted according to the actual effect:

Box-reflect :after {background-image: -moz-linear-gradient(bottom, RGB (0,0,0) 20%, rgba(0,0,0) 90%); box-reflect:after {background-image: -moz-linear-gradient(bottom, RGB (0,0,0) 20%, rgba(0,0,0) 90%); Background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, RGB (0,0,0) 30%); Background - image: - its - linear - gradient (bottom, RGB (0, 0) 20%, rgba,0,0,0) (0 90%); filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=# 000000);
}
Copy the code

Three. Heartbeat effect

1. First draw a static red heart with CSS

#heart {
   position: relative;
   width: 100px;
   height: 90px;
}
#heart:before,
#heart:after {
   position: absolute;
   content: "";
   left: 50px;
   top: 0;
   width: 50px;
   height: 80px;
   background: red;
   -moz-border-radius: 50px 50px 0 0;
   border-radius: 50px 50px 0 0;
   -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
           transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
      -moz-transform-origin: 0 100%;
       -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
           transform-origin: 0 100%;
}
#heart:after {
   left: 0;
   -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
           transform: rotate(45deg);
   -webkit-transform-origin: 100% 100%;
      -moz-transform-origin: 100% 100%;
       -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
           transform-origin :100% 100%;
}
Copy the code

Finally, add animation to the heart

.heartbeat {
    -webkit-animation-name: heartbeat;
	-webkit-animation-duration: 0.83s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
}
@keyframes heartbeat {
	from {
	    opacity:0.1;
    }
    50% {
	    opacity:1;
    }
    to {
	    opacity:0.1;
    }
}
Copy the code

4. 3 d button

1. Create a div

Place an element to be set as a 3D button, using the A tag:

<a href="#" class="3dButton">3dButton</a>

Setting CSS Styles

The 3D effect relies mainly on box-shadow and the new color attribute HSL. (1) box-shadow: H-shadow V-shadow blur spread color inset

H-shadow: Required. Position of horizontal shadows. Negative values are allowed. V-shadow: Required. Position of vertical shadows. Negative values are allowed. Blur: Optional. Blur the distance. Spread: Optional. Shadow size. Color: optional. Shadow color. See CSS color values. Inset: Optional. Set outset shadow to Internal shadow.

(2) HSL(H,S,L) HSL color mode is a color standard in the industry. HSL is the color representing the three channels of hue, saturation and brightness. This standard almost includes all colors that human vision can perceive, and it is one of the most widely used color systems at present.

H: Hue. 0(or 360) is red, 120 is green, 240 is blue, and other values can be used to specify colors. The value ranges from 0 to 360 S: Saturation. The value ranges from 0.0% to 100.0% L: Lightness. The value ranges from 0.0% to 100.0%

After understanding the basics, let’s look at how the 3D button effect is implemented.

box-shadow: Inset rgba(255, 254, 255, 0.6) 0 0.3em, inset rgba(0, 0, 0, 0.15) 0-0.1em, HSL (0, 0%, 60%) 0.1em 3px, HSL (0, 0%, 45%) 0.3em 1px, RGBA (0, 0, 0, 0.2) 0.5em 5px;Copy the code

As shown in the code above, there are 5 layers of shadows. Layers 1 and 2 are inner shadows to achieve a smooth upper and lower sides. You can also remove these two layers; The fifth layer is just a normal shadow; The third layer is to be more realistic, dispensable; The key is layer 4, which implements a real projection similar to border.

To make the button click more perfect, the main thing here is to make the solid shadow disappear:

.button:active { box-shadow: Inset rgba(255, 255, 255, 0.6) 0 0.3 em.3em, inset rgba(0, 0, 0, 0.2) 0-0.1 em.3em, rgba(0, 0, 0, 0.4) 0.1em 1px, Rgba (0, 0, 0, 0.2) 0.2em 6px; transform: translateY(.2em); }Copy the code

Finally, the wind shape of the button in the example, just understand the advanced use of border-radius: 1em 5em/5em 1em;

The horizontal radius and the vertical radius are respectively.

5. Gradient color border

1. HTML code

<div class="gradient-border gradient-border-more"> <span></span> ! [](images/eg.jpg) </div>Copy the code

Notice that the SPAN tag here is the key and the trick to this effect.

2. Set the CSS style

We implement gradient borders with the :before and :after pseudo-elements of gradient-border and span.

.gradient-border {
	position:relative;
	width:200px;
	height:200px;
	background:gray;
}
.gradient-border:before,
.gradient-border:after,
.gradient-border span:first-child:before,
.gradient-border span:first-child:after {
	content:""; position:absolute; background:red; -webkit-transition:all .2s ease; transition:all .2s ease; } /* top border */. Gradient-border :before {width:0; // Initial width top:-2px; right:0; height:2px; } /* right border */. Gradient-border :after {width:2px; height:0; // Initial height right:-2px; bottom:0; } /* Border-bottom */. Gradient-border span:first-child:before {width:0; // Initial width :2px; bottom:-2px; left:0; } /* left border */. Gradient-border span:first-child:after {width:2px; height:0; // Initial height top:0; left:-2px; }Copy the code

Gradient-border :before and :after, and span :before and :after are used to create the border.

3, add mouse hover animation

The mouse moves up the animation, the principle is to change the width and height of the border.

.gradient-border:hover:before,
.gradient-border:hover span:first-child:before {
	width:calc(100% + 2px);
}
.gradient-border:hover:after,
.gradient-border:hover span:first-child:after {
	height:calc(100% + 2px);
}
Copy the code

/* add transition delay */. Gradient-border-more :hover:before, .gradient-border-more:hover span:first-child:before { -webkit-transition-delay:.2s; transition-delay:.2s; }Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

What you didn’t know about CSS3 (Part 1) – Add scenery to your components with CSS3

What you didn’t know about CSS3 (Part 1) – Add scenery to your components with CSS3

Related Posts

The road to self-redemption for the two-year frontrunner: 2021 summary

Nuxt. Js

JS object