Wymyśliłam sobie, że chcę umieścić na tratva.pl tekst w kolorze gradientu. Taki kaprys, a co. Moje pierwsze pomysły przez chwilę zawędrowały w stronę edytorów graficznych typu Gimp czy Gravit Designer. Zaraz potem wróciły na ziemię. Przecież ja to CSSami ogarnę!
Krok 1
A więc mamy tekst, czarno na białym. Jak go pokolorować? Masz jakiś pomysł?
p {
font-size: 28px;
font-weight: bold;
font-family: Georgia, serif;
background: linear-gradient(to right, #00629B, #DAAA00);
}
Mmmmmmm, prawie, ale nie do końca.
Krok 2
A teraz popatrz na ten obrazek powyżej i pomyśl, jak z niego zrobić tekst w kolorze gradientu? Masha by powiedziała: przecież to oczywiste!
- Przyciąć tło tylko do tekstu.
-webkit-background-clip: text; - Ustawić kolor czcionki na przezroczysty.
-webkit-text-fill-color: transparent;
See the Pen Gradient Text with CSS by sourire09 (@sourire09) on CodePen.0
A teraz przyjrzyjmy się przez chwilę dwóm magicznym własnościom, dzięki którym stworzyliśmy tekst w kolorze gradientu.
-webkit-background-clip
Właściwość CSS background-clip określa, czy tło obiektu ma się rozszerzać pod obszar paddingu, bordera, czy być może ma się zawęzić tylko pod samą treść (więcej na MDN). Niesamowite przykłady użycia tej właściwości znajdziesz TUTAJ.
See the Pen background-clip MDN example by sourire09 (@sourire09) on CodePen.0
Właściwość -webkit-background-clip umożliwia ponadto przycięcie tła tylko do tekstu wewnątrz danego elementu! Uwaga, przedrostek jest tu bardzo ważny, ponieważ póki co – bez niego właściwość nie zadziała. Według CSS Backgrounds and Borders Module Level 4 możliwość przycinania tła do tekstu za pomocą background-clip wisi na etapie drafta. Całe szczęście Firefox, Chrome i Safari wspierają -webkit-background-clip: text. Ponoć Safari ma problem z tą własnością na elemencie <button>, jednak można to obejść za pomocą <button><span>...</span></button>. Czyli się da. Oprócz IE, of course.
-webkit-text-fill-color
Właściwość text-fill-color, jak sama nazwa wskazuje, służy do określenia koloru tekstu wewnątrz konkretnego elementu. I teraz pewnie zapytasz: „ale mamy już właściwość color, po co nam text-fill-color??”
Otóż właściwość text-fill-color została stworzona z myślą o odróżnieniu koloru tekstu elementu HTML od koloru konturu tekstu elementu HTML. Kolor tekstu elementu HTML możemy kontrolować za pomocą właściwości color. Właściwość text-fill-color ma pierwszeństwo przed właściwością color. (źródło)
See the Pen -webkit-text-fill-color by sourire09 (@sourire09) on CodePen.0
I tu przedrostek jest niezwykle istotny, bez niego właściwość nie zadziała. Szczegóły użycia znajdziesz w Compatibility Standard. Według MDN z -webkit-text-fill-color skorzystasz we wszystkich nowoczesnych przeglądarkach, jednak pamiętaj – to nie jest standardowa właściwość i nie wiadomo, czy w ogóle kiedykolwiek będzie. Mimo wszystko warto o niej wiedzieć. Czyli ponownie – da się, ponownie – oprócz IE.
Daj znać w komentarzu, jeśli znasz inny sposób na uzyskanie tekstu w kolorze gradientu!
