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 out of sight and extend beyond the simple display of HTML elements.
This article provides an insight into of the nifty capabilities of the CSS language. There are hundreds of cool, creative CSS functions out there that can add style and flair to your development. We have pinpointed 9 creative and quirky CSS functions that you can apply to make you, as a developer, stand out from the crowd.
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.
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.
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
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.
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.
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.
If you are operating on Safari, view the code here and understand how the frosted glass effect can be applied.
9. Using HTML elements as Background Images
This crafty CSS function is supported by Firefox and allows the element()CSS function to use an arbitrary HTML element as background images.
An ideal situation to use this CSS tooltip would be to extract an image in an HTML5 <canvas> and then utilize this as the background.
Check out everything you need to know about the element() function and its application here.
Have you tried using these nifty CSS functions? Also, what clever CSS functions would you add to the list that you use regularly? Add to the discussion below with your thoughts.