Mäkká vonkajšia žiara pridaná k prvku na vašej webovej stránke dáva prvku vyniknúť divákovi. Použite CSS3 a HTML na použitie žiarenia okolo vonkajších okrajov dôležitého objektu. Efekt je podobný vonkajšej žiare pridanej k objektu v Photoshop.
Vytvorte prvok, ktorý bude žiariť
Žiarivé efekty fungujú na akomkoľvek pozadí, ale najlepšie vyzerajú na tmavom pozadí, pretože potom sa zdá, že sa žiar viac leskne. V príklade obdĺžnikového štvorca so zaobleným rohom je prvok DIV umiestnený v inom prvku DIV s čiernym pozadím. Vonkajší DIV nie je pre žiaru potrebný, ale na bielom pozadí je ťažké ju vidieť.
Nastavte veľkosť a farbu prvku
Po výbere prvku, ktorý chcete ozdobiť žiarou, pridať štýly ako je farba pozadia, veľkosť a písma.
Tento príklad je modrý obdĺžnik; veľkosť je nastavená na 147 pixelov na 90 pixlov; a farba pozadia je nastavená na # 1f5afe, kráľovskú modrú. Zahŕňa okraj na umiestnenie prvku uprostred čierneho prvku kontajnera.
Zaokrúhlite rohy
Vytvorenie obdĺžnika so zaoblenými rohmi je s CSS3 ľahké. Pridajte vlastnosť štýlu border-radius do svojej triedy žiary. Nezabudnite použiť –Webkit– a –Moz– prefixy pre najvyššiu kompatibilitu.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
polomer okraja: 15px;
Pridajte Glow With a Box Shadow
Samotná žiara je vytvorená tieňom z krabice. Pretože obklopuje celý prvok bez toho, aby z jednej strany premietal žiaru ako tieň, nastavte vodorovnú a zvislú dĺžku na 0px.
V tomto príklade je polomer rozmazania nastavený na 15 pixelov a šírenie rozmazania je 5 pixelov. S týmito nastaveniami však môžete manipulovať, aby ste určili, aká široká a difúzna má byť žiara. Farba rgb (255 255 190) je žltá farba s priehľadnosťou RGBa alfa nastavenou na 75 percent—rgba (255 255 190, 0,75). Vyberte farbu žiarenia, ktorá najlepšie vyhovuje vášmu projektu. Rovnako ako pri zaoblení rohov, nezabudnite použiť predpony prehliadača (–Webkit– a –Moz–) pre najlepšiu 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);
tieň krabice: 0px 0px 15px 5px rgba (255, 255, 190, 0,75);