Sleduj návody s komentářem. Upload obrázků Upload souborů War3Zone.eu Webmail Podpoř náš web a vyber si výhodu




Sponzor VPS:






      

Serialbook - upozornění na nové epizody oblíbených seriálů

Tvorba webu Návody

Moderátor: Web poradce

CSS3-Speciální funkce [Předpony]

Příspěvekod  blueranger31 » čtv 13. zář 2012 17:33:23

Ahoj,
jelikož se mě celkem dost lidí ptalo na speciální funkce (např. zaoblení rámečku - border-radius), rozhodl jsem se zde napsat několik případů a chyb s takzvanými předponami. Jde o to, že máte například nějaké "okénko" s černým pozadím a bílým rámečkem. No a dejme tomu, že ho chceme zaoblit.

Takže script by vypadal takhle:
Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!


Tento script by po otevření v Google Chromu měl vytvořit již zmiňované "okýnko" s černým pozadím a bílým, mírně zaobleným rámečkem. Jenže teď přichází ona chyba. Otevřete si to v Mozille Firefox, ve které následně uvidíte klasický bílý ostrý rámeček, nikoliv zaoblený. Je to způsobeno tím, že Mozilla Firefox běží na jiném jádru, než Google Chrome. Takže pokud chceme, aby se nám to zobrazovalo zaobleně i v Mozille, musíme dát ještě border-radius s předponou. Dělá se to jednoduše: Na nový řádek za

Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!


dáme ještě

Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!


Takže script bude vypadat takto:

Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!


Jednoduše před danou funkci (v tomhle případě border-radius) dáme předponu (viz. níže)

Pokud tedy chcete, aby se Vám to zobrazovalo stejně ve všech prohlížečích, podporujících Kaskádové styly 3 (CSS3), musíte udělat script takto:

Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!


Stejně se to používá i u většiny ostatních speciálních funkcí, např. box-shadow (stín). Doufám, že jste to pochopili, a že jste se něčemu přiučili. Pokud by jste měli nějaké poznámky nebo by jste mě chtěli doplnit, napište mi to prosím do komentáře. :-)

Vysvětlivky k předponám:

Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!


Pokud by jste chtěli nějaký další tutoriál nebo by jste chtěli vysvětlit něco, čemu nerozumíte, napište to do komentáře nebo do soukromé zprávy a já na to sepíšu další návod. Umím jen jazyky HTML, CSS a PHP, takže pokud budete chtít něco ohledně nějakého jiného jazyka, nezaručuji funkčnost návodu :D :D

  blueranger31
Podpora
Podpora
 
Příspěvky: 425
Registrován: úte 26. črc 2011 10:43:23
Bydliště: Okres Přerov
Podpora: 175 Kč

Re: CSS3-Speciální funkce [Předpony]

Příspěvekod  Vasekdvor » stř 20. úno 2013 17:47:45

Hezké Nový google chrome již nepotřebuje předponu -webkit- nyní již podporuje border-radius a další CSS3 vymoženosti.Nicméně pro zpětnou kompatibilitu jej můžete zanechat.Můžete si to vyzkoušet v chromu po kliknutí na rámeček se zaoblenými hranami pomocí RMB a vybrání volby Zkontrolovat prvek a zkoušet zapínat a vypínat styly border-radius a -webkit-border-radius , uvidíte že chrome si automaticky zapne alespoň jednu z nich.

S pozdravem Vasekdvor
  Vasekdvor
Fanatik
Fanatik
Uživatelský avatar

 
Příspěvky: 30
Registrován: ned 08. srp 2010 19:21:06
Podpora: 79 Kč


Zpět na Návody

Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 1 návštěvník


Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte. Další informace