Miękka poświata zewnętrzna dodana do elementu na twojej stronie internetowej powoduje, że element wyróżnia się dla widza. Użyj 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 Photoshopie.
Najpierw stwórz element w blasku
Efekty blasku można wykonywać na dowolnym kolorowym tle, ale najlepiej wyglądają na ciemnym tle, ponieważ wtedy blask wydaje się bardziej migotać. W tym prostokącie prostokątnym z zaokrąglonymi rogami element DIV jest umieszczony w innym elemencie DIV z czarnym tłem. Zewnętrzny DIV nie jest konieczny dla poświaty, ale trudno jest zobaczyć blask na białym tle.
Nadaj DIV klasę poświaty:
Ustaw rozmiar i kolor elementu
Po wybraniu elementu, który chcesz upiększyć blaskiem, dodaj dowolne style, takie jak kolor tła, rozmiar i czcionki. Ten przykład to niebieski prostokąt; rozmiar jest ustawiony na 147 pikseli na 90 pikseli; a kolor tła jest ustawiony na # 1f5afe, niebieski królewski. Zawiera margines do umieszczenia elementu w środku czarnego elementu pojemnika.
Za rogiem
Tworzenie prostokąta z zaokrąglonymi narożnikami jest łatwe dzięki CSS3. Dodaj właściwość stylu border-radius do swojej klasy blasku. Pamiętaj tylko, aby używać prefiksów -webkit- i -moz- w celu uzyskania najwyższej kompatybilności.
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; Dodaj blask za pomocą Shadow Box
Samo jarzenie jest tworzone za pomocą cienia pudełka. Ponieważ chcesz, aby halo całego elementu i nie wyświetlać blasku z jednej strony jak cień, ustawiasz poziome i pionowe długości na 0 pikseli. W tym przykładzie promień rozmycia jest ustawiony na 15 pikseli, a rozprzestrzenianie się rozmycia wynosi 5 pikseli, ale można manipulować przy tych ustawieniach, aby określić, jak szeroki i rozproszony ma być blask. Kolor rgb (255,255,190) jest kolorem żółtym z przezroczystością alfa RGBa ustawioną na 75 procent-rgba (255,255,190, 0,75). Wybierz kolor blasku, który najlepiej pasuje do Twojego projektu. Podobnie jak przy zaokrąglaniu narożnikó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); Przetestuj świecące pudełko
Przetestuj świecące pole w jednej lub kilku przeglądarkach i wprowadź niezbędne poprawki, aby uzyskać efekt blasku, który najlepiej pasuje do Twojej strony internetowej.
