Эффект тени

Простая тень

.boxShadow1 {
  width: 80%;
  padding: 1em;
  border: 1px solid #ccc;
  box-shadow: 10px -10px 10px 5px rgba(0, 0, 0, .2);
}


Тень вокруг div

.boxShadow2 {
  width: 80%;
  padding: 1em;
  box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);
}


Снизу (под блоком div)

.boxShadow3 {
  width: 80%;
  padding: 1em;
  border: 1px solid #ccc;
  box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2);
}


По бокам (справа и слева)

.boxShadow4 {
   width: 80%;
   padding: 1em;
   box-shadow:
   0 1px 4px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;
}


Многослойный блок с помощью box-shadow

.boxShadow5 {
  width: 80%;
  padding: 1em;
  border: 1px solid #ccc;
  box-shadow: 6px 6px #989898, 12px 12px #6c6666;
}


.boxShadow6 {
  width: 80%;
  padding: 1em;
  box-shadow:
   0 0 0 1px silver,
   0 -20px 0 -10px coral,
   20px 0 0 -10px darkturquoise,
   0 20px 0 -10px gold,
   -20px 0 0 -10px chartreuse;
}


.boxShadow7 {
  width: 80%;
  padding: 1em;
  box-shadow:
   0 0 0 1px rgb(194, 192, 184) inset,
   0 5px 0 -4px rgb(255, 255, 255),
   0 5px 0 -3px rgb(194, 192, 184),
   0 11px 0 -8px rgb(255, 255, 255),
   0 11px 0 -7px rgb(194, 192, 184),
   0 17px 0 -12px rgb(255, 255, 255),
   0 17px 0 -11px rgb(194, 192, 184);
}


.boxShadow8 {
  width: 80%;
  padding: 1em;
  box-shadow:
   0 0 0 7px #60B88D,
   0 0 0 14px #90CDAF,
   0 0 0 21px #BFE3D1;
}


Разноцветная CSS рамка

.boxShadow9 {
  width: 80%;
  padding: 1em;
   box-shadow:
   -15px -15px 2px -5px rgba(160,82,45,.5),
   -15px 15px 2px -5px rgba(0,255,255,.5),
   15px -15px 2px -5px rgba(255,0,0,.5),
   15px 15px 2px -5px rgba(255,255,0,.5);
}


.boxShadow10 {
  width: 80%;
  padding: 1em;
    box-shadow:
   -20px 20px 0 -17px #fff,
   20px -20px 0 -17px #fff,
   20px 20px 0 -20px #c27153,
   0 0 0 2px #c27153;
}


Добавить комментарий