CSS user-select – blokowanie zaznaczania tekstu lub mediów

Krzysiek Furtak CSS/SCSS 0 Comments

Blokowanie zaznaczania tekstu to często ważny element UI naszej strony. Jest wiele elementów naszych witryn lub aplikacji, które w interakcji z użytkownikiem nie powinny się zaznaczać. Prostym przykładem są przyciski, w wielu przypadkach elementy menu, ikonki serwowane w postaci czcionki itp.

CSS @supports

Krzysiek Furtak CSS/SCSS 1 Comment

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.

Obliczenia w CSS

Krzysiek Furtak CSS/SCSS 0 Comments

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

Krzysiek Furtak CSS/SCSS 0 Comments

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.

Zmieniamy domyślny kursor za pomocą CSS

Krzysiek Furtak CSS/SCSS 1 Comment

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

Krzysiek Furtak CSS/SCSS 0 Comments

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 🙂