Švelnus išorinis švytėjimas, pridėtas prie jūsų tinklalapio elemento, leidžia žiūrovui išsiskirti iš elemento. Naudokite CSS3 ir HTML, kad švytėjimas būtų pritaikytas aplink svarbaus objekto išorinius kraštus. Poveikis yra panašus į išorinį švytėjimą, pridedamą prie objekto „Photoshop“.
Sukurkite elementą švytėti
Švytėjimo efektai veikia bet kokiame fone, tačiau jie geriausiai atrodo tamsiame fone, nes tada atrodo, kad švytėjimas labiau mirga. Apvalaus kampo stačiakampio formos langelio pavyzdyje DIV elementas dedamas į kitą DIV elementą su juodu fonu. Išorinis DIV švytėjimui nėra būtinas, tačiau baltame fone sunku pamatyti švytėjimą.
Nustatykite elemento dydį ir spalvą
Pasirinkę elementą, kurį puošite spindesiu, pridėti stilių fono spalva, dydis ir šriftai.
Šis pavyzdys yra mėlynas stačiakampis; dydis yra nustatytas 147 x 90 pikselių; o fono spalva nustatyta kaip # 1f5afe, karališkai mėlyna. Jame yra paraštė elementui įdėti į juodojo konteinerio elemento vidurį.
Apvažiuokite kampus
Su CSS3 lengva sukurti stačiakampį suapvalintais kampais. Pridėkite krašto spindulio stiliaus ypatybę prie savo švytėjimo klasės. Tiesiog nepamirškite naudoti –Webkit– ir –Moz– priešdėliai, kad būtų užtikrintas didžiausias suderinamumas.
-webkit-border-radius: 15 taškų;
-moz-border-radius: 15 taškų;
krašto spindulys: 15 taškų;
Pridėkite švytėjimą su dėžutės šešėliu
Pats švytėjimas sukurtas dėžės šešėliu. Kadangi jis nukreipia visą elementą, neprarandant švytėjimo nuo vienos pusės kaip šešėlis, nustatykite horizontalius ir vertikalius ilgius 0 taškų.
Šiame pavyzdyje suliejimo spindulys yra nustatytas 15 taškų, o suliejimo plitimas yra 5 taškų, tačiau galite suplakti tuos nustatymus, kad nustatytumėte, koks platus ir difuzinis norite švytėjimo. Spalva rgb (255 255 190) yra geltonos spalvos, RGBa alfa skaidrumas nustatytas 75 proc.rgba (255 255 190, 0,75). Pasirinkite švytėjimo spalvą, kuri geriausiai tinka jūsų projektui. Kaip ir apvalinant kampus, nepamirškite naudoti naršyklės priešdėlių (–Webkit– ir –Moz–), kad būtų užtikrintas geriausias suderinamumas.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
langelis-šešėlis: 0px 0px 15px 5px rgba (255, 255, 190, .75);