IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Patrik Jíra
Člen
Avatar
Patrik Jíra:16.2.2017 20:44

Zdravím, potřeboval bych radu. Ve footer jsem vytvořil odkazy viz. obr. 2, na ně jsem použil css hover se změnou barvy a změnou tučnosti viz. obr. 1, a stalo se, že po najetí myší na odkaz se ztuční a změní se barva písma, ale zároveň se mi se změnou tučnosti odkazy posouvají směrem doprava. Potřeboval bych, aby se hover aplikoval, ale aby se odkazy neposouvaly doprava. Děkuji moc za radu.

 
Odpovědět
16.2.2017 20:44
Avatar
00
Člen
Avatar
00:16.2.2017 21:14

To u písem s proměnlivou šířkou písmene není možné. Po najetí písmeno změní šířku. Je ale možné přidat stín (nerozmazaný, posunutý), který napodobuje tučné písmo:

/* CSS */
text-shadow: 1px 0px 0px black;

Nahraďte tím to nastavení tučnosti.

 
Nahoru Odpovědět
16.2.2017 21:14
Avatar
00
Člen
Avatar
00:16.2.2017 21:16

Pro lepší čitelnost je vhodné vždy aplikovat toto:

letter-spacing: 1px;
 
Nahoru Odpovědět
16.2.2017 21:16
Avatar
Jiří Fencl
Člen
Avatar
Jiří Fencl:16.2.2017 21:19

Resenim by take bylo mit 5 float bloku se sirkou 20%, pak nebude mit zmena tucnosti vliv na ostatni prvky

 
Nahoru Odpovědět
16.2.2017 21:19
Avatar
00
Člen
Avatar
00:16.2.2017 21:25

Použití ( JSFiddle ):

.prvek {
  letter-spacing: 1px;
}
.prvek:hover {
  text-shadow: -1px 0 0;
}
  1. Když se vynechá black, použije se barva písma.
  2. -1px v text-shadow text ztuční doleva, 1px doprava
 
Nahoru Odpovědět
16.2.2017 21:25
Avatar
Jiří Fencl
Člen
Avatar
Odpovídá na 00
Jiří Fencl:16.2.2017 21:28

Taky muzes retezit text shadow za sebe aby byl efekt silnejsi :

text-shadow: -1px 0 0,1px  0 0,0 1px 0, 0 -1px 0;
 
Nahoru Odpovědět
16.2.2017 21:28
Avatar
00
Člen
Avatar
Odpovídá na 00
00:16.2.2017 21:29

Ve vašem případě:

footer {
  letter-spacing: 1px;
}
footer:hover {
  text-shadow: -1px 0 0;
}
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
16.2.2017 21:29
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.