Tydzień 29

CSS, CSS i jeszcze raz CSS. Projekt realizowany w czasie szkolenia z CSS spodobał mi się tak bardzo, że postanowiłem na jego bazie stworzyć stronę z informacjami i moimi zdjęciami z błędnych skał. To na razie pomysł, bo projekt szkoleniowy jeszcze się nie skończył, ale w jak tylko projekt będzie skończony, to z przyjemnością podmienię treści na gotowym szablonie.

Wracając do szkolenia, czy wiesz że gogle dev tools pozwala sprawdzić, jakie wartości w px zostały przeliczone z jednostek względnych zapisanych w kodzie css? Na przykład w kodzie CSS zastosowałeś jednostkę 1.5rem i zastanawiasz się, na ile pikseli, przy danej rozdzielczości ekranu, przeglądarka przekonwertowała 1.5rem. W tym celu trzeba uruchomić narzędzia developerów w Google Chrome Ctrl + Shift + I i w zakładce Elements po prawej stronie pojawi się okienko z dodatkowymi zakładkami, w tym zakładka Computed, w której podane są wartości parametrów przeliczone na pixele. Kiedy można to wykorzystać? Na przykład, w celu sprawdzenia jak zachowuje się strona na danej rozdzielczości ekranu i czy na pewno odstępy są takie jak zaplanowaliśmy lub jakie zostały określone w projekcie strony.

Screen Shot z przegląradki Google Chrome

Innym ciekawym efektem, który można uzyskać za pomocą CSS jest możliwość uzyskania gradientu koloru na tekście. Wygląda to niesamowicie i świetnie się prezentuje na nowoczesnych stronach WWW. Efekt ten można uzyskać, dzięki czterem linijkom kodu CSS:

display: inline-block;  
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
-webkit-background-clip: text;
background-clip: text;

background-image – definiuje w którym kierunku ma być skierowany gradient, oraz kolor rozpoczęcia zakończenia. W podanym wyżej przypadku $color-primary-light i $color-primary-dark to kolory zdefiniowane jako zmienne w SASS.

background-clip – “przycina” gradientowe tło tylko do liter tekstu, dzięki czemu uzyskujemy gradient koloru na tekście.

Ostatnim elementem WOW w tym tygodniu jest set ikon, które traktowane są jako tekst przez przeglądarkę, a wiec możliwa jest szeroka ich edycja, łącznie uzyskaniem gradientu barwy na ikonie, o którym napisałem wyżej. Wszystkie ikony dostępne są w repozytorium utrzymywanym na githubie:

Źródło ciekawych ikon:

https://github.com/linea-io/Linea-Iconset

W tym tygodniu na programowaniu spędziłem 11 godzin, nieco więcej niż zaplanowałem. To cieszy, ale jeszcze bardziej cieszą mnie wszystkie magiczne sztuczki, których się uczę w przerabianym kursie CSS. Mam nadzieję, że w przyszłym tygodniu uda mi się rozpocząć prace nad projektem Błędne Skały.

No comments
Krzysztof NyrekTydzień 29

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

5 − 5 =