css
ciekawe w css
text wrap text-wrap: saldo - technika typograficzna polegająca na samodzielnym tworzeniu podziałów wierszy tak by uzyskać równoważne bloki tekstu text-wrap: balance - równoważy liczbę...
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 Glassmorphism CSS...
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...
sass
Sass – functions
interactive sass shall in comand line: sass -i or sass --interactive + enter #333 + #777 -> #aaa #090807 - #030201 -> #060606 #123456 * 2 -> #2468ac #222 * #040404...
sass
Sass – media queries
zastosowanie mixinów w media queries: $content-width: 960px $screen-xs: 480px $screen-sm: 768px $screen-md: 992px $screen-lg: 1200px @mixin tiny-screens() @media only screen and...
sass
Sass – colors
funkcje kolorów w sass Darken & Lighten $color: #08baba $colorDarker: darken( $color, 20% ) $colorDark: darken( $color, 10% ) $colorLight: lighten( $color, 10% ) $colorLighter:...
sass
less snippets
dodanie przeźroczystego koloru tła: .rgbaColorIn(@color, @opacity : 1){ @result: rgba( red(@color), green(@color), blue(@color), @opacity ); } .section { .rgbaColorIn(red, 50%);...