css efekt na zesvětlení horní části

CZechBoY · Příspěvekod **CZechBoY** » 29 lis 2009 15:23

Zdravim,
existuje nějaká funkce v CSS nebo v php na zesvětlení horní části pozadí ?
např. jako tehle obrázek:

Reklama

Příspěvekod **Myloš** » 29 lis 2009 15:40

Jak to myslíš? Jestli ti jde o to, aby tam byl normálně jeden obrázek a při najetí myší zesvětlený, udělej si dva obrázky.
První dej textu na pozadí (aby tam ten text byl opravdu jako text a ne jako obrázek) – klasický backgournd-image a pro stav :hover urči jako pozadí ten druhý obrázek.

Případně lze totéž dělat pomocí dvou (či více) stavů jednoho obrázku.

Nebo máš na mysli něco jiného?

CZechBoY · Příspěvekod **CZechBoY** » 29 lis 2009 16:22

Ne.
Udělám odkaz <a href="#">Team</a>
viz: http://www.jakpsatweb.cz/priklady/jakotlacitko.html
a potřebuju aby to k něčmeu vypadalo, zhruba jako ten obrázek.
Potom ten efekt zesvětlení udělám v css jako a:hover atd.
Právě teď to mám na webu přes ty obrázky, zdá se mi to amatérský a pro pomalý připojení strašně náročný, ikdyž je to malý obrázek.
Když mi jede net pomalu tak je to vidět ten loading stránky.

Příspěvekod **Myloš** » 29 lis 2009 17:41

Zdá se ti to amatérské – no ono jde o to, jak je to udělané.
Lepší řešení než přes background-image opravdu neznám. Prošel sis ty Pixyho Rychlé rollovery bez načítání? – Tam pak nemá co problikávat ani při pomalém připojení.

Ještě bych doplnil praktickou ukázku:
http://mfp.php5.cz/ukazky/tlacitka/

Celé to obsluhuje tento obrázek:

a kód stránky je takto:

Kód: Vybrat vše

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body, h1, ul, li {margin: 0; padding: 0;}
body {font: 90%/1.4 'DejaVu Sans', Verdana, Sans-serif; color: white; background-color: gray;}
div {width: 50em; margin: 15px auto; padding: 25px 40px; border: 3px groove gray; background-color: white; color: black;}
ul {list-style-type: none;}
li {height: 20px; width: 100px; line-height: 20px; text-align: center; margin-bottom: 5px;
background: #ffa680 url(tlacitko.png) no-repeat bottom center;}

a {text-decoration: none; color: black; background: #ffa680 url(tlacitko.png) no-repeat bottom center;
display: block;}
a:hover {background-position: center; color: navy;}
a:active {background-position: top;}

</style>
<title>menu</title>
<div>
<h1>Menu</h1>
<ul>
   <li><a href="#">Koza</a>
   <li><a href="#">Nozdra</a>
   <li><a href="#">Ještě</a>
   <li><a href="#">Kleště</a>
   <li><a href="#">Bleble</a>
</ul>
</div>

Odkaz má tři stavy: normální, hover a při kliknutí.
A vidíš někde nějaký problém?

onewinger · Příspěvekod **onewinger** » 29 lis 2009 17:44

To co ti radil Myloš používám také a s přeblikáváním apod. i při malé rychlosti připojeni nemám problém. :wink:

CZechBoY · Příspěvekod **CZechBoY** » 29 lis 2009 17:51

Takže jen přes obrázky.
Dobře no, takže musim dát preload jako teď a nic se nedá dělat :(
Mě top přišlo jako že by se to docela dalo no.

Stene · Příspěvekod **Stene** » 29 lis 2009 19:06

Teď už se používá jenom přeblikávání obrázků.. Načtení druhého obrázku uživatel ani nezaznamená..

Příspěvekod **Myloš** » 29 lis 2009 19:11

Navíc v řešení, které jsem použil, nemůže obrázek probliknout ani při velmi pomalém spojení, protože je pod ním (pro prvek <li>) ještě jednou přednačtený od samého začátku.

Stene · Příspěvekod **Stene** » 29 lis 2009 19:14

Tak tak..

CZechBoY · Příspěvekod **CZechBoY** » 29 lis 2009 19:37

Proto píšu že to tak právě mám...
Takže na CSS se můžu vykašlat, je k ničemu v tomhle případě.
vyřešeno

css efekt na zesvětlení horní části Vyřešeno

css efekt na zesvětlení horní části

Re: css efekt na zesvětlení horní části

Re: css efekt na zesvětlení horní části

Re: css efekt na zesvětlení horní části

Re: css efekt na zesvětlení horní části

Re: css efekt na zesvětlení horní části

Re: css efekt na zesvětlení horní části

Re: css efekt na zesvětlení horní části

Re: css efekt na zesvětlení horní části

Re: css efekt na zesvětlení horní části Vyřešeno

Kdo je online