css
letter spacing z ps do px
css font
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
css3 font
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
css font
uzyskanie ograniczonej ilości wyrazów w jednolinikowym polu tekstowym: #test { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border:...
social icon
font
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
css font
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
css font
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
css font
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 =...
BEM czyli Block, Element, Modifier
css
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...
Counter – licznik css
css font
Counter - licznik css wartość ustawiana poprzez: counter-reset i counter-increment wyświetlanie poprzez funkcję counter(), counters() css: body { counter-reset:...
css3 gradient
css3
- 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
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...
transition
css3
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...