Delikatny zewnętrzny blask dodany do elementu na Twojej stronie internetowej sprawia, że element wyróżnia się dla widza. Posługiwać się CSS3 i HTML, aby zastosować poświatę wokół zewnętrznych krawędzi ważnego obiektu. Efekt jest podobny do zewnętrznego blasku dodanego do obiektu w Photoshop.
Stwórz element, który będzie świecił
Efekty blasku działają na każdym tle, ale najlepiej prezentują się na ciemnym tle, ponieważ wtedy blask wydaje się bardziej migotać. W przykładzie prostokątnego pudełka z zaokrąglonymi narożnikami element DIV jest umieszczony w innym elemencie DIV z czarnym tłem. Zewnętrzny DIV nie jest potrzebny do poświaty, ale trudno jest dostrzec poświatę na białym tle.
Ustaw rozmiar i kolor elementu
Po wybraniu elementu, który chcesz ozdobić blaskiem, dodaj style do niego, takie jak kolor tła, rozmiar i czcionki.
Ten przykład to niebieski prostokąt; rozmiar jest ustawiony na 147px na 90px; a kolor tła jest ustawiony na #1f5afe, królewski niebieski. Zawiera margines do umieszczenia elementu w środku czarnego elementu kontenerowego.
Za rogiem
Tworzenie prostokąta z zaokrąglonymi rogami jest łatwe dzięki CSS3. Dodaj właściwość stylu border-radius do swojej klasy blasku. Pamiętaj tylko, aby użyć –webkit– i –moz– przedrostki zapewniające najwyższą kompatybilność.
-webkit-obramowanie-promień: 15px;
-moz-border-radius: 15px;
promień obramowania: 15px;
Dodaj blask z cieniem pudełka
Sam blask jest tworzony za pomocą cienia pudełkowego. Ponieważ powoduje aureolę całego elementu bez rzutowania poświaty z jednej strony jak cień, ustaw długość poziomą i pionową na 0px.
W tym przykładzie promień rozmycia jest ustawiony na 15px, a rozproszenie na 5px, ale możesz bawić się tymi ustawieniami, aby określić, jak szeroki i rozproszony ma być blask. Kolor rgb (255,255,190) to kolor żółty z przezroczystością RGBa alfa ustawioną na 75 procent —rgba (255,255,190, .75). Wybierz kolor blasku, który najlepiej pasuje do Twojego projektu. Podobnie jak w przypadku zaokrąglania rogów, nie zapomnij użyć prefiksów przeglądarki (–webkit– i –moz–) dla najlepszej kompatybilności.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);