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

Dodaj komentarz

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