featuretalented-coder-working-with-computer-language-3G9XC76

Drop shadows using css

CSS | drop-shadow() Function

drop-shadow( offset-x offset-y blur-radius spread-radius color ) 
  1. offset-x: horizontal offset
  2. offset-y: vertical offset
  3. blurr-radius: blur radius
  4. spread-radius: spread radius
  5. color: drop shadow

Example:

.playicon{ filter: drop-shadow(5px 5px 5px #222); width: 104px; height: 103px; }
productplaybuttonnew

CSS | box-shadow property

box-shadow: h-offset y-offset blur spread color |none|inset|initial|inherit; 
  1. h-offset: horizontal offset. Positive is the right side and negative is the left side
  2. y-offset: vertical offset. Positive sets shadow below the icon and negative sets shadow above the icon
  3. blur: blur of shadow
  4. spread: Size of the shadow
  5. color: colour of the shadow

Example:

.playicon2{
box-shadow: 5px 10px 10px 10px black;
}

productplaybuttonnew

CSS | text-shadow property

text-shadow: h-offset y-offset blur spread color |none|inset|initial|inherit; 
  1. h-offset: horizontal offset. Positive is the right side and negative is the left side
  2. y-offset: vertical offset. Positive sets shadow below the icon and negative sets shadow above the icon
  3. blur: blur of shadow
  4. spread: Size of the shadow
  5. color: colour of the shadow

Example:

.mytextshadow {
text-shadow: 5px 5px 2px lightgray;
}

This is my text shadow

Add a Comment

Your email address will not be published. Required fields are marked *