Several examples of small functions made with pure CSS

CSS provides a style description for the HTML markup language, defining how elements in it are displayed. CSS is a breakthrough in the field of web design. It can be used to modify a small style to update all page elements related to it. Nowadays, CSS3 is newly released based on CSS. CSS is still very important in front-end work. Below we will share with you some examples of small functions made with CSS.

CSS@supports

Every good front-end developer needs to conduct feature testing when using features that may not be available in some browsers. Feature testing has always been done in JavaScript, and many people use Modernizr, an excellent utility made of many well-tested cases, to do feature testing. A new API: @supports, however, has appeared for developers, which allows you to do feature testing with CSS. 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 it has expired, we are looking forward to it Use it early!

CSS Filter

Write a service that changes the color tone of an image, and then you can sell it to Facebook for billions of dollars. Sure, that's a no-brainer, but writing image filters is not a science. A small program I wrote in my first week at Mozilla (won an award, eh, I'm just saying it) used some JS-based math to create image filters using canvas, but now we can create images using CSS Filtered.

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 original appearance of the image. The said filter is not used when saving or exporting the image, but when you need to This is useful when beautifying photos or working with posters.

Pointr Events and Bricking Clicks

The CSS Pointr Events property provides a way to effectively disable an element. Because of this, through JavaScript, clicking a link will not trigger a Click event:

The code is as follows:

/* do nothing when clicked or activated */.disabled { pointer-events: none; }
/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {alert("Clicked!");});

In the above example, the click event will not fire due to the CSS pointer-events value. I've found this to be a huge benefit, you don't need to check className or attributes everywhere to make sure some element is disabled.

Collapse and expand menu

CSS allows us to create transition effects and animations, but many times we need JavaScript libraries to help us modify some things and control animations. A very popular animation is the folding and expanding menu effect. Many people don’t know that it can be achieved using only CSS!

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 can allow elements to collapse and expand according to the desired effect.

CSS Counter

The term “counter” often makes us giggle around the internet, but CSS counters are another thing that makes us giggle even more. thing. CSS counters allow developers to use :before and :after to increment a counter on specified elements:

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 used in slideshow effects , and like on a list of form contents.

Unicode CSS Style Names

There are many CSS best practices documents, and they all start with how to name CSS styles. You will never see a document that says to use unicode symbols to name your styles:

The code is as follows:

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

Please do not use these symbols. Unless you can do it!

CSS Circle

CSS triangle is a technical activity, and the same is true for CSS circle. By abusing CSS border-radius, you can create perfect circles!

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 circles, and you can even use CSS animations to make your circles move! CSS is about to have more unified APIs for these shapes, but for now you can create circles this way.

The above are some examples of small functions made with pure CSS. I hope they can help everyone.

Related recommendations:

CSS3 tips for drawing various basic graphics

Use CSS 3 to create long shadow

A few useful css function tips

The above is the detailed content of Several examples of small functions made with pure CSS. For more information, please follow other related articles on the PHP Chinese website!