How to use box-shadow property in CSS?

This property is used to attach one or more shadows to an element.

Syntax: – 

box-shadow: h-shadow v-shadow blur spread color inset

  • h-shadow – The position of the horizontal shadow. Negative values are allowed.
  • v-shadow – The position of the vertical shadow. Negative values are allowed.
  • blur – The blur distance.
  • Spread – Size of shadow. Negative values are allowed
  • color – The color of the shadow
  • none – No shadow. Default
  • inset – Changes the shadow from an outer shadow (outset) to an inner shadow
  • div {box-shadow: 2px 2px 5px red;}
  • div {box-shadow: 2px 2px 5px red, 5px 5px 8px blue;}
Tagged : / / / / / / /

CSS Overflow: What It Is & How It Works?

Overflow

This property is used to define what happens if content overflows an element’s box. It means it will define whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area. This property only works for block elements with a specified height. We can set this property to visible (default), scroll, hidden, auto.

Ex:-

p { overflow: hidden; }

Diagnosis: overflow:hidden; (submenu truncated by theme CSS) - UberMenu  Troubleshooter Diagnosis

Overflow-x

This property is used to define whether to clip content, render a scroll bar, or display overflow content of a block-level element when it overflows at the left and right edges. We can set this property to visible (default), hidden, scroll, auto.

Ex: –

p { overflow-x: hidden; }

Overflow-y

This property is used to define whether to clip content, render a scroll bar, or display overflow content of a block-level element when it overflows at the top and bottom edges. We can set this property to visible (default), hidden, scroll, auto.

Ex: –

p { overflow-y: hidden; }

overflow-x hidden doesn´t let my content that is inside go out - Stack  Overflow
Tagged : / / / / /