1

CSS @supports

topimgCSS

Każdy developer doskonale wie, że nasze projekty musimy testować pod różnymi przeglądarkami. Im bardziej nowatorskie rozwiązania chcemy zastosować, tym bardziej musimy się do tego przyłożyć. Na szczęście mamy wiele narzędzi do wykrywania czy dana przeglądarka wspiera nasze rozwiązanie. Doskonale sprawdza się w tym biblioteka Modernizr. Warto jednak zwrócić uwagę na nową funkcję CSS o nazwie @supports.

Atrybut download w HTML5

topimgHTML

Wraz z nadejściem HTML5 nastąpiła mała rewolucja w podejściu do stron internetowych. Zawdzięczamy to tym wszystkim “zabawkom”, które dostaliśmy do rąk. Oprócz tych dużych, które w połączeniu z JavaScript’em dają nam masę możliwości, dostaliśmy także mniejsze. I o jednej z takich mniejszych rzeczy chcę dziś napisać.

Obliczenia w arkuszach styli CSS

topimgCSS

Aktualnie w arkuszach styli mamy już do dyspozycji animacje, placeholder’y czy nawet obserwatory eventów. Obliczenia w CSS’ie to kolejny sposób na odciążenie JavaScriptu. Jeszcze nie tak dawno nawet najprostrze kalkulacje w arkuszach były nie do pomyślenia. Wyniekało to głównie ze statycznego harakteru samego CSS’a.

CSS Flexbox layout z dwoma kolumnami

topimgCSS

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.

2

SCSS proste nakładanie gradientów

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!

1

Zmieniamy domyślny kursor za pomocą CSS

Na pewno większość z Was o tym słyszała, ale dla przypomnienia zmienimy dziś domyślny kursor myszy. Kursor możemy zmienić na dowolną grafikę przez nas wybraną. Służy do tego jedynie jedna linia kodu styli CSS.

CSS Flipping Animation

Dziś trochę zabawy z animacjami CSS. Zrobimy efekt odwracanej karty. Nie musimy do tego celu wykorzystywać ani jednej linijki JavaScript’u. Z resztą … zobacz sam :)

1

CSS text gradient

text-gradient

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

freebie-numberone-1

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.

2

CSS Vertical Center i Flexbox

Tworząc strony www często potrzebujemy wycentrować jakieś elementy layoutu w pionie. Dzięki flexbox problem możemy rozwiązać w dziecinnie prosty sposób.