• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS gradient + text.shadow

VPS Starter Arubacloud
0 głosów
498 wizyt
pytanie zadane 10 stycznia 2018 w HTML i CSS przez glodny0 Początkujący (310 p.)

Witam.

Chciałbym się zapytać czy jest możliwość uzyskania cienia tekstu, na który nałożony jest gradient. Szukałem pomocy w google, ale żaden ze sposobów tam prezentowanych, nie daje pożądanego efektu. Za każdym razem, gdy dodaję cień, w przypadku zamieszczonego kodu, literka "b" staje się zamazana, a chciałbym, aby cień wyglądał tak samo jak na pozostałych znakach (jedynie kontury mają być ścieniowane). Z góry dziękuję za odpowiedź.

<h1 class="logo">
	<span style="color: #a446d2">Aaa(</span>
	<span style="
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-image: linear-gradient(to right,
		#a446d2 15%,#4682B4 85%);">b</span>
	<span style="color: #4682B4 ">)Ccc</span></h1>
		
<style>

	h1.logo
	{		
		text-shadow: 
		1px 1px 0 #000,
		-1px 1px 0 #000,
		-1px -1px 0 #000,
		1px -1px 0 #000;
	}	
</style>

 

1 odpowiedź

+1 głos
odpowiedź 10 stycznia 2018 przez pablop76 VIP (123,460 p.)
Użyj pseudoklasy :after lub :before dla literki b. Jako content daj literkę b z cieniem i daj ją pod spód.
komentarz 10 stycznia 2018 przez glodny0 Początkujący (310 p.)
Wow, to działa! Jestem Ci niezmiernie wdzięczny. Przyznam, że nie bawiłem się jeszcze z pseudoklasami, ale jak widać muszę uzupełnić braki. Dziękuję i pozdrawiam.
komentarz 10 stycznia 2018 przez pablop76 VIP (123,460 p.)

Dla poprawności to jest pseudoelement (::before) nie pseudoklasa(:hover). Więc jak będziesz studiował to zwróć uwagę. Pseudoelement powinno się pisać z dwoma dwukropkami. (w celu rozróżnienia)

Podobne pytania

0 głosów
1 odpowiedź 1,236 wizyt
pytanie zadane 24 stycznia 2016 w HTML i CSS przez Mavimix Dyskutant (8,420 p.)
+1 głos
2 odpowiedzi 900 wizyt
pytanie zadane 31 grudnia 2020 w HTML i CSS przez kapsel5308 Początkujący (360 p.)
0 głosów
0 odpowiedzi 387 wizyt
pytanie zadane 21 listopada 2020 w HTML i CSS przez Bartek12 Mądrala (5,510 p.)

93,078 zapytań

142,041 odpowiedzi

321,445 komentarzy

62,422 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...