Few Awesome CSS Snippets I Recently Learned

#css #beginners #webdev

Center the absolute positioned content

.center{
  top : 50%;
  left : 50%;
  transform : translate(-50%,-50%);
}

Codepen: https://codepen.io/3sanket3/pen/LYYOWwV

Maintain aspect ratio of the container

.container{
  padding-bottom:56.4%; /* aspect ratio 16:9*/
}

The percentage should be calculated as: 16:9(w:h) = h*100/w => 56.25%. Similarly,

1:1 => 100%
4:3 => 75%

Codepen: https://codepen.io/3sanket3/pen/dyyZWMX

Truncate the text

.truncate{
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Codepen : https://codepen.io/3sanket3/pen/OJJOmqB

Set width as the available rest of the space

It is useful when you have two adjacent containers. One has a fixed width and the other one should adjust according to the available remaining space.

.fix-width-container{
  float: left;
  width: 200px;
}
.adjustable-container{
  width: calc(100%-200px);
}

Using CSS Variable

// Declaring variable at root level, you can set it at common parent level
:root{
  --left-pane-width : 200px; 
}

.fix-width-container{
  float: left;
  width: var(--left-pane-width);
}

.adjustable-container{
  width: calc(100%-var(--left-pane-width));
}