Why shouldn’t we be fans of CSS? 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 just JavaScript. Let’s examine some recent CSS enhancements and insights in the way i can be used. Some examples include blurred borders, setting a dark/ light mode switch (with a little help from JavaScript) and more.
CSS Features That Are Changing Web Design
The design landscape has changed a lot in recent years. We’re equipped with new and powerful tools — CSS custom properties, CSS shapes and CSS writing-mode, blurred borders in CSS, and sophisticated partitioning with CSS Grid – to name a few.
What is sophisticated partitioning with CSS Grid?
In the article written by Rob Weychert, he experimented with CSS grid to create a Tinnitus Tracker. He designed the grid pattern and then he worked on the partitioning of the grid.
These grid patterns mainly have the following 3 objectives:
- Maintain a (somewhat) consistent whitespace.
- Give the appearance of randomness.
- Don’t forget about prime numbers.
Also adding CSS Grid, partitioning and typography as a cherry on top altogether gives a different look to the website and reaches to a different level of advancement. We encourage readers to follow the above link to learn more about how this was accomplished.
Blurred Borders in CSS
If we want to target an element and just visually blur the border of it. There is no simple, built-in feature we can apply. But we can get it done with a little CSS trickery.
After giving a code this effect, one can enhance it with rounded corners, extend support so it works cross-browser, what the future will bring in this department and what other interesting results can get starting from the same idea!
This article has step by step code details to show how we can add the blurred effect to the CSS.
New CSS features
In the article written by Daniel Crisp is about exploring the most exciting new properties coming to CSS. These include:
- Fixing layout problems
- Exploring feature queries
- Use ‘not’ for a cleaner outcome
We encourage readers to follow the above link to learn more. We also came across these resources which may help you better understand how CSS is being used currently.
Additional Resources:
- Where Do You Learn HTML & CSS in 2019?
- 9 Cool Things You Can Do With CSS Functions
- 18 Cool Things You Won’t Believe Were Built Using CSS
- How TO – Blurred Background Image
For those who prefer videos:
- How to Blur Images – HTML & CSS
- Transparent HTML Login Form with Blur Background | Transparent Login Form with HTML & CSS
Every day things change in web design and development. We hope you are excited about these new approaches. CSS has certainly exceeded expectations of what was once considered achievable.
We hope you found these resources and overview useful. We always look forward to your comments and feedback (whether you are a member or not).