HTML may be the basic language to create webpages, but cascading style sheets (CSS) have revolutionized the way we make websites. From its inception in the ‘90s, CSS has evolved into a richer and much more exciting style sheet language for online use.
If you haven’t used CSS for quite a long time, you would be surprised these five things that the language can accomplish:
1. Vertical Sliding
JavaScript has become a default go-to language for web developers who want complex user interfaces on their websites. Animation, for instance, is easily handled by JavaScript despite being only a visual feature.
Did you know that you can trigger a slide-up or slide-down action using CSS? Based on this demo page, you can use CSS to toggle or trigger a sliding effect through the “transition-“ series of CSS codes. You may set the kind of transition and the duration in order to achieve the exact animated movement that you need.
2. Circles
Making circles in the past requires the use of image editors, but CSS is now capable of creating them! The technique is actually an exploitation of the “border-radius” property and setting a definite width and height of equal value. Conventional visual properties may be used together with this feature, so that you can define the color and other visual attributes of the circle.
3. Filters
CSS filters have the ability to change the rendering of an image or video as it appears on a webpage. Conventional image editing features that normally exist only on software can now be applied live on an online page.
Some of the filters available for CSS include brightness, contrast, invert, grayscale, opacity, sepia, and saturate. All you need to do is set a value between 0 and 1 for each filter. This new CSS feature also allows you to render blur and hue-rotate qualities on an image.
4. @supports
Nope, that’s not a X mention, just to be clear. This code snippet allows front-end web developers to test the website layout and features on various browsers and make sure that the pages display properly.
According to this article by David Walsh, CSS @supports can do basic property and value checks, multiple checks and nested conditionals, and checks for lack of support (when used with the “not” keyword). Web developers can now use CSS instead of JavaScript to test website features.
5. Pointer Events
As a feature that may prove to be annoying for some users but highly useful for website owners, CSS pointer events can give the web developer to control how the mouse pointer and click works. Unlike most CSS snippets that change visual elements, the “pointer-events” feature acts like JavaScript by preventing clicks to do anything (even on top of links), disabling any hover visual triggers, and making the mouse pointer disappear.
