Nowa seria – ciekawe linki

Postanowiłem, że na blogu pojawi się nowa seria wpisów. Postaram się publikować je przynajmniej raz na tydzień i będą one zawierały najciekawsze linki, na które udało mi się trafić. Tematyka lików zapewne będzie  różna, od darmowych zasobów, różne kursy, ciekawe biblioteki i wtyczki, po ciekawe gry … dosłownie wszystko co wyda mi się interesujące. Jednak wszystko to w 95% będzie w jakimś stopniu …

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. Zobacz także: CSS text …

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ć. Zobacz także: Nowa seria – ciekawe linki WordPress Quick Tip – Jak dodać własny …

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. Zobacz także: CSS @supports Zmieniamy domyślny kursor za pomocą CSS CSS Flexbox layout z dwoma kolumnami CSS3 …

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. Zobacz także: CSS Vertical Center i Flexbox CSS3 – view into the future CSS @supports …

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! Zobacz także: CSS text gradient CSS3 – view into the future CSS Flipping Animation CSS @supports

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. Zobacz także: WordPress Quick Tip – zmieniamy domyślny avatar CSS text gradient Freebie NumberOne UI Kit WordPress Quick Tip – dostosowanie panelu użytkownika dla Twojego klienta.

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 :) Zobacz także: CSS Vertical Center i Flexbox Obliczenia w arkuszach styli CSS Freebies for web developers – 10 darmowych plików PSD CSS text gradient

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. Zobacz także: SCSS proste nakładanie gradientów CSS @supports CSS Vertical …

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. Zobacz także: Freebies for web developers – 10 darmowych plików PSD ThemeForest TOP5 …