Barevný přechod: čisté CSS, žádné obrázky
(mám potřebu se chlubit)
Barevný přechod: čisté CSS, žádné obrázky (a pro generování trocha PHP):
http://programs.nikde.eu/cssprechod-set.php
(pro základní ukázku klikněte na "Zobrazit stránku podle nastavení", zdroják na požádání)
Myslíte si, že je to rozumný způsob? Nebo byste to dělali jinak a lépe? (Nefunguje to v IE6, chybí mi tam doplnit filter.)
Barevný přechod: čisté CSS, žádné obrázky (a pro generování trocha PHP):
http://programs.nikde.eu/cssprechod-set.php
(pro základní ukázku klikněte na "Zobrazit stránku podle nastavení", zdroják na požádání)
Myslíte si, že je to rozumný způsob? Nebo byste to dělali jinak a lépe? (Nefunguje to v IE6, chybí mi tam doplnit filter.)
Co dodat, pěkné..
..ale. Stojí za zvážení, jestli není lepší vytvořit jeden obrázek (velikost 1kB), který bude mít adekvátní přechod na pozadí. Tohle CSS řešení totiž z hlediska velikosti zvětší zdrojový kód o nějakých 25-30kB.
___
I když..v dnešní době se na ty velikosti už moc nehraje, jestli má textura 50kB nebo 100kB je prakticky jedno. Nejvíce času zabere samostný požadavek o soubor, samotný přenos je zanedbatelný :)
..ale. Stojí za zvážení, jestli není lepší vytvořit jeden obrázek (velikost 1kB), který bude mít adekvátní přechod na pozadí. Tohle CSS řešení totiž z hlediska velikosti zvětší zdrojový kód o nějakých 25-30kB.
___
I když..v dnešní době se na ty velikosti už moc nehraje, jestli má textura 50kB nebo 100kB je prakticky jedno. Nejvíce času zabere samostný požadavek o soubor, samotný přenos je zanedbatelný :)
<HTML>R.U.R.: Skvělá ukázka toho, jak se to dělat nemá. Obrázek a CSS jsou správné postupy - tvůj postup ruší sémantiku stránky.
<small>Kdyby byli autoři CSS standardu normální lidi a ne idioti, tak máme přechody i nějakým oficiálním příkazem v CSS. (Stejně tak by mohly oficiálně existovat zakulacené rohy a spousta další věcí, které kodéři musí ochcávat obrázky či hromadami 1px divů...)</small></HTML>
<small>Kdyby byli autoři CSS standardu normální lidi a ne idioti, tak máme přechody i nějakým oficiálním příkazem v CSS. (Stejně tak by mohly oficiálně existovat zakulacené rohy a spousta další věcí, které kodéři musí ochcávat obrázky či hromadami 1px divů...)</small></HTML>
<HTML>Freeze: Obsah souboru se dá v případě potřeby zadat v nějakém tom base64 kódu a zapsat přímo do stránky... Říká se tomu <a href="http://www.websiteoptimization.com/speed/tweak/inline-images/">
inline images</a>.</HTML>
inline images</a>.</HTML>
Hm, nejvíc samozřejmě souhlasim s tim "Kdyby byli autoři CSS standardu...", docela mě překvapilo, že na to fakt nic neni, ani nestandardního (krom IE filtrů, který ale ani v IE nefungujou vždy).
Takhle je to imho technicky +- nastejno (obrázek nebo divy&opacity), ale s tou sémantiku je to fakt, backgroung-image je sémanticky čistý, tohle je na první (i další) pohled sémantická prasárna. Ale některé věci imho jinak než prasácky udělat nejdou, třeba text s obrysem.
Zase já nerad cpu obrázky tam kde nemusej bejt. Ale to je spíš osobní preference než BCP.
Tohle má tu výhodu, že to může bejt pružnější - přinejmenším změnit ty barvy je otázka pár vteřin.
Btw. grafickej přechod vlastně ani nevim, v čem bych dělal, pač na grafiku já jsem levej, umim používat akorát malování a IrfanView:-D Ty větší programy jsou na mě moc složitý...
Inline images: cool! :-) Bere mi to vítr z plachet pro postěžování si na otevírání spojení navíc pro ten obrázek! :-))
Takhle je to imho technicky +- nastejno (obrázek nebo divy&opacity), ale s tou sémantiku je to fakt, backgroung-image je sémanticky čistý, tohle je na první (i další) pohled sémantická prasárna. Ale některé věci imho jinak než prasácky udělat nejdou, třeba text s obrysem.
Zase já nerad cpu obrázky tam kde nemusej bejt. Ale to je spíš osobní preference než BCP.
Tohle má tu výhodu, že to může bejt pružnější - přinejmenším změnit ty barvy je otázka pár vteřin.
Btw. grafickej přechod vlastně ani nevim, v čem bych dělal, pač na grafiku já jsem levej, umim používat akorát malování a IrfanView:-D Ty větší programy jsou na mě moc složitý...
Inline images: cool! :-) Bere mi to vítr z plachet pro postěžování si na otevírání spojení navíc pro ten obrázek! :-))
<HTML>Právě že nestandardní příkaz existuje:
<a href="http://webkit.org/blog/175/introducing-css-gradients/">
http://webkit.org/blog/175/introducing-css-gradients/</a>
Ale funguje jen ve webkitových prohlížečích (Safari, Chrome, Konqueror...).</HTML>
<a href="http://webkit.org/blog/175/introducing-css-gradients/">
http://webkit.org/blog/175/introducing-css-gradients/</a>
Ale funguje jen ve webkitových prohlížečích (Safari, Chrome, Konqueror...).</HTML>
WOW, tak to se mi předtím nepodařilo vygooglit... Respektive koukám, že to je v googlu na 12. místě, ale asi jsem to předtim přehlíd... Tak to je fajn, můžu to používat aspon pro sebe, Hrome to zobrazuje pěkně :-) Dík za tip :-)
Normalni clovek pouzije obrazek.
Clovek, ktery se zrovna nudi, a vime, ze taci jsou uplne ti nejhorsi :) , tak vymysli jine zpusoby, treba CSS, JS a pod.
Ja bych treba, kdyz uz, pouzil, jak bylo zmineno, prepis obrazku na base64 do css. A nebo javascript. A nebo filtry IE, mozna FF, mozna webkit, mozna khtml (konkqueror?)
http://www.volny.cz/peter.mlich/jpw/#skriptiky
barevny prechod
Nebo ze slayeroffice.
Vysledek je v podstate uplne stejny jako u toho obrazku, jen se usetri cas a pamet programu pro zobrazovani.
Mimochodem, ten kod obsahuje zbytecne prvky class a pod a proste to stacilo cele ohranicit divem s jednim class.
Nípal
"... tak máme přechody i nějakým oficiálním příkazem..."
Ten prikaz existuje, bg image.
IE zavedl svuj prikaz filter: , kde definuje funkce pro filtry.
CSS3 definuje opacity
" byli autoři CSS standardu normální lidi "
S tim bohuzel souhlasim, css je z vetsi casti odflaknute a nevim, zda se dockame jeste za zivota nejake zmeny. Treba definovani konstant (definovat barvy na zacatku a pak jen odkazat konstantou) je uz celou radu let naprosto postradane a kde nic, tu nic, zadny upgrade css.
Co kdybychom zavedli nejake css3-cz, podstrcili to opere a ff, pac ti se zdaji byt tvarni i s konstantami, volanim JS filtru a pod?
Clovek, ktery se zrovna nudi, a vime, ze taci jsou uplne ti nejhorsi :) , tak vymysli jine zpusoby, treba CSS, JS a pod.
Ja bych treba, kdyz uz, pouzil, jak bylo zmineno, prepis obrazku na base64 do css. A nebo javascript. A nebo filtry IE, mozna FF, mozna webkit, mozna khtml (konkqueror?)
http://www.volny.cz/peter.mlich/jpw/#skriptiky
barevny prechod
Nebo ze slayeroffice.
Vysledek je v podstate uplne stejny jako u toho obrazku, jen se usetri cas a pamet programu pro zobrazovani.
Mimochodem, ten kod obsahuje zbytecne prvky class a pod a proste to stacilo cele ohranicit divem s jednim class.
Nípal
"... tak máme přechody i nějakým oficiálním příkazem..."
Ten prikaz existuje, bg image.
IE zavedl svuj prikaz filter: , kde definuje funkce pro filtry.
CSS3 definuje opacity
" byli autoři CSS standardu normální lidi "
S tim bohuzel souhlasim, css je z vetsi casti odflaknute a nevim, zda se dockame jeste za zivota nejake zmeny. Treba definovani konstant (definovat barvy na zacatku a pak jen odkazat konstantou) je uz celou radu let naprosto postradane a kde nic, tu nic, zadny upgrade css.
Co kdybychom zavedli nejake css3-cz, podstrcili to opere a ff, pac ti se zdaji byt tvarni i s konstantami, volanim JS filtru a pod?
<HTML>peta: Anarchie je to poslední, co jakýkoliv zavedený systém potřebuje. Takže s tebou souhlasím ohledně nějaké vlastní iniciativy - můžeš to zkusit.</HTML>
R.U.R: Můžeš se nechat inspirovat http://www.google.cz/images/nav_logo6.png
Celý design výsledku vyhledávání Google je tak soustředěn do jediného obrázku. Takže těch spojení je minimum.
Celý design výsledku vyhledávání Google je tak soustředěn do jediného obrázku. Takže těch spojení je minimum.
Kit: tak tohle jsem ještě neviděl a ani by mě to asi nenapadlo :-)) Je to dobrá pakárna :-)) Díky, je to moc hezkej trik.
peta:
Ano, máš pravdu, nudím se :-)) Respektive se mi nechce pracovat a tak místo toho vymejšlim kraviny :-)
"A nebo javascript. A nebo filtry IE, mozna FF, mozna webkit, mozna khtml (konkqueror?)
http://www.volny.cz/peter.mlich/jpw/#skriptiky
barevny prechod
Nebo ze slayeroffice."
Barevnej přechod v JS je prakticky to samý co mam já. A pak kdo se nudí a je nejhorší :-)) Co s FF? Že to umí webkit jsem nevěděl, ale už to tu bylo zmíněno... A btw obecně si myslím že dělat javascriptem vzhled stránky není dobře. S JS by se měly dělat funkce, něco dynamickýho, a ne vzhled, což je z podstaty věci statická záležitost.
Za připomínku s classama děkuju, jsem blb že jsem to napsal tak jak jsem to napsal a už jsem to opravil :-))
"
"... tak máme přechody i nějakým oficiálním příkazem..."
Ten prikaz existuje, bg image.
IE zavedl svuj prikaz filter: , kde definuje funkce pro filtry.
CSS3 definuje opacity
"
Tuhle část jsem vůbec nepochopil, přijde mi to nějak mimo mísu; krom IE filtrů, o těch už jsem psal.
A zrovna ty konstanty sice v CSS chybí, ale když se mi chce, tak můžu použít PHP, a konstanty si tam vyechovat. Aneb víc bych uvítal přechody než konstanty.
peta:
Ano, máš pravdu, nudím se :-)) Respektive se mi nechce pracovat a tak místo toho vymejšlim kraviny :-)
"A nebo javascript. A nebo filtry IE, mozna FF, mozna webkit, mozna khtml (konkqueror?)
http://www.volny.cz/peter.mlich/jpw/#skriptiky
barevny prechod
Nebo ze slayeroffice."
Barevnej přechod v JS je prakticky to samý co mam já. A pak kdo se nudí a je nejhorší :-)) Co s FF? Že to umí webkit jsem nevěděl, ale už to tu bylo zmíněno... A btw obecně si myslím že dělat javascriptem vzhled stránky není dobře. S JS by se měly dělat funkce, něco dynamickýho, a ne vzhled, což je z podstaty věci statická záležitost.
Za připomínku s classama děkuju, jsem blb že jsem to napsal tak jak jsem to napsal a už jsem to opravil :-))
"
"... tak máme přechody i nějakým oficiálním příkazem..."
Ten prikaz existuje, bg image.
IE zavedl svuj prikaz filter: , kde definuje funkce pro filtry.
CSS3 definuje opacity
"
Tuhle část jsem vůbec nepochopil, přijde mi to nějak mimo mísu; krom IE filtrů, o těch už jsem psal.
A zrovna ty konstanty sice v CSS chybí, ale když se mi chce, tak můžu použít PHP, a konstanty si tam vyechovat. Aneb víc bych uvítal přechody než konstanty.
IE má filter pro lineární gradient pozadí, ukázka:
http://teststranek.kvalitne.cz/gradient-ie/
To, že webkit taky umí gradient je pro mě překvapení (vyzkoušel jsem v Chrome) a dalším překvapením bylo, že chystaný Firefox 3.6 umí taky gradient.
V původním příkladu v podstatě jde o variantu pseudopozadí:
http://www.jakpsatweb.cz/priklady/background-position.html
Barvy by šlo spočítat uklienta v JS, někak takto:
http://www.jakpsatweb.cz/priklady/barvy-4096.html
http://teststranek.kvalitne.cz/gradient-ie/
To, že webkit taky umí gradient je pro mě překvapení (vyzkoušel jsem v Chrome) a dalším překvapením bylo, že chystaný Firefox 3.6 umí taky gradient.
V původním příkladu v podstatě jde o variantu pseudopozadí:
http://www.jakpsatweb.cz/priklady/background-position.html
Barvy by šlo spočítat uklienta v JS, někak takto:
http://www.jakpsatweb.cz/priklady/barvy-4096.html
Bubák (teststranek.kvalitne.cz)
http://www.jakpsatweb.cz/priklady/barvy-4096.html
Priklad barvy nepocita, pouze vypisuje. Priklad, ktery pocita barvy jsem nasel na jaknaweb.cz , jeden z mala prikladu spravne napsany :) Priklad na gradient jsem nasel na slayeroffice. Resp neco teda na jakpsatweb je, ale jinde :)
http://www.volny.cz/peter.mlich/jpw/barvicky1.html
http://www.jakpsatweb.cz/priklady/barvy-sede.html
http://www.jakpsatweb.cz/priklady/barvy-4096.html
Priklad barvy nepocita, pouze vypisuje. Priklad, ktery pocita barvy jsem nasel na jaknaweb.cz , jeden z mala prikladu spravne napsany :) Priklad na gradient jsem nasel na slayeroffice. Resp neco teda na jakpsatweb je, ale jinde :)
http://www.volny.cz/peter.mlich/jpw/barvicky1.html
http://www.jakpsatweb.cz/priklady/barvy-sede.html
Nové příspěvky
Smazani stranek
index.html )
HTML Tabulky
Zalamování textu pomocí CSS
Přesměrování
Arduino - 400 Bad Request
Nastavení českých písmen
POMOC! po druhé!
Pozicování (obrázek na střed).
Jak vycentrovat obrazek, ktery je v prikazu absolute ?
Použití tvůrce webu
katalog
async functions' is only available in es8 (use 'esversion: 8')
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Problém s načítáním
Div pro reklamu překrývá prvky webové stránky
Nezobrazuje se mi lišta s reklamou
ako nahrám na môj web favicon?
JavaScript - nečitelný soubor *.js - jak prohlížet/editovat
Problém s textem
videostream
index.html
GB///refresh///JS
Total Commander - server nenalezen
Mobilní verze webu
Další témata
STATUS
FTP
HTTP
SQL
PHP
© 2002 - 2024 Web zdarma s.r.o. — zvládnete to sami