Baza wiedzy

Wiedza i inspiracje na temat html, css, jQuery, WordPress, php, kodowania i projektowania. Rozwiązania najróżniejszych problemów, ciekawe pomysły.

Clearfix

.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } -- The "Clearfix"...

BEM czyli Block, Element, Modifier

metodologia tworzenia kodu, tworzenie kodu z podziałem na konstrukcyjne części.   cel: uniknięcie specyficzności i dziedziczenia selektorów CSS   Założenia: każdy...

przeniesienie plików strony do katalogu

dla zwiększenia bezpieczeństwa zalecane jest wgranie plików wordpress w katalogu czyli pliki strony umieszczamy zamiast bezpośrednio w głównym katalogu domeny to w dodatkowym katalogu np....

elementy html

elementy html blokowe: <div> <h1> - <h6> <p> <form> elementy html liniowe: <span> <a> <img> - należy zawsze podawać atrybut alt...

Counter – licznik css

Counter - licznik css wartość ustawiana poprzez: counter-reset i counter-increment wyświetlanie poprzez funkcję counter(), counters()   css: body { counter-reset:...

css3 gradient

- background-image: linear-gradient(red, yellow); background-image: linear-gradient(to left, red, yellow); background-image: linear-gradient(30deg, red, yellow); background-image:...

CSS Cascading Style Sheets

CSS Cascading Style Sheets style css = reguły css wykaz selektor - wskazuje formatowany element strony, jako klasa(.) lub identyfikator(#) blok deklaracji - rozpoczęty { i zamknięty...

generowanie obrazków z layoutu w PS

...

compress and minify

compress images: TinyPNG TinyJPG Compress png/jpg by Website Planet tools.dynamicdrive.com/imageoptimizer/index.php svgo - plugin do sketcha lub instalacja packi npm npm install...

wp many to many, one to many

powiązane wpisy z elementami, np event powiązany z prelegentem i...

Atom Editor

skróty w Atom Editor: Ctrl + D - multi zaznaczenie, zaznacza kolejne wybrane elementy Alt - włącza/wyłącza górne menu gdy wybierzemy opcję View - Toggle Menu Bar Ctrl+, - włączenie...

transition

płynne przejście jednej wartości css do drugiej. -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; parametry...

Optymalizacja Page Speed

widoczność tekstu podczas ładowania czcionek internetowych, w pliku .css dodajemy do definicji @font-face parametr font-display: swap @font-face { font-display:...

pulsujące serce

ikona pulsującego serca (lub dowolnego innego symbolu, znaku).   1.ikona osadzona jako czcionka - Awesome w head zamieszczamy: w kodzie html: <span class="fa fa-heart...