Měkká vnější záře, která byla přidána k prvku na vaší webové stránce, způsobuje, že se prvek postaví na prohlížeč. Použijte CSS3 a HTML pro použití záře kolem vnějších okrajů důležitého objektu. Efekt je podobný vnějšímu záření přidanému k objektu ve Photoshopu.
Nejprve vytvořte prvek pro záře
Zářivé efekty mohou být provedeny na jakémkoli barevném pozadí, ale vypadají nejlépe na tmavém pozadí, protože pak záře vypadá, že třpytí více. V tomto případě obdélníkového kruhu zaokrouhleného rohu je prvek DIV umístěn v jiném prvku DIV s černým pozadím. Vnější osvětlení DIV není nutné pro záře, ale je těžké vidět záře na bílém pozadí.
Dej DIV třídu záře:
Nastavte velikost a barvu prvku
Po výběru prvku, který chcete zdobit záře, pokračujte a přidejte všechny styly, které chcete, například barvu pozadí, velikost a písma. Tento příklad je modrý obdélník; velikost je nastavena na hodnotu 147 x 90 pixelů; a barva pozadí je nastavena na # 1f5afe, královskou modrou barvu. Zahrnuje okraj pro umístění prvku uprostřed černého kontejneru.
Kolem rohů
Vytvoření obdélníku se zaoblenými rohy je snadné pomocí CSS3. Přidejte vlastnost stylu ohraničení do třídy záře. Jen pamatujte na to, že používáte -webkit- a -mop- předpony pro nejvyšší kompatibilitu.
-webkit-border-radius: 15px;-moz-okraj-poloměr: 15px;okraj: 15px; Přidejte Glow With a Shadow Box
Samotná záře je vytvořena se stínem boxu. Protože chcete, aby se celý prvek zhroutil a projevilo, že záření není na jedné straně jako stín, nastavte horizontální a vertikální délku na 0 pixelů. V tomto příkladu je poloměr rozostření nastaven na 15 pixelů a rozostření rozostření je 5 pixelů, ale můžete s těmito nastaveními nastavit, abyste zjistili, jak široký a rozptýlený chcete, aby byla záře. Barva rgb (255,255,190) je žlutá barva s průhledností alfa RGBa nastavenou na 75 procent-rgba (255,255,190, .75). Vyberte zářivou barvu, která nejlépe vyhovuje vašemu projektu. Stejně jako při zaokrouhlení rohů, nezapomeňte použít předpony prohlížeče (-webkit- a -moz-) pro nejlepší kompatibilitu.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);-moz-box-stín: 0px 0px 15px 5px rgba (255, 255, 190, .75);box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75); Otestujte žhavící krabici
Otestujte žhnoucí skříň v jednom nebo více prohlížečích a proveďte veškeré úpravy potřebné k tomu, abyste získali efekt záře, který nejlépe funguje pro vaši webovou stránku.
