A cheat sheet of the Latest CSS3 Features for Modern Web Design

navya , Credit to  volkotech-solutions Mar 01

This concise Cheat Sheet covers selectors, box models, layout, Animations, typography, etc... With basic syntactical representation along with examples.

Short intro to CSS3

CSS3 (Cascading Style Sheets, level 3) is the latest version of CSS, which is an extension of CSS2. It was first released in 1999 and is ongoing, it has been divided into several different modules, and each module addresses a specific area of styling and layout, such as text effects, color, backgrounds, and layout.

All new features in CSS

CSS3 introduces several new features and improvements over previous versions of CSS, some of the notable new features are:

  • Selectors: CSS3 allows for a more advanced and accurate selection of elements on a page, including the ability to select elements based on their attributes and relationships to other elements.
  • Box Model: CSS3 introduces new layout modules like Flexbox, Grid, and Multi-column layout which makes it easier to create complex responsive layouts.
  • Backgrounds and Borders: CSS3 allows for more advanced control over backgrounds and borders, including rounded corners, background gradients, and background images.
  • Text Effects: CSS3 allows for more advanced text effects, such as text shadows, rounded corners, and text gradients.
  • 2D/3D Transforms: CSS3 allows for 2D and 3D transformations of elements, including rotation, scaling, and skewing.
  • Animations: CSS3 allows for the creation of animations using keyframes, which makes it possible to create complex animation sequences without JavaScript.
  • Multiple Columns: CSS3 allows for the creation of multi-column layouts for text and other elements.
  • User Interface Elements: CSS3 allows for the creation of various UI elements like tool tips, modal dialogs, and forms that previously required JavaScript.
  • Media Queries: allow you to apply CSS styles based on conditions like the screen size and the device.
  • Flexbox: Flexbox allows you to make responsive layouts easily, It is a one-dimensional layout system that can be used to create complex, responsive layouts with minimal code.

Let us understand the new properties of css3 with the following table,

In Deep:

New Property



Font face

@font-face {
@font-face {
    font-family: 'name-of-your-font-family';
    src: url('/folder-path/name-of-the-font-family.woff');
    src: url('/folder-path/name-of-the-font-family.ttf')
    font-weight: normal;
    font-style: normal;
    font-display: swap;
font-family: 'name-of-your-font-family', sans-serif;

Border radius

border-radius: 10px 11px 12px 13px;
    border-top-left-radius: 10px;
    border-top-right-radius: 11px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 13px;

Box Shadow

  [horizontal offset] 
  [vertical offset] 
  [blur radius] 
  [spread radius] 
  box-shadow: 10px 10px 5px 0px gray;


Background size

background-size: <value> <value>;
  background-size: 100px 50px;
  background-size: 50% 75%;
  background-size: cover;
  background-size: contain; 
  background-size: 50px; /* width and height */
  background-size: contain; /* width and height */
  background-size: 50% 75%; /* width and height */

Border image

border-image: <source> <slice> 
              <width> <outset> 
  border-image-source: url(border.png);
  border-image-slice: 10% 20% 30% 40%; /* top, 
  right, bottom, left */
  border-width: 20px;
  border-image-outset: 10px;
  border-image-repeat: stretch; /* (default) 
  stretch the image to fill the border */

Text shadow

text-shadow: <horizontal offset> 
             <vertical offset> 
             <blur radius> <color>;
  text-shadow: 2px 2px 3px gray;
  text-shadow: 2px 2px 3px gray, -2px -2px 3px red;

Text overflow

text-overflow: <value>;
.container {
  overflow: hidden; /* Truncate the overflow */
  white-space: nowrap; /* Do not wrap the text */
  width: 150px; /* Fixed width */
  text-overflow: ellipsis; /* Add an ellipsis */

Box sizing

box-sizing: <value>;
.content-box {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid black;
    box-sizing: content-box;
.border-box {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid black;
    box-sizing: border-box;
* {
    box-sizing: border-box;
color: <color value>;
  color: red;
  color: #ff0000; /* red */
  color: rgb(255, 0, 0); /* red */
  color: rgba(255, 0, 0, 0.5); /* red with 
  50% transparency */
  color: hsl(0, 100%, 50%); /* red */
  color: hsla(0, 100%, 50%, 0.5); /* red with 
  50% transparency */

Media query

@media <condition> {
   /* CSS rules go here */
@media screen { 
  /* styles for screens */ 
@media (min-width: 768px) {
   /* styles for screens with width at least 768px */
@media (aspect-ratio: 16/9) {
   /* styles for screens with 16:9 aspect ratio */
@media (min-resolution: 300dpi) {
   /* styles for screens with resolution 
        300 dpi or higher
@media (orientation: portrait) {
   /* styles for devices in portrait mode */ 
@media (min-width: 768px) and (min-resolution: 300dpi) {
   /* styles */ 
transition: <property> <duration> 
  transition: background-color;
  transition: background-color 2s;
  transition: background-color 2s ease-in;
  transition: background-color 2s ease-in 0.5s;
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: ease-in;
  transition-delay: 0.5s;
.container {
  display: flex; 
  /* enables flexbox layout */
  /* other flexbox properties */
.container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
/*we have to use flex properties as per need*/
.container {
  display: grid; 
  /* enables grid layout */
  /* other grid properties */
.container {
  grid-template-columns: repeat(3, 1fr);
.container {
  grid-template-rows: 100px 200px 300px;
.container {
  grid-gap: 10px;
.container {
  justify-items: center;
  align-items: center;
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
.item {
  grid-area: header;
background: linear-gradient
  background: linear-gradient(to right, red, blue);

  background: radial-gradient (<shape> <size> 
            at <position>, 
            <color-stop-1>, <color-stop-2>, ...);
opacity: <value>;
  opacity: 0.5; 
  /* Element will be semi-transparent */
  color: rgba(255, 0, 0, 0.5);
  /* red with 50% transparency */
  visibility: hidden;
 /* Element will be invisible but still take up space */
animation: <name> <duration> 
@keyframes changeColor {
  from { background-color: red; }
  to { background-color: blue; }

/* Apply the animation to an element */
.example {
  animation: changeColor 2s ease-in-out;
/* usage of animation */
.example {
  animation-name: changeColor;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
transform: <function> <value>;
  transform: translate(50px, 100px);
  transform: rotate(45deg);
  transform: scale(2, 1);
  transform: skew(30deg, 10deg);
  transform: matrix(1, 0, 0, 1, 50, 100);
  transform: translate3d(50px, 100px, 150px);


transform: translate(<x>, <y>);
  transform: translate(50px, 100px);
  transform: translateX(50px);
  transform: translateY(100px);

CSS 3 Browser compatibility

CSS3 is a standard that is gradually being adopted by web browsers. However, not all browsers support all of the features of CSS3 and some features may require vendor prefixes to work in certain browsers. But we can resolve this issue by using vendor prefixes and fallback styles, better we can check the property status on the caniuse website for better results.



Read Next