Zamglony obrazek - tinted image

Zamglony obrazek - tinted image

Czasem spotyka się na stronach www efekt zamglonego obrazka (tinted image). Obrazek jest zakryty maską półprzezroczystego koloru. Pod spodem widać zaledwie zarysy właściwego obrazka.

Jest to ciekawy efekt, który rozwiązuje problem napisów na tle kolorowego obrazka. Jeśli chcemy dać w nagłówku napisy, hasła reklamowe, slogany, mamy problem z kolorem. Większość kolorów czcionki sprawia, że napis jest nieczytelny na tle kolorowego obrazka. Najlepszy jest biały. Sporo stron rezygnuje z czytelności obrazka w tle, na rzecz zwiększenia czytelności napisu. Obrazek zakrywamy maską półprzezroczystości.

Istnieje kilka sposobów wykonania tego efektu.

Sposób 1 – wielokrotne tło css3 i gradient

Jeden z nich został opisany na CSS Tricks,  gdzie użyto wielokrotnych warstw tła. CSS3 pozwala na wielokrotne tło, gdzie obrazki oddzielone są przecinkami. Nie można tu jednak użyć koloru rgba jako jednego z obrazków. Jednak, jak to opisano w artykule CSS Tricks, można użyć gradientu.

Użyłam tego efektu na swojej stronie. W tym przypadku podobał mi się dwukolorowy gradient. Jeśli użyjemy tych samych wartości koloru rgba wtedy mamy jednolity kolor prześwitujący bez gradientu.

Sposób 2  – pseudoelementy

Sposób opisany na stronie wykorzystuje pseudoelementy. Obrazek musi mieć element otaczający z pozycjonowaniem relatywnym. Następnie wykorzystujemy pseudoelement :before z pozycją absolutną.

:before oznacza, że tło pojawia się w źródle przed obrazkiem. Ale position:absolute powoduje, że ustawia się on na wierzchu obrazka. Ponadto dodano transition. Dla hover ustawiamy background none żeby zaciemnienie znikało po najechaniu myszą.

To rozwiązanie zastosowałam na swojej stronie.

 

template monster


Profesjonalny Hosting


3 Comments
  1. Od niedawna uczę się tworzenia stron www z wideo kursów eduweb.pl. Są dobre bo w formie wideo dużo szybciej mogę przyswoić o co chodzi. Zamiast ciągle zastanawiać się – a tak było gdy korzystałam z książek. Takie triki są bardzo przydatne w pracy.

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *