css

wieloznaczne selektory CSS Wildcard Selectors

Wildcard Selectors czyli Selektory wieloznaczne pozwalają na wybranie w stylach nazw class lub id zawierających konkretne znaki, co umożliwia wygodniejsze przypisywanie styli, dzięki czemu...

Animacje w css

Animacje w css dzięki nim możesz stopniowo zmieniać określone style danego elementu w czasie - to naprawdę potężne narzędzie. Animacje css możesz traktować jak oś czasu. Aby utworzyć...

nałożenie lini na tło strony

body &::before, &::after content: '' height: 100% position: absolute top: 0 z-index: -1 border-left: 1px solid #D8D8D8...

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...

parę sposobów na randomowy kolor tła

Fajnie mieć możliwość dodania do wybranego elementu losowego koloru np. tła. Ciekawie sprawdza się to w sliderach z treścią, kiedy każdy kolejny slid ma inne tło. Jednym z rozwiązań...

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...

Wersjonowanie pliku styli css

<link rel="stylesheet" type="text/css" href="style.css?v=12345678"...

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:...

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...

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   ciekawe koncepty i...

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...

Sass – kodowanie

@ - symbol oznacza dyrektywę # - symbol interpolacji by połączyć zmienną z wyświetlana...

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 – functions

interactive sass shall in comand line: sass -i or sass --interactive + enter #333 + #777 -> #aaa #090807 - #030201 -> #060606 #123456 * 2 -> #2468ac #222 * #040404...