CSS efekt "Obrázek do ztracena" – existuje?

[MikeParticipant]

Zdravím,

pozadí sidebaru mám tvořené obrázkem o šířce 240px a výšce 1px, který se v ose “y” opakuje. Vytváří to celkem pěkný vystínovaný sidebar. Nahoře a dole ale samozřejmě končí ostrou hranou. Potřeboval bych řekněme 50px nahoře i dole poslat “do ztracena”, aby postupně splynuly s hlavním pozadím.

Zkoušel jsem něco vyhledat, ale všechny kombinace klíčových slov “CSS effect”, “transition”, “opacity”, “visibility” atd. odkazují na animační efekty mouseover.

Existuje takový efekt pro statický obrázek nebo uměl byste někdo poradit, jak to spáchat?

Díky.

[LukenziParticipant]

tohle forum mě fakt s*** tuny spamu a když člověk chce dát pár odkazů tak má smůlu…

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients#Transparency_and_gradients

http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients

http://css-tricks.com/examples/CSS3Gradient/

http://gradientfinder.com

[sjiamnocnaParticipant Web]

Moc si nedokážu připustit, že by to šlo jednoduše přes CSS vlastnost…

Pokud myslíte to co jsem pochopil já, tak to se běžně dělá více obrázkovým pozadím – tzn. záhlaví – první obrázek s přechodem, opakovaný obr. a hned navazující závěrečný přechodný obr. Ale mimo to, druhá věc je řešení přes border-image, pokud bude nutné – totiž navolit si libovolný obrázek, který si prohlížeč použije k tvorbě okraje.

[MikeParticipant]

to Lukenzi:

Ty odkazy vypadají velmi nadějně, díky za ně, zkusím si s tím pohrát. Aha, takže “gradients” a “transparency” budou ta správná slova. S gradients jsem si už trochu pohrál, moje šablona ho používá, ale jen pro přechod barev. Netušil jsem, že by to šlo použít i pro soubor obrázku.

to sjiamnocna:

Ano, složení ze tří obrázků znám. Spíš mě napadlo, jestli už to dnes nelze dělat nějak elegantněji přes CSS – přeci jen se ty efekty pořád vyvíjí.

S tím border-image jsem asi neporozuměl, jaký je rozdíl oproti té první variantě?

[LukenziParticipant]

S CSS3 se dají dělat kouzla, dnes to opravdu není jen o změně barviček. Co se dříve muselo pracně řešit přes javascript nebo JQuery tak dnes se elegantně vyřeší přes CSS3.

Nějaké ukázky věcí, které se dají dělat jen s CSS3

http://tympanus.net/Tutorials/OriginalHoverEffects/index3.html

http://demo.marcofolio.net/ibm_lotusphere/ (ten poslední je originální obrázek, nahoře pouze CSS)

http://tympanus.net/Tutorials/Animated3DBarChart/

http://tympanus.net/Tutorials/CSS3BouncingBall/

[sjiamnocnaParticipant Web]

CSS to vše umí, ale já se docela bojím toho, že na počítači, který nepodporuje vymoženosti CSS3, bude stránka vypadat o moc hůře, a tak používám tyto efekty jen minimálně a stejně tak je i doporučuju ostatním…

[LukenziParticipant]

sjiamnocna: CSS3 není záležitost počítače ale prohlížeče a každý novější prohlížeč CSS3 umí (IE6 snad používají už jen ti co nemají internet). Jak se který prvek na stránce zobrazí v prohlížeči je pouze na tom kdo kóduje takže není problém vytvořit hezkou a funkční stránku pro všechny prohlížeče, každopádně CSS3, HTML5 a JQuery je budoucnost.

Doby kdy se na stránku kvůli efektům cpali megabajty flashe jsou už pryč, dnes stačí pár řádků toho správného kódu a prohlížeč se už o vše postará.

Jsem taky zastánce jednoduchosti, ale to není důvod proč se nových technologií bát, většinou jde jen o to, že u spousty věcí ulehčují práci.

[MikeParticipant]

sjiamnocna: Taky mi na některém prohlížeči nefungovalo něco, co na jiném ano. Ale asi není třeba se tomu do budoucna vyhýbat, podle toho jak optimisticky zmínil Lukenzi.

Lukenzi: Zatím jsem docílil pouze částečného úspěchu. Zkoušel jsem do toho napasovat ten linear-gradient, ale on využívá obrácený princip, než potřebuju. Překryje barevným přechodem obrázek a pokud je jedna z barev přechodu totožná s barvou pozadí, efekt “do ztracena” by to udělalo. Pokud je (v mém případě) sidebar obrázek a pozadí také, tak to takhle nejde. Potřeboval bych použít opacity nebo transparent přímo na ten vrchní obrázek, aby jeho okraj vymizel a prolnul tak do obrázku pozadí.

Věděl byste, jak na to?

Tady je vidět zmíněný sidebar: http://diwo.us/blog

Pomocí toho linear-gradient je teď v pořádku jen ten pravý horní roh, ale potřebuju všechny 4 rohy. Tento roh mizí do ztracena právě jen díky tomu, že v tom místě se shoduje fixní barva v linear-gradient efektu s barvou obrázku pozadí.

[LukenziParticipant]

Mike: tak teď jsem trochu nepochopil co má být výsledek :)))

něco takového?

[MikeParticipant]

Ne ne. Jak jsem psal hned na začátku. Sidebar by měl mít horních i dolních 50px do ztracena, aby to lépe vypadalo a nekončilo ostrou hranou. On i pozadí jsou z prostínovaného obrázku, takže to spolu vytváří zvláštní efekt. Trochu to opticky klame, tak jdu zrušit ten částečný efekt a nechám jen obrázek.

EDIT: Pravdu měl sjiamnocna, že se to obvykle dělává složením tří obrázků, kdy ten efekt “do ztracena” by nahoře i dole vyřešily ty druhé dva obrázky. Ale smysl mého dotazu byl, jestli by to právě nešlo už jednoduše pomocí CSS. :)

[Autor]

Příspěvky