CSS Drop Shadows - stíny u obrázků v CSS jednoduše!

MyEgo.cz

home foto blogy mywindows.cz kontakt

CSS Drop Shadows - stíny u obrázků v CSS jednoduše!

Technologie 04.04.04
ilustrace

Stíny pod písmem, obrázkem, či citací jsou, a vždy budou, designérsky nesmíně populární. Je to technika jak plochý prostor webových stránek oživit. Tento článek Vám ukáže jak na stíny jen v CSS, aniž by jste museli měnit (X)HTML kód!

1976design.com je blog, který přichází s mnoha zajímavými technikami ohledně využití CSS. Zatímco někteří dělají stíny pod obrázkem pomocí 6 vnořených divů, každý s marginem +1px, , Dunstan navhl řešení mnohem lepší, které, navíc, umožní jen změnit CSS soubor a Vaše obrázky není nutné obalovat 6 divy či sázet je do poziciovaných tabulek.

Je to velice pěkné a čisté řešení, jedná se pouze o změnu CSS a není nutné doplňovat nic do kódu Vašich článků!

Řešení 1976design.com, spočívá ve vytvoření pozadí s background obrázkem, obrázek má velikost cca 3.5kB, při velikosti 800x800px, což postačí na veškeré běžné ilustrace (prakticky nikdy nemají větší rozměry). Obrázek je definován jako background-image v CSS, natáhne se tudíž jednou do cache prohlížeče, a pak je použit na každou ilustraci.

Konkrétní příklad kódu pro obrázek obtékaný zprava:

.leftbox{
  float:left; 
  /* obrázek vlevo */
  background: url(shadowAlpha.png) no-repeat bottom right !important; 
  /* pro Operu a Mozillu použijeme transparentní PNG */
  background: url(shadowAlphas.gif) no-repeat bottom right; 
  /* pro IE musíme ještě doplnit GIF, Opera a Mozilla kvůli !important použije PNG */
  margin: 5px 15px 0px 0px; 
}
  .leftbox img  {
  display: block;
  position: relative;
  background-color: #fff; /* bílé pozadí kolem */
  border: 1px solid #a9a9a9; /* rámeček */
  margin: -6px 6px 6px -6px; /* posun kvůli stínu */
  padding: 4px; /* pozadí 4px mezi rámečkem a obrázkem */
}

Vlastní obrázky jsou ke stažení:

Vlastní XHTML kód s plooucím obrázkem se stínem potom vypadá takto triviálně:

<div class='leftbox'>  <img src='...' alt='...' /> </div>
<p>  text článku... </p>

PS: naprostá většina článků na tomto blogu je zcela originálních, jsou mojí ideou! K tomuto článku mě nicméně inspiroval blog 1976design.com, na který 2x odkazuji. Ne vždy tomu tak na české blogové scéně je. Jsou určité blogy, které i cizí myšlenky vydávají za... svoje, neodkazují. A to je hodně špatně!

Se zajímavým řešením, které je ale trošku jiné, přichází i Mirek Vavřín, používá jen obrázek 6x6px, samozřejmě jen v jednom odstínu, takže to není tak "hladké" jako zde prezentované řešení. Nicméně, má to smysl, třeba jako stín pod citace <blockquote> či kód <pre>. Děkuji!

Komentáře

  1. 1 Jiří Macich ml. 04.04.04, 03:04:33
    FB

    A co prostě jen filtry? Ale ty jdou vlastně jen v IE ...

  2. 2 Jirka Lahvička 04.04.04, 03:04:50
    FB

    "Jsou určité blogy, které i cizí myšlenky vydávají za... svoje, neodkazují."

    Například které? Opravdu si takový nedokážu vybavit, připadá mi, že odkazují prakticky všichni. Jinak blog je už z definice sbírka komentovaných odkazů jinam.

  3. 3 Radek Hulán 04.04.04, 03:04:52
    FB

    [2] ale ano, odkazování je jeden z možných fungování blogu, a má smysl, ale znám 2 menší blogy, co uvádějí cizí myšlenky a neodkazují... Jmenovat nebudu. Autoři těch 2 blogů to jistě pochopí. Předpokládám, že se jednalo spíš o opomenutí, než záměr.

  4. 4 Tomáš Kocourek [aka Tomcat] 04.04.04, 04:04:10
    FB

    Psát blog, který upozorňuje na něco jiného není sice špatné fungování blogu, ale určitě by se v něm měli objevit vlastní myšlenky.

  5. 5 Lukáš Hroch 04.04.04, 05:04:31
    FB

    Je to hezký řešení, ale furt to má malinkou chybičku - není to úplně tak stín, jelikož v pravém horním a levém dolním rohu by správně nemělo býti nic (v tomto případě 6x6px) a zde stále pokračuje ten stín z obrázku na pozadí. Při malém stínu to nemusí být tak patrné, ale pokud "oddálíme" stín, tak to již není ono. Řešením by bylo absolutní pozicování img vůči rodičovskému prvku, kterému by se však museli (pokud se nemýlím) udat rozměry.

  6. 6 Radek Hulán 04.04.04, 05:04:40
    FB

    [5] řešením by Lukáši nebylo ani absolutní poziciování, jen snad speciální background-image pro každý obrázek, což je ale je nesmysl z důvodu velikosti natahovaných dat.

    To už je snad pak lepší ten stín tam dodělat, ke každému obrázku, nějakým makrem ve Photoshopu a na CSS se vykašlat ;)

    Nicméně, toto řešení, kromě toho, že vlevo dole je 3x3px pixely navíc, což opravdový stín fakt nemá, perfektní v tom, že nemusím NIC modifikovat ani na XHTML kódu, ani na obrázku samotném... A z 99% to vypadá naprosto stejně jako stín opravdový :idea:

  7. 7 Jiří Macich ml. 04.04.04, 07:04:09
    FB

    [3] No, já občas něco prolinkuju nebo ocituju (s odkazem), ale spíš se snažím psát své vlastní zápisky, třeba i na základě informací jinde opatřených (samozřejmě s odkazem). Tyto informace třeba rozvedu, porovnám či doplňím nebo je jen okomentuji.

    Jestli by někomu připadalo, že moje myšlenka je cizí, tak to může být:

    a) shoda náhod
    b) špatný úsudek čtenáře
    c) nepochopení, že nevyjdřuji myšlenku, ale souhlas s myšlenkou.

    Snad jedním z těch dvou blogů není můj ...

  8. 8 Radek Hulán 04.04.04, 07:04:18
    FB

    [7] oh, ty to ROZHODNĚ NEJSI :)) Naprostá většina bloggerů dodržuje nepsanou etiku, a, i když se jen INSPIRUJÍ, tak rozhodně odkazují.. Je to základ slušnosti vůči autorovi původní myšlenky, či celého kódu.

  9. 9 mirun 04.04.04, 07:04:25
    FB

    [6] ono by stačilo nahoře a vlevo udělat na obrázku stínu průhledný proužek o šířce vzdálenosti stínu. Ta totiž bude většinou pro celý web (nebo vzhled) jednotná.

  10. 10 Radek Hulán 04.04.04, 07:04:27
    FB

    [9] tomu řešení moc nerozumím, problém je, že každý obrázek je jinak velký, takže nahoře a vlevo je pokaždé někde jinde..

  11. 11 Michal 04.04.04, 11:04:35
    FB

    Toto řešení je publikováno tady: http://www.alistapart.com/a...
    v angličtině. Stín nemusí začínat v rovině s horní a levou hranou obrázku. Normálního stínu je dosaženo pomocí záporné hodnoty margin nahoře a vlevo: .leftbox img {margin: -6px 6px 6px -6px}

  12. 12 Michal 09.04.04, 12:04:15
    FB

    Dunstan má Radku už má aktualizovaný CSS pro Drop shadow . Koukněte se na změnu v nastavení margin a napište, jestli Vám to funguje, prosím.

  13. 13 Radek Hulán 09.04.04, 01:04:17
    FB

    [12] děkuji Michale, v noci to snad stihnu :)

  14. 14 Radek Hulán 09.04.04, 10:04:42
    FB

    [12] ok, upravil jsem CSS, margin leftbox img, taky mě to mohlo napadnout ;) Děkuji!

  15. 15 Cagus 26.06.05, 06:06:55
    FB

    Neměl jste někdo problémy výsledný obrázek se stínem vycentrovat (např v tabulce)?