Na stronie   W katalogu
     
Rozumiem I Akceptuje (X)
Ta strona używa plików cookies aby lepiej spełnić Państwa oczekiwania. Jednocześnie informuje, że można zablokować zapisywanie cookies, zmieniając ustawienia przeglądarki.


    Dodaj strone do katalogu     Dodaj reklame     Pobierz program     Dodaj do ulubionych     Kontakt   


CSS3 - Cień i przeźroczystość.


Za pomocą HTML5 i CSS3 możemy dodawać kolor cienia oraz przeźroczystość. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.

Tak wygląda efekt.

Tak wygląda kod

<div style="border:solid 1mm; border-color: Black; height: 5cm; width: 5cm; background: rgb(112,128,128);
-webkit-box-shadow: 15px 15px 2px rgba(112,128,128,0.5);
-moz-box-shadow: 15px 15px 2px rgba(112,128,128,0.5);
box-shadow: 15px 15px 2px rgba(112,128,128,0.5);
"></div>

Aby we wszystkich nowych przeglądarkach efekt był widoczny trzeba użyć kod w trzech wariantach:

  • -webkit-box-shadow: 15px 15px 2px rgba(112,128,128,0.5);
  • -moz-box-shadow: 15px 15px 2px rgba(112,128,128,0.5);
  • box-shadow: 15px 15px 2px rgba(112,128,128,0.5);

Pierwsze dwie wartości oznaczają wielkość cienia w moim przykładzie wynoszą w pionie 15px i w poziomie 15px, Wartości rgba(112,128,128,0.5) pierwsze trzy to kolor cienia w rgb, natomiast ostania wartość oznacza przeźroczystość cienia.


Cień tekstu

Za pomocą HTML5 i CSS3 możemy dodawać cień do tekstu. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.

Tak wygląda efekt.

Cień tekstu


Tak wygląda kod

<h3 style="text-shadow: 20px 15px 1px #708080;">Cień tekstu</h3>

Pierwsze dwie wartości oznaczają wielkość cienia w moim przykładzie wynoszą w pionie 20px i w poziomie 15px. Trzecia wartość oznacza rozmycie cienia. W moim przykładzie wynosi 1px. Ostatnia wartość oznacza kolor cienia.