11 Amazing CSS You Shouldn't Miss

11 Amazing CSS You Shouldn't Miss

A list of amazing things that CSS can do!

1. box-decoration-break

This CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

2. attr()

We can retrieve values of the selected element in CSS by using attr(). This method could be really helpful with accessibility purposes.

3. backface-visibility

This CSS property sets whether the back face of an element is visible when turned towards the user. Thinking of a card flip UI?

4. conic-gradient

Gradients are a wonderful thing. You might've used to style backgrounds with linear gradients but do you know we can use pure css to create pie charts with the help of conic-gradient!

To better understand how conic-gradients, reference the MDN docs on it

5. filter

Who needs photoshop filter effects when you have CSS filters. 🙃

Filter functions applies graphical changes to the appearance of an input image. The effects we can achieve are as follows - blur, brightness, contrast, grayscale, hue-rotate, opacity, invert, sepia, saturate, drop-shadow.

drop-shadow filter is pretty amazing. It lets you apply drop shadow to the input image.

6. mix-blend-mode

This CSS property sets how an element's content should blend with the content of the element's background or its parent.

Amazing things can be achieved by mixing blend modes and filters with images and text. Learn more on MDN Docs.

7. first-letter

One of my favourite things in books and magazines are the beautiful drop-caps. We can create drop with first-letter pseudo-element.

8. shape-outside

This CSS property provides a way to customise wrapping adjacent inline content around complex objects rather than simple rectangular boxes.

Open the example in a different tab and try changing the width of the window and notice how the text wraps around the image.

9. writing-mode

This CSS property sets whether the lines of text are laid out horizontally or vertically. We can have these values-

  • horizontal-tb - Content flows horizontally from left to right, vertically from top to bottom.
  • vertical-lr - Content flows horizontally from left to right, vertically from top to bottom.
  • vertical-rl - Content flows horizontally from right to left, vertically from top to bottom.

Checkout this this example to see it in action.

10. Adding gradient to text

This is achieved with the combination of -webkit-background-clip: text and -webkit-text-fill-color: transparent CSS properties.

11. Smooth scroll snap

scroll-snap-type CSS property sets how snap points are applied on the scroll container.

This example shows vertical(y) scroll with value mandatory. MDN docs does a great job on explaining how to use other values such as proximity and horizontal scroll(x).


Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size.

Creative CSS Button Effect using CSS Keyframe - CSS Tricks

In this video, you'll look at Creative CSS Button Effect using CSS Keyframe - CSS Tricks