font

rozszerzenie dla google fonts o polskie znaki

dodajemy na końcu url =latin-ext <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Montserrat:wght@200&display=swap=latin-ext"...

Free fonts – ładne darmowe czcionki

Żaden dobry projekt nie może się obejść bez dobrze dobranych czcionek. A oto subiektywna lista darmowych fontów, które lubię używać w projektach: Amagro by Fabio Servolo Saint...

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

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

font-smoothing

font-smooth - pozwala na kontrolę wygładzania czcionek podczas ich renderowania.   Obecnie właściwość font-smooth nie jest u standaryzowana i nie zaleca się korzystania z niej...

rem – Root EM

skalowanie jednostki tekstu względem głównej (root) wartości. html{font-size: 10px;} body {font-size: 1.4rem} h1{width: 2.4rem} czyli: body => html font-size * 1.4 =...

Counter – licznik css

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

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

wyróżnienie drugiego wyrazu w zdaniu

- $('h1').each(function(){ var text = $(this).text().split(' '); if(text.length < 2) return; text = '<span>' +text+ '</span>'; $(this).html(...

Bezpieczne czcionki web

Wykaz bezpiecznych czcionek do zastosowań web.   osadzanie: font-family: "Times New Roman", Times, serif;   Serif Fonts:  font-family: Georgia, serif; font-family:...

tekst na stronie

Większość przeglądarek ma obecnie ustawioną wielkość bazową czcionki na 16px.   Jednostki tekstu: % w elemencie body określamy wielkość bazowa -> font-size:100% - czyli...

Co jeszcze Cię interesuje?

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