Îmbunătește-ți viața de developer cu aceste trucuri CSS
Indiferent dacă ești junior sau senior front-end developer, poți să descoperi oricând noi proprietăți și funcționalități CSS. Utilizându-le, vei avea mai mult control asupra modului în care se comportă conținutul pe site-ul la care lucrezi. Apropo, ai încercat sfaturile și trucurile mele HTML anterioare? Dacă nu, verifică-le aici. Acum că ești la curent cu toate informațiile, poți continua cu noi sfaturi și trucuri utile pentru front end.
Unele dintre aceste trucuri nu sunt acceptate de toate browserele, așa că trebuie să verifici acest lucru înainte de a le folosi.
1. Text-stroke
Ca designer, poți utiliza text stroke în Adobe Illustrator, de exemplu. In acest program, poți să manipulate grosimea si lățimea textului. Ca front-end developer, poți utiliza de asemenea această proprietate.
.headline {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #f00;
}
2. ::first-letter
Un alt mod amuzant de a te juca cu CSS este utilizarea pseudo-elementului ::first-letter. Aceasta aplică stiluri primei litere a elementului la nivel de bloc. Prin această metodă, putem obține un efect elegant de revistă.
.headline::first-letter {
color: #f00;
font-size: 100px;
line-height: .5;
margin: 15px 15px 10px 0;
}3. Line-clamp
Proprietatea line-clamp trunchiază textul la un anumit număr de linii. Pentru a afișa conținutul decupat, trebuie utilizate aceste trei proprietăți:
- proprietatea display trebuie să fie setată la -webkit-box sau -webkit-inline-box
- -webkit-box-orient setat la vertical
- overflow setat la hidden
p.read-more {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}4. column-count
Atunci când se utilizează proprietatea column-count, browserul distribuie uniform conținutul într-un număr specificat de coloane.
.main-content {
column-count: 4;
}
5. Object fit
Proprietatea object-fit definește modul în care conținutul unui <img> sau <video> trebuie redimensionat pentru a se potrivi containerului său. Există patru opțiuni: fill, contain, cover și scale-down.
.main-content {
object-fit: cover;
height: 200px;
width: 200px;
}6. Modifică culoarea de selecție a textului
Pentru a modifica culoarea implicită a selecției textului din browser, trebuie să utilizezi pseudo-elementul ::selection. Vei vedea culoarea pe care ai ales-o după ce selectezi conținutul site-ului cu cursorul.
::selection {
background-color: #abea00;
}Chiar dacă unele dintre aceste proprietăți nu sunt acceptate de toate browserele, este distractiv să te joci cu ele și îți simplifică viața de codare. Este doar o chestiune de timp până când acestea vor deveni mainstream în viitorul apropiat.
Asta e tot pentru moment. Încearcă-le și spune-mi ce părere ai!
Resurse utile:
- https://css-tricks.com/adding-stroke-to-web-text/
- https://caniuse.com/
- https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
- https://www.tutorialrepublic.com/css-reference/css3-column-count-property.php
- https://css-tricks.com/almanac/selectors/f/first-letter/
- https://css-tricks.com/almanac/properties/o/object-fit/
- https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
