Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the practical CSS code snippets". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the practical CSS code snippets"?

Text loading. Animation

Html

Loading in progress.

Css

Dot {display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align:-.25em; overflow: hidden;} dot::before {display: block; content:'.\ A..\ A.floor; white-space: pre-wrap; animation: dot 2s infinite step-start both;} @ keyframes dot {33% {transform: translateY (- 2em);} 66% {transform: translateY (- 1em) }}

If you do not understand the code in the picture above, please look at the figure below. I will comment out a line of code and you will understand. It turns out to be the dot element, which moves cyclically along the Y axis. Hiding it allows you to see the loaded animation.

Border implementation frame

When you need such an upload file button, do you consider whether to find a designer to get a picture, or to write one yourself?

As a matter of fact, CSS is also very simple to write.

Add pictures .pictures {position: relative; display: inline-block; width: 76px; height: 76px; color: # ccc; border: 2px dashed; / * border dashed line * / text-indent:-12eme; / * make the text invisible * / transition: color .25s; / * hover event: color gradient animation * / overflow: hidden; margin: 50px 100px } / * make the + sign style with before/after pseudo-classes * / .cards: before, .codes: after {content:'; position: absolute; top: 50%; left: 50%;}. Examples: hover {color: # 34538b;} .codes:: before {width: 20px; border-top: 4px solid; margin:-2px 00-10px;} examples: after {height: 20px; border-left: 4px solid Margin:-10px 0 0-2px;}

Irregular projection filter

When we want to add a projection to a rectangle or other shape that can be generated with border-radius, we can use box-shadow to solve the problem, as shown below:

However, when the element adds some pseudo-elements or translucent decorations, box-shadow is somewhat inadequate, because border-radius shamelessly ignores the transparent parts. Such situations include the following:

1. Translucent image, background image, or border-image (such as an old gold frame)

2. The element has dotted, dashed, or translucent borders, but no background (or when background-clip is not border-box)

3. Dialogue bubbles, whose small tails are usually generated from pseudo elements

4. Almost all the corner effects

5. Shapes generated by clip-path.

Let's look at this example: html code

Irregular projection

Css style

Div {position: relative; display: inline-flex; flex-direction: column; justify-content: center; vertical-align: bottom; box-sizing: border-box; width: 8em; padding: .5em; height: 5em; margin: .6em; background: # 0cc071; color: # fff; / * box-shadow: .1em .3em rgba Now the pseudo class is unshadowed * /-webkit-filter: drop-shadow (.2em .2em .2em rgba); filter: drop-shadow (.2em .2em .2em rgba);} .speech {border-radius: .3em;} .speech: before {content:'; position: absolute; top: 1em; right:-.7em; width: 0; height: 0 Border: 1em solid transparent; border-left-color: # 0cc071; border-right-width: 0;}

From the picture above, we can see that box-shadow can't handle it, but drop-shadow has done it. Why is that?

The difference is obvious. Why is this the case? Here I use the div tag, as we all know, the div tag is a block tag, to put it bluntly is a box model, refers to a region, box-shadow attributes can only be added to the outside of the box model, so the internal things will not be added, it will become the appearance of the above picture, or white part in the middle. Drop-shadow is different. It shadows all the opaque areas, which is equivalent to a real projection.

Self-adaptive pop-up frame realized by css

Often see some Dialog in the web page, for example, some pages click login registration will jump out of a pop-up box to display the login registration page, the following use css to complete a self-adaptive, regardless of the size of the window, can always maintain horizontal vertical center dialog.

I am the content.

Css style

.c-pupup {position: fixed; top:0; bottom: 0; left: 0; right: 0; background: rgba; text-align: center; white-space: nowrap; z-index: 99;} .c-pupup:after {content:''; display: inline-block; height: 100%; vertical-align: middle;}. Background-color: # fff; display: inline-block; vertical-align: middle Border-radius: 6px; text-align: left; white-space: normal; width: 400px; height: 250px;}

Thank you for your reading, these are the contents of "what are the practical CSS code snippets?" after the study of this article, I believe you have a deeper understanding of what practical CSS code snippets have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.