css

CSS Triangles

Trójkąty w css: .arrow-up { width: 0; height: 0; font-size: 0; line-height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;...

Sass – mixin

mixins - re-używalny kawałek kodu, aby nie powtarzać kodu - w myśl zasady Dont Repeat Yourself sass: @mixin warning { background-color: orange; color: #fff; &:hover {...

przedostatni element listy

-- li:nth-last-child(2){ margin-right:...

placeholder style i wartości

taki sam placeholder dla każdego inputa w js: $(document).ready(function(){ $('form').find("input, input, textarea").each(function(ev) { if(!$(this).val()) {...

usunięcie defaultowych strzałek w select na IE

aby usunąć defaultowe strzałki z elementu select w przeglądarce ie należy dodać w kodzie: select::-ms-expand { display:...

Nice form – stylizacja

Wartość none dodana do pól formularza usuwa natywne formatowanie przeglądarki i pozwala na swobodne dodanie własnych styli dla wybranych elementów. -webkit-appearance:...

All current

-- #main-menu ul li > a { background-color: #b9c9d8; color:...

zatrzymanie stanu animacji

aby zatrzymać stan animowanego elementu można skorzystać...

Waypoint

Dodanie fajnych animacji wjeżdżających bloków na stronie jest całkiem proste z wykorzystaniem Waypoints i Animate.css HTML: <div class="animated fade"...

Animacja i krzywe Bézier’a

parę fajnych narzędzi do zrozumienia i opracowania krzywej do animacji: cubic-bezier.com jasondavies.com/animated-bezier/...

grid na responsywnych kwadratach

Grid of squares with...

zablokowanie scrolowania

blokowanie scroll na tabletach i smartfonach poprzez:   w js: //target the entire page, and listen for touch events $('html, body').on('touchstart touchmove', function(e){...

letter spacing z ps do px

na przeliczenie letter spacing photoshopa do css letter-spacing w px wykorzystuje się wzór uwzględniający wielkość tekstu:   photoshop letter spacing (px) * font-size (px) / 1000 = css...

wyrównanie bloków do prawej

dla każdego bloku dajemy margin-left:...

user-select – nie zaznaczanie tekstu

kiedy chcemy by tekst był tylko tłem i nie miał możliwości zaznaczenia możemy zastosować user-select z odpowiednimi prefiksami powinien działać pod najnowszymi przeglądarkami...

ograniczenie wyświetlonego tekstu

uzyskanie ograniczonej ilości wyrazów w jednolinikowym polu tekstowym: #test { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border:...

social icon

bardzo ładne ikonki możemy uzyskać dzięki genericons. pobieramy pliki czcionki i zamieszczamy je razem z dołaczonym plikiem genericons.css w plikach strony.   w kodzie html...

hyphens – dzielenie wyrazów

Dla uzyskania poprawnej justyfikacji bez nienaturalnych odstępów pomiędzy wyrazami oraz bez pojedynczych liter na końcu lini oraz bez 'rzek' powstających wzorów w pionie z odstępów pomiędzy...

Co jeszcze Cię interesuje?

Wordpress css JavaScript font jQuery html custom post css3 ACF html5 web development sass mobile php woocommerce vue form image menu biblioteka responsive inspiration plugins seo color post user page data base git webflow design sketch link icon svg table tools query_posts() align admin React background tag https snipets npm grid ai WPCF7