Pre príspevky s tagom ‘CSS’

Obrázky vložené priamo do CSS

Štvrtok, Február 25th, 2010

Možno sa už i vám stalo, že ste potrebovali vytvoriť čo najkopaktnejší HTML dokument, ktorý mal napriek malému počtu súborov (ideálne jednému) obsahovať aspoň minimalistickú grafiku. Ide napríklad o tiene a iné gradienty.
Ja sám som tento problém riešil pri vytváraní XSLT šablóny. Chcel som v ňom mať obsiahnuté aj javascripty (vrátane frameworku jQuery) a kaskádové štýly.
Problém nastal, keď som chcel prvkom nastaviť ako pozadie gradient a pritom nepoužívať linky na externé zdroje. V tomto prípade je možné nastaviť ako URL obrázka jeho obsah zakódovaný pomocou base64.
Na tento účel veľmi dobre poslúžia online enkódery, ktorých je na webe neúrekom. Po uploade obrázka naň stačí skopírovať už zakódovaný text. Ja som použil napr. tento . Takto získaný base64 reťazec už môžeme vložiť priamo do url pre pozadie.

.gradient {
     background: url(data:image/png;base64,base64string);
}

V mojom prípade je base64string nasledovný reťazec (bez zalomenia riadkov):

R0lGODdhAQAUAIQUAAddmQ1hmhNlnRppnyFuoShyoy93pjd7pz1/
qUSDq0uIrlKMsFmQsmCVtGaZtm2euHWiunynvYOrvomwwI6zwo6zwo6z
wo6zwo6zwo6zwo6zwo6zwo6zwo6zwo6zwo6zwiwAAAAAAQAUAAAFES
AQCANRGAeSKAvTOA8USVMIADs=

Takto naštýlovanú triedu môžeme hneď použiť:

<div class="gradient">Trieda s pozadím</div>

A ako sa potom takto naštýlovaný element zobrazí?

Trieda s pozadím

Jediným jediným problémom ostáva prehliadač MSIE, ktorému sa v starších verziách takto definovaný obrázok vôbec nepáči.

Tagy: , , ,
V kategórii Programovanie | 2 komentárov »

Ak máš čo povedať, bloguj. Neviem, kto to povedal, neviem, či som túto vetu neskomolil. Ale takto nejak chápem úlohu blogu. Dať ľuďom, ktorí ma chcú počuť, vedieť, že som tu, že mám svoj názor a nehanbím sa zaň. Je ťažké zhrnúť, o čom budem písať inak ako "o tom, čo ma baví". Nechcem si dávať fixné hranice, ale nechcem sa tváriť ako odborník na všetko. Tento svet je perfektný a okolo nás je toľko fajn vecí, že je asi hriech o nich nepísať. Tak ja tu doťuknem pár riadkov o tom, čo okolo seba vidím svojimi očami. A prosím: Ak niečo napíšem nešikovne, ak sa zle vyjadrím, ak nechtiac napíšem niečo, čo radšej napísané byť nemalo, prepáčte mi. Prosím... :-)

A čo to mám rád? Fotenie. Obrázky toho, čo pekné sa dá vidieť. Asi žiadne výtvarné umenie ma neoslovuje tak ako práve fotografia. Hudba. Perfektný relax a odstraňovač bolehlavov. Milujem akustickú hudbu, ska-jazz, pop, folk, rock.... Medzi tým, čo počúvam sa nájde Paulo Nutini, Jarek Nohavica, Jack Johnson, Norah Jones, Nerina Pallot a milión ďalších (nebo tak nějak). Film. Vždy poteší pekný príbeh v pohyblivých obrázkoch. Technika. Je to tiež akési umenie, ktoré ukazuje, čo všetko dokážeme, aké sú naše možnosti. Príroda. Ak sú tie predchádzajúce veci umením ľudí, toto je umením Boha. Tu ukázal, žo dokáže (fakt svelý chlap - alebo žena? :-D ).

A ak mám vypichnúť zopár vecí, ktoré mám fakt rád, tu je môj minizoznam:

  • Aďka
  • iPod nano & Koss Porta pro
  • Nerina Pallot: Fires
  • Petti di pollo al forno
  • Leffe blonde
  • Wacom bamboo
  • Nikon D40
  • Garmont Nagevi
  • Tolkien's books
  • Lunch on skyscraper
  • I Am Sam
Grafika by Števo Bačkor running Wordpress