Stíny

CSS umožňuje přidávat stíny k textu a k celým elementům (boxům), což dodává webovým stránkám hloubku a vizuální realismus.

• text-shadow

  Přidává stín k textu. Můžete definovat:

  • X-offset: Horizontální posun stínu. Kladná hodnota doprava, záporná doleva.
  • Y-offset: Vertikální posun stínu. Kladná hodnota dolů, záporná nahoru.
  • Blur radius (volitelné): Míra rozostření stínu. Čím vyšší hodnota, tím rozmazanější stín.
  • Color (volitelné): Barva stínu.

  Můžete aplikovat i více stínů oddělených čárkami pro složitější efekty.

  h1 {
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Posun 2px doprava, 2px dolů, rozmazání 4px, průhledná černá */
  }
  .bily-stin {
      color: #333;
      text-shadow: 1px 1px 0px white, -1px -1px 0px white; /* Efekt bílého okraje */
  }

• box-shadow

  Přidává stín kolem celého boxu (elementu). Vlastnosti jsou velmi podobné text-shadow:

  • X-offset: Horizontální posun stínu.
  • Y-offset: Vertikální posun stínu.
  • Blur radius (volitelné): Míra rozostření stínu.
  • Spread radius (volitelné): Rozšíření nebo zmenšení stínu. Kladná hodnota stín rozšíří, záporná ho zmenší.
  • Color (volitelné): Barva stínu.
  • inset (volitelné): Přemění vnější stín na vnitřní stín (uvnitř elementu).

  .karta {
      box-shadow: 5px 5px 15px rgba(0,0,0,0.2); /* Posun 5px X/Y, rozmazání 15px, průhledná černá */
      padding: 20px;
      background-color: white;
      border-radius: 8px;
  }
  .tlacitko-stisknute {
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3); /* Vnitřní stín pro efekt stisknutí */
  }

Stíny se často používají ve spojení s pseudo-třídou :hover k vytvoření interaktivních efektů, kdy se stín objeví nebo se změní, když uživatel najede myší na element.