Barevný přechod: čisté CSS, žádné obrázky

1. Návštěvník 9C5FADC5 20. 8. 2009 22:17

   (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.)

2. Návštěvník 9FCEC34D 21. 8. 2009 00:05

   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ý :)

3. Návštěvník 27854355 21. 8. 2009 00:12

   <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>

4. Návštěvník 27854355 21. 8. 2009 00:17

   <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>

5. Návštěvník 9C5FADC5 21. 8. 2009 10:42

   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! :-))

6. Návštěvník 27854355 21. 8. 2009 10:59

   <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>

7. Návštěvník 9C5FADC5 21. 8. 2009 12:21

   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 :-)

8. Návštěvník AC325519 21. 8. 2009 13:50

   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?

9. Návštěvník 27854355 21. 8. 2009 14:07

   <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>

10. Návštěvník D17D61D2 21. 8. 2009 15:59

    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.

11. Návštěvník 9C5FADC5 22. 8. 2009 00:10

    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.

12. Návštěvník 5A799C22 27. 8. 2009 20:27

    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

13. Návštěvník AC325519 28. 8. 2009 09:13

    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

← Zpět na všechna témata