Some Uncommon facts of CSS

Photo by Clark Tibbs on Unsplash

Some Uncommon facts of CSS

Cascading Style Sheets (CSS) is a powerful tool for designing and styling web pages. While many web developers are familiar with the basics of CSS, there are many hidden features of CSS that can make styling and coding much easier and more efficient.

In this post, we will explore some of the hidden features of CSS that can help you improve your CSS skills.

1-CSS Custom Properties

CSS Custom Properties are variables that allow you to reuse values throughout your CSS code. Custom Properties are declared with a double dash (--), followed by the property name, and the value is assigned using the var() function.

For example, let's assume you want to use a particular color throughout your website. You can declare a Custom Property for that color:

:root {
  --primary-link-color: #222;
}

And then use it in your CSS code:

a {
  color: var(--primary-link-color);
}

If you want to change the color after, you can simply update the value of the Custom Property in one place, and it will get updated throughout your webpage.

2-CSS Grid

CSS Grid is a layout tool that allows you to create complex layouts with ease. With this Grid, you can define rows and columns, and place items anywhere on the grid.

Here is an example of a simple grid:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.single-item {
  background-color: red;
  color: #fff;
  padding: 10px;
  text-align: center;
}

In this example, we create a container with a grid layout that has three columns and a gap of 10 pixels between each column. We also define a class for the single-item that will be placed on the grid.

<div class="container">
  <div class="single-item">A</div>
  <div class="single-item">B</div>
  <div class="single-item">C</div>
  <div class="single-item">D</div>
  <div class="single-item">E</div>
  <div class="single-item">F</div>
</div>

3-CSS Filters

CSS Filters allow you to modify the appearance of an element by applying visual effects such as blurring, color shifting, or brightness adjustments. The filter property accepts filter functions, and you can chain multiple filters together for more complex effects.

Here is an example:

.item {
  background-image: url('image.jpg');
  filter: grayscale(100%);
}

In this example, After applying a grayscale filter to an image element, making it appears in black and white.

4-CSS Animations

CSS Animations allow you to add motion and interactivity to your web page. You can define an animation by specifying a set of keyframes and applying them to an element using the animation property.

Here is an example:

.item {
  animation: spinner 3s linear infinite;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

In this example, we define an animation called "spin" that rotates an element by 360 degrees over a period of 2 seconds.