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

New Property

Syntax/Representation

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')
    format('truetype'), 
    url('/folder-path/name-of-the-font-family.eot') 
    format('eot'), 
    url('/folder-path/name-of-the-font-family.svg') 
    format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/*usage*/
.selector{
font-family: 'name-of-your-font-family', sans-serif;
}

Border radius

border-radius: 
border-top-left-radius 
border-top-right-radius 
border-bottom-right-radius  
border-bottom-left-radius

.selector{
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

box-shadow: 
  [horizontal offset] 
  [vertical offset] 
  [blur radius] 
  [spread radius] 
  [color];

.selector{
  box-shadow: 10px 10px 5px 0px gray;
}

Background size

background-size: <value> <value>;

.selector{
  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> 
              <repeat>;

.seector{
  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>;

.selector{
  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>;

.selector{
  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> 
            <timing-function> 
            <delay>;

.selector{
  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
            (<angle>deg, 
             <color-stop-1>, 
             <color-stop-2>,
             ...); 

.selector{
  background: linear-gradient(to right, red, blue);

  background: radial-gradient (<shape> <size> 
            at <position>, 
            <color-stop-1>, <color-stop-2>, ...);
}

opacity: <value>;

.selector{
  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> 
           <timing-function> 
           <delay> 
           <iteration-count> 
           <direction> 
           <fill-mode>;

@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>;

.selector{
  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);
}

Translation

transform: translate(<x>, <y>);

.selector{
  transform: translate(50px, 100px);
  transform: translateX(50px);
  transform: translateY(100px);
}