Dziedziczenie koloru tekstu (gradient)

Question

Witam, mam pytanie odnośnie dziedziczenia koloru tekstu, który jest gradientem.

Fragment kodu HTML:

		<nav>
			<ul>
				<li><a href="#" class="menu-item-1">Home</a></li>
				<li><a href="#" class="menu-item-2">Forum</a></li>
				<li><a href="#" class="menu-item-2">Register</a></li>
				<li><a href="#" class="menu-item-2">Support</a></li>
				<li><a href="#" class="menu-item-3"><p class="font-download">Download</p> <p class="font-client">Client 1,2 GB</span></a></li>
				<!--<li><a href="#" class="menu-item-6">ItemShop</a></li>
				<li><a href="#" class="menu-item-7">Rankings</a></li>
				<li><a href="#" class="menu-item-8">Contact</a></li>
				<li><a href="#" class="menu-item-9">Events</a></li>
				-->
			</ul>
		</nav>

Fragment CSS:

ul > li{
	float: left;
	margin-left: 25px;
	list-style-type: none;
	text-transform: uppercase;
	font-size: 12px;
	background-image: -webkit-gradient(linear,
		left top, left bottom,
		from(#c2b59b),
		to(#817762));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
	line-height: 46px;
	text-shadow: 0 0 5px rgba(0,0,0,0.35);
}

I moje pytanie brzmi czemu nie mogę zmienić koloru .font-download i .font-client, domyślnym kolorem jest gradient, który nadałem dla ul > li, ale skoro elementowi li nadałem klasę i ustawiłem inny kolor to powinien się on zmienić a tak się nie dzieje.

Kolor mogę zmienić jedynie dodając gradient, a kolor chce ustawić jednolity, czyli czarny i zielony za pomocą - color: #000;

Czy da się to jakoś obejść czy muszę po prostu każdej klasie ustawić w css`ie gradient?

Trochę to niszczy porządek w kodzie ;/

Answer 1

Jeżeli dobrze zrozumiałem, to chcesz po prostu zmienić kolor tekstu dla poszczególnych linków.
Nie możesz tego zrobić, ponieważ dodałeś -webkit-text-fill-color: transparent; gdy to usuniesz problem znika i możesz nadać kolor tekstu.

.font-download {
  color: green;
}

 

+ to co napisał HaKIM. Masz zamknięty span, zamiast p
P.S. Lepiej użyć span

Comments

Wielkie dzięki za pomoc ;-)

A co do spana to nie wiem jak w nim przełamać tekst do następnej linii, a z tego co słyszałem to br`a do tego nie powinno się używać, a jeśli użył bym white-space: pre; to kod wyglądał by trochę nienaturalnie, bo napis byłby przy samej krawędzi w kodzie.

A jeśli chodzi o te właściwości, to jakie one mają tak w ogóle zadanie?

 -webkit-text-fill-color: transparent;

  -webkit-background-clip: text;

Resztę kodu odnośnie gradientu rozumiem, ale tych dwóch linijek nie za bardzo.

---

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

Zawsze można użyć span i nadać mu display: block;

---

Dzięki ;-)

Answer 2

Masz błąd w kodzie.

Nie zamknąłeś elementu p - zamiast tego masz span.

Poprawiony kod:

<nav>
<ul>
<li><a href="#" class="menu-item-1">Home</a></li>
<li><a href="#" class="menu-item-2">Forum</a></li>
<li><a href="#" class="menu-item-2">Register</a></li>
<li><a href="#" class="menu-item-2">Support</a></li>
<li>
    <a href="#" class="menu-item-3">
      <p class="font-download">Download</p> 
      <p class="font-client">Client 1,2 GB</p>
    </a>
</li>
<li><a href="#" class="menu-item-6">ItemShop</a></li>
<li><a href="#" class="menu-item-7">Rankings</a></li>
<li><a href="#" class="menu-item-8">Contact</a></li>
<li><a href="#" class="menu-item-9">Events</a></li>
</ul>
</nav>

Sprawdź czy coś dało.

Dodatkowo, podaj klasy font-download i font-client. Raczej się przydadzą. :d

Comments

Dzięki, rzeczywiście nie zamknąłem :D

A co do tych klas, to raczej nie będą potrzebne, bo tam ma być jedynie jedna właściwość, mianowicie color: #fff;

Ale kolega niżej wyjaśnił, więc to tyle ;-)