CSS commonly used in a few simple effects

Recently browsing online data, found some of their own never used CSS, so recorded, in some cases may be able to use.

1, the simple operation of CSS

We usually use CSS to specify static results, and dynamic results, such as height, location and so on, you need JS to dynamically compute the assignment, but in fact, CSS itself can do a simple operation, mainly to use the Calc function.

. div{Width:calc (100%-50px);}

2, using CSS to achieve text blur effect

In PS we can use filters to make the text look blurry, which is not the same as transparency, we can implement in CSS.

p{color:transparent Text-shadow: #111 0 0 5px;}

3, using CSS to create a high aspect ratio fixed elements

In the front-end development, especially when writing the response layout page, we always want the elements inside to maintain the same aspect ratio, so as to avoid the element deformation, and to achieve this, we can by giving the parent element at the bottom of the inner margin and child element absolute positioning to achieve.

<div style= "width:100%; position:relative; padding-bottom:20%; " >
<div style= "Position:absolute; left:0; top:0; right:0; Bottom:0;background-color: #ccc; " >
The text will be folded as the div changes.
</div>
</div>

You can try to find out more CSS effects.

CSS3 Filters make icons dimmed

First on the HTML code:

<a href= ' class= ' icon ' ></a>
CSS code:

. icon{
-webkit-filter:grayscale (100%);
-moz-filter:grayscale (100%);
-ms-filter:grayscale (100%);
-o-filter:grayscale (100%);
Filter:grayscale (100%);
Filter:gray;
}
. icon:hover{
Filter:none;
-webkit-filter:grayscale (0%);
}

In this way we just need to upload a color picture can realize the mouse to move into color, remove the effect of gray.

Text-overflow:ellipsis implementation ellipsis effect

Using this CSS style is very simple, just need three code, for example, we add this attribute to our H3 tag:

H3{text-overflow:ellipsis//Ellipsis form
White-space:nowrap; Display all characters on one line
Overflow:hidden; Overflow hidden
}
It should be noted that the three code is indispensable, or not achieve the desired effect. Note: The element that uses this attribute should be given a fixed width, otherwise it will overflow.