A few small-function examples of pure CSS production

CSS provides a style description for the HTML markup language that defines how elements are displayed. CSS is a breakthrough in the field of web design. It enables you to modify all the page elements associated with a small style update. Now on the basis of CSS and new CSS3, in the front-end of the work of CSS is still very important, below we will share with you some examples of small CSS production.

Css@supports

When using features that some browsers might not have, every good front-end developer needs to perform a feature test. Feature testing has always been done by JavaScript, and many people use Modernizr, a great utility made up of many well-tested cases, to do feature testing. A new API: @supports, anyway, has appeared in front of developers, it allows you to use CSS to do feature testing. Here are some simple examples of how @supports works:

The code is as follows:

/* Basic usage */@supports (Prop:value) {/* More styles */}/* Real usage */@supports (Display:flex) {p {Display:flex;} }/* testing Prefixes too */@supports (display:-webkit-flex) or (display:-moz-flex) or (Display:flex) {section {display:- Webkit-flex;display:-moz-flex;display:flex;float:none;}}

This new @supports feature, also has a corresponding JavaScript version, but has expired, we look forward to using it earlier!

CSS Filters

Write a service to modify the hue of the picture, and then you can sell it to Facebook for $ billions of. Of course, that's a simple thing to do, but it's not a science to write image filters. I went to Mozilla's first week to write a small program (won the award, the sum, I just casually say it) used some JS-based math with canvas to create image filters, but now we can use CSS to create image filters.

The code is as follows:

/* Simple filter */.myelement {-webkit-filter:blur (2px);} /* Advanced Filter */.myelement {-webkit-filter:blur (2px) grayscale (. 5) Opacity (0.8) hue-rotate (120deg);}

This type of filter only changes the way it looks, and it doesn't use the filter when you save or export the image, but it works well when you need to beautify or manipulate the poster.

POINTR Events and Bricking Clicks

The Pointr Events property of CSS provides a way to effectively disable an element, and because of this, clicking a link through JavaScript does not trigger a click event:

The code is as follows:

/* do nothing when clicked or activated */.disabled {pointer-events:none;} /* This would _not_ fire because of the Pointer-events:none application */document.getelementbyid ("Disabled-element"). Add EventListener ("click", Function (e) {alert ("clicked!");});

In the above example, the Click event will not be triggered because of the CSS pointer-events value. I've found a huge role in it, and you don't need to check every classname or property to make sure some elements are disabled.

Collapse, expand Menu

CSS allows us to create transitions and animations, but many times we need JavaScript libraries to help us modify things and control animations. A very popular animation is folding, expand the menu effect, many people do not know that only with CSS can be achieved!

The code is as follows:

/* Slider in open state */.slider {overflow-y: hidden;max-height:500px;/* Approximate max height */transition-property: All;transition-duration:. 5s;transition-timing-function:cubic-bezier (0, 1, 0.5, 1);} /* Close it with the "closed" class */.slider.closed {max-height:0;}

A clever use of max-height allows elements to be folded and unfolded as desired effects.

CSS Counters

The meaning of the term "counter" on the web often makes us giggle, but the CSS counter is another thing that makes us giggle. CSS counters allow developers to add a counter using: Before and: After to the specified element:

The code is as follows:

/* Initialize the counter */ol.slides {counter-reset:slidenum;} /* Increment the counter */ol.slides > li {counter-increment:slidenum;} /* Display the counter value */ol.slides li:after {content: "[" Counter (Slidenum) "]";}

You often see CSS counters being used on slide effects, and on lists like the contents of a form.

Unicode CSS style name

There are many CSS best practice documents, all of which start with how to name CSS styles. You're never going to see a document say it. Use Unicode notation to name your style:

The code is as follows:

. ಠ_ಠ{border:1px solid #f00; background:pink;}. {background:lightgreen;border:1px solid green;}

Please don't use these symbols. Unless you can!

CSS Circle

CSS triangles are a technical work, and so are CSS circles. By abusing CSS Border-radius, you can create a perfect circle!

The code is as follows:

Circle {border-radius:50%;width:200px;height:200px;/* Width and height can be anything, as long as they ' re equal */}

You can add gradients to your circle, and you can even use CSS animations to get your circle moving! CSS is about to have more unified APIs available to these graphs, but now you can use this method to create a circle.

The above is a few pure CSS production of small functional examples, I hope to help everyone.