CSS commonly used in a few simple effects

Source: Internet
Author: User

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.

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%);
. icon:hover{
-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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.