9 cool things you can do with CSS functions

CSS has gone way beyond simple aesthetics to create incredible functionality. Here are 9 cool you can do with CSS that you're probably unaware of.

11. sep. 2019 • 4 minut branja

Posodobljeno dne 21. jan. 2020 s strani Dunja J.

Dunja J.

@ddquince

Copywriter, Content Writer, Proofreader, Marketer.

Kopiranje v odložišče ni uspelo, poskusite znova po spremembi vaših dovoljenj.

Skopirano v odložišče.

How web developers can use CSS to its full potential

The potential of CSS (Cascading Style Sheets) has exceeded expectations of what was once considered achievable with the language. Thanks to the continued adaptation of

developers

, the capabilities of CSS have improved vastly beyond the simple display of HTML elements.

Why should we be fans of CSS? Because it constantly revolutionizes itself while trying to strive for its renowned form of simplicity. The end result is the creation of browser functionality that is arguably above and beyond what can be created with JavaScript.

This is why we're going to provide an insight into the nifty capabilities of CSS. There are hundreds of cool, creative CSS functions out there that can add style and flair to your development — we've decided to cover 9 of them today in a bid to help you stand out from the rest of the developer crowd.

All of these functions are fun to play around with and you can implement them without the need to utilize JavaScript. Try out the tutorials and links below to get the best out of these CSS functions.

1. Typewriter effect

The CSS-only typewriter effect is an inventive, clever way to animate typing and add a bit of life to any webpage. Although it is not an entirely novel concept, the animations are continuing to progress. There are now plenty of really cool typewriting animations you can play around with to enhance your creativity.

This tutorial

provides a comprehensive analysis on how you can add typewriting animation text to your webpage. It provides all the code required and also provides a great comparison to what is capable in JavaScript.

2. Animations with cubic-bezier()

The

cubic-bezier()

function allows developers to exert better control over CSS animations. Typical CSS animation functions often do not have the polished look and feel that developers are after. This is where an easing function, such as Cubic Bezier, comes to the rescue.

Essentially, the function defines a continuous curve and has the effect of smoothing down the start and end of an animation. Don’t worry if you are a little confused, this

excellent tutorial

provides an in-depth analysis of the Cubic Bezier function and explains how it can add sharpness to your animation.

Featured Work in Website Design

Web App Design for E-Learning

by balasinski

Space Themed Website Design

by syrwebdevelopmen

Website design for App Development

by skrbic81

Website Redesign

by creativemz2004

3. Intelligent grids with the calc() function

Grids are an excellent creative and design tool. They add great visual impact to any modern website. If you are just starting out with grids,

here is a great tutorial

to help you understand how CSS can be implemented to construct grids.

If you are further advanced, the

calc()

function provides a great complementary method to improve the application of grids. Unfortunately, the use of fluid grids has become synonymous with errors. The introduction of the

calc()

function has looked to iron out a lot of these issues. Check out how this function, combined with flexbox,

dramatically improves grid layout.

4. Bring into line position:fixed Elements with CSS calc()

The application of the

calc()

function is not limited to grids. It is also extremely useful for aligning elements that hold a static position.

It is often difficult to get the

position:fixed

element to line up with something how you want it to. We found

a nifty tutorial

, which shows the dexterity of the

calc()

function. In this example, the function is utilized to manoeuvre a floating bubble to sit aligned within a content wrapper. This CSS function is a great asset when you have an awkward value that needs proper setting.

5. Pure CSS Tooltips

Pure CSS allow the creation of tooltips without the need for additional HTML elements or JavaScript. CSS Tooltips are great at achieving simplification and there are several tricks you can utilize to up your game as a developer.

The best place to start for Pure CSS tooltips is to watch this

YouTube video

. You you can learn how to use

::before

and

::after

CSS selectors, which have the ability to enclose text or content onto a page from CSS before or after the content of the element.

If you wish to progress your Pure CSS tooltips further, to create a more universal result,

this blog

improves upon the solutions that are offered in the video.

6. Custom Data attributes and the attr() Function

The

attr()

function gives the value of an attribute of the selected elements. Data attributes are plain HTML attributes, which make them reachable from CSS.

Here is a

great example

that shows how you can use generated content in CSS with the

attr()

function. The example goes into detail and explains how you can use attribute selectors in CSS to modify designs according to the data presented.

Freelance Website Design Experts

Seabit Media

@seabitmedia

30 USD / hour

4,9

(5486 ocen)

PHP

JavaScript

XML

.NET

Website Design

Visit profile

Jaroslav N.

@prestashop24

50 USD / hour

5,0

(217 ocen)

PHP

JavaScript

Photoshop

WordPress

Facebook Marketing

Visit profile

Sumanta K.

@qubeweb3squbeweb

20 USD / hour

4,9

(100 ocen)

JavaScript

Graphic Design

SEO

Mobile App Development

iPhone

Visit profile

gurjeetsingh344

@gurjeetsingh344

30 USD / hour

5,0

(331 ocen)

PHP

ASP

JavaScript

.NET

Website Design

Visit profile

7. CSS Counters

CSS counters allow developers to manipulate the look of content according to its location. Notably, every browser type supports this CSS function, even though it is used infrequently. CSS counters are great for numbering headings, pagination and displaying numbers below imaging.

An example of CSS counters in action is

this great video

. It demonstrates how to create dynamic multi-level tables and lists without JavaScript. It is a quality starting point to understand the capabilities of CSS counters.

8. Frosted Glass with CSS filters

The frosted glass effect, supported by Safari, utilizes the background filter and allows developers to generate the effect of blurring everything behind an element. It works by copying everything that will be blurred. Then, using a CSS or SVG blur filter, the blurred content is cropped to the correct size.