css
ciekawe w css
overscroll-behavior ustawiony na wartość none, pozwala na uniknięcie "odbijania" layoutu strony przy szybkim scrollowaniu w dół :root { overscroll-behavior: none; } text-wrap:...
css
losowe tło – style dodane inline
Czasami jest taka potrzeba lub konieczność by dodać losowe tło w kodzie samej strony WP, poniżej przykład jak można to zrobić. Zaczynamy od stworzenia katalogu na serwerze bg_random gdzie...
background
svg ikona – zmiana koloru na hover w css
Umieszczamy ikonę svg jako symbol, najlepiej w stopce strony w elemencie svg z dodanym style="display: none;" <symbol id="icon_heart"> <path...
svg
Różne stany inputa
/* Show red borders when filled, but invalid */ input:not(:placeholder-shown) { border-color: hsl(0, 76%, 50%); } /* Show green borders when valid */ input:valid { border-color:...
form
Grid Layout
container display: grid; grid-template-rows: 200px 200px; grid-template-columns: 200px 200px 200px; grid-row-gap: 30px; grid-column-gap: 30px; grid-gap: 30px; grid-template-rows: 100px...
css
generatory css
piękny generator palety kolorów i gradientów w css: mycolor.space wycięcie kształtu z backgraound image: bennettfeely.com-clippy trójkąty w css triangle shapes kształty w...
css inspiration
Emmet css
Emmet -zestaw narzędzi do skrótowego pisania kodu HTML i CSS - wpisujemy skrót i wciskamy TAB główna strona Emmet CSS bg+ background: #fff url() 0 0...
css
Sass – kodowanie
@ - symbol oznacza dyrektywę # - symbol interpolacji by połączyć zmienną z wyświetlana...
sass
Sass – dziedziczenie
dziedziczenie, ineritance dwie ważne zasady: nie można w ciągu wprowadzać kolejnych class po @extend klasa musi być zdefiniowana w danym zakresie styli, czyli nie możemy użyć w...