CSS gradient + text.shadow

Question

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>

 

Answer 1

Użyj pseudoklasy :after lub :before dla literki b. Jako content daj literkę b z cieniem i daj ją pod spód.

Comments

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.

---

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)