CSS Flexbox layout z dwoma kolumnami

Krzysztof Furtak Bez kategorii Leave a Comment

Nie tak dawno pisałem o zastosowaniu właściwości flexbox do centrowania elementów w pionie. Możesz o tym przeczyć w artykule CSS Vertical Center i Flexbox. Jak się sami przekonaliśmy flexbox jest bardzo uniwersalna i ekstremalnie prosta w użyciu. Dziś zrobimy layout składający się z dwóch kolumn.

SCSS proste nakładanie gradientów

Krzysztof Furtak Code Snippets 2 Comments

Bądźmy szczerzy … nakładanie gradientów w CSS’ie nie jest proste i przyjemne. Nie dość, że trzeba pamiętać o prefiksach, to jeszcze poszczególne prefiksy mają różną konstrukcję. Jeśli używasz w projekcie SASS’ów, możesz w znacznym stopniu ułatwić sobie prace!

CSS text gradient

Krzysztof Furtak CSS Leave a Comment

Moim zdaniem jednym z ładniejszych efektów tekstowych jakie możemy osiągnąć za pomocą HTMLa i CSSa jest gradient na tekście. Wykorzystujemy do tego: background-image jako linear-gradient, background-clip: text;, text-fill-color: transparent; oraz w pewnych przypadkach line-height. Rozpatrzymy dwa przypadki. W pierwszym pokolorujemy linie tekstu na różne kolory, a w drugim nałożymy na tekst gradient. Różne kolory linii tekstu W tym przypadku przyda …

CSS text gradient

Krzysztof Furtak Code Snippets 1 Comment

Moim zdaniem jednym z ładniejszych efektów tekstowych jakie możemy osiągnąć za pomocą HTMLa i CSSa jest gradient na tekście. Wykorzystujemy do tego: background-image jako linear-gradient, background-clip: text;, text-fill-color: transparent; oraz w pewnych przypadkach line-height. Rozpatrzymy dwa przypadki. W pierwszym pokolorujemy linie tekstu na różne kolory, a w drugim nałożymy na tekst gradient.

Freebie NumberOne UI Kit

Krzysztof Furtak Freebie Leave a Comment

UI Kit oparty o komponenty z masą elementów! Ukierunkowany jest na tematykę sportową, ale z powodzeniem większość elementów można wykożystać w każdej tematyce. Grafiki znajdujące się w pliku PSD to wektory, więc dowolnie można je skalować. Licencja zezwala na wykorzystanie go do celów prywatnych, jak i komercyjnych.

Responsive Web Design (RWD) – o co kaman?!

Krzysztof Furtak Bez kategorii 2 Comments

Artykuły z tej serji: 1 . Responsive Web Design (RWD) – o co kaman?! 2. Responsive Web Design (RWD) – podstawy oraz media queries. (w przygotowaniu) 3. Responsive Web Design (RWD) – optymalizacja zdjęć. (w przygotowaniu) 4. Responsive Web Design (RWD) – responsywne tabele. (w przygotowaniu)   Jeszcze dwa, trzy lata temu projektując strony i aplikacje internetowe mieliśmy na uwadze …