Měkká vnější záře přidaná k prvku na vaší webové stránce způsobí, že prvek vynikne v prohlížeči. Použití CSS3 a HTML pro použití záře kolem vnějších hran důležitého objektu. Efekt je podobný vnější záři přidané k objektu v Photoshop.
Vytvořte prvek, který bude zářit
Efekty záře fungují na jakémkoli pozadí, ale vypadají nejlépe na tmavém pozadí, protože se zdá, že se záře více třpytí. V příkladu obdélníkového rámečku se zaobleným rohem je prvek DIV umístěn v jiném prvku DIV s černým pozadím. Vnější DIV není pro záři nutný, ale je těžké vidět záři na bílém pozadí.
Nastavte velikost a barvu prvku
Poté, co vyberete prvek, který chcete ozdobit záře, přidat styly k tomu, jako je barva pozadí, velikost a písma.
Tento příklad je modrý obdélník; velikost je nastavena na 147px na 90px; a barva pozadí je nastavena na # 1f5afe, královskou modrou. Zahrnuje okraj k umístění prvku uprostřed černého prvku kontejneru.
Kolem rohů
Vytvoření obdélníku se zaoblenými rohy je s CSS3 snadné. Přidejte do své třídy záře vlastnost stylu poloměru ohraničení. Nezapomeňte použít –Webkit– a –Moz– předpony pro nejvyšší kompatibilitu.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
poloměr ohraničení: 15px;
Přidejte Glow With Box Shadow
Samotná záře je vytvořena pomocí stínového rámečku. Protože to halos celý prvek bez promítnutí záře z jedné strany jako stín, nastavte horizontální a vertikální délky na 0px.
V tomto příkladu je poloměr rozostření nastaven na 15px a rozptyl rozostření je 5px, ale můžete s těmito nastaveními manipulovat a určit, jak široká a rozptýlená má být záře. Barva rgb (255 255 190) je žlutá barva s průhledností RGBa alfa nastavenou na 75 procent—rgba (255 255 190, 0,75). Vyberte barvu záře, která nejlépe vyhovuje vašemu projektu. Stejně jako u zaoblení 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, 0,75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, 0,75);
stín boxu: 0px 0px 15px 5px rgba (255, 255, 190, 0,75);