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

Brak wdów w tekście

w html za pomocą &nbsp; -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto;...

Podwójny napis – text shadow

text-shadow: 2px 5px 0 rgba(0, 0, 0, 0.2); WHISKEY IN THE JAR   text-shadow: -2px -1px 0px rgba(242, 201, 9, 1); WHISKEY IN THE JAR   Ciekawy generator text shadow:...

kolor zaznaczenia tekstu / selection color

::selection{ background: #38afaf; color: #fff; } ::-moz-selection { background: #38afaf; /* Firefox...

ułozenie tekstu wysrodkowanego względem wysokości

.room-name{ display: table; float:left; width: 81px; height: 73px; font-size:14px; padding-left:17px; } .room-name-inner{ display: table-cell; vertical-align: middle;...

Co jeszcze Cię interesuje?

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