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

Obramowanie / cień czcionki

VPS Starter Arubacloud
0 głosów
587 wizyt
pytanie zadane 24 maja 2017 w HTML i CSS przez niezalogowany

No cześć.

Tworzę "sobie" proste menu na stronę WWW i natknąłem się na mały "problem".

Ciężko mi wyjaśnić o co chodzi, ale spróbuję - po najechaniu na element tekst w nim ma zmienić kolor na inny i zrobić to od lewej do prawej strony. I teraz - wszystko działa, ale pozostaje białe, jednopikselowe "obramowanie" po starej czcionce. Problem rozwiązuje dodanie zeropikselowego cienia do "nowego elementu".

Pytanie - skąd się bierze "stare" obramowanie i dlaczego naprawia to text-shadow z 0px wartościami?

Kod: http://codepen.io/tls01/pen/NjobVX

(text-shadow jest zakomentowane; usuńcie komentarz, żeby zobaczyć różnicę)

Lub "lokalnie", w poście:

	<body>
		<nav class="container navigation">
			<ul>
				<li><a href="#" data="ELEMENT 1">ELEMENT 1</a></li>
				<li><a href="#" data="ELEMENT  2">ELEMENT 2</a></li>
				<li><a target="_blank" href="#" data="ELEMENT 3">ELEMENT 3</a></li>
				<li><a href="#" data="ELEMENT 4">ELEMENT 4</a>
			</ul>
		</nav>
	</body>
body {

	background: black;
	background-size: cover;
	font-family: 'Open Sans', sans-serif;
}

.container {
	width: 1200px;
	margin: 0 auto;
}
.navigation {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin-top: 40px;
}
.navigation > ul {
	list-style: none;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	width: 100%;
	margin: 0;
	padding: 0;
}
.navigation > ul > li > a {
	text-decoration: none;
	text-transform: uppercase;
	padding: 20px;
	position: relative;
	color: #FFF;
	letter-spacing: 1px;
	font-weight: 400;
	font-size: 1.1em;
}
.navigation > ul > li > a:before {
	content: attr(data);
	position: absolute;
	overflow: hidden;
	white-space: nowrap;
	max-width: 0;
	color: #39BC54;
	border-bottom: 2px solid #39BC54;
  /* text-shadow: -0px 0 black, 0 0px black, 0px 0 black, 0 -0px black; */
	transition: max-width .2s linear;
}
.navigation > ul > li > a:hover:before {
	max-width: 100%;
}

Mam nadzieję, że udało mi się wyjaśnić, o co chodzi.

2 odpowiedzi

0 głosów
odpowiedź 24 maja 2017 przez zgrybus Pasjonat (24,860 p.)
Śmieszne, bo ja nie widzę u siebie tego białego obramowania. Jaka przeglądarka?
komentarz 24 maja 2017 przez niezalogowany
Google Chrome 58.0.3029.110 (64-bit)
komentarz 24 maja 2017 przez zgrybus Pasjonat (24,860 p.)
Zrób zdjęcie po najechaniu i powiedz gdzie dokładnie jest ten paseczek. ( Dokładnie ta sama przeglądarka )
komentarz 24 maja 2017 przez niezalogowany

Nie "paseczek", a pozostałości białego koloru czcionki, którego ma nie być. 

Jak nie widać na obrazku, to można przybliżyć w jakimś mspaincie - wyżej element bez text-shadow, niżej z text-shadow 0px (i dlaczego ten text-shadow cokolwiek zmienia pomimo tego, że ma 0px?).

komentarz 24 maja 2017 przez niezalogowany

I jeszcze bez przybliżenia, różnica jest bardziej widoczna:

komentarz 26 maja 2017 przez zgrybus Pasjonat (24,860 p.)
może chrome ma domyślnie taki text-shadow - raczej to :) Próbowałeś na innych przeglądarkach?
0 głosów
odpowiedź 24 maja 2017 przez Lu Kiss Dyskutant (7,600 p.)
Właśnie wczoraj w domu a dzisiaj w pracy patrzę i również nie widzę nic...

Podobne pytania

0 głosów
1 odpowiedź 222 wizyt
pytanie zadane 7 listopada 2017 w HTML i CSS przez oes1992 Nowicjusz (120 p.)
0 głosów
1 odpowiedź 994 wizyt
pytanie zadane 2 sierpnia 2017 w HTML i CSS przez kevin Mądrala (5,010 p.)
0 głosów
1 odpowiedź 2,255 wizyt
pytanie zadane 2 maja 2015 w HTML i CSS przez Captivity Obywatel (1,030 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...