Home | | HTML | | CSS | | XHTML |
 
CSS Základné
Úvod
CSS Syntax
CSS Ako na to
CSS Pozadia
CSS Texty
CSS Font
CSS Bordery
CSS Okraje
CSS Margin
CSS Padding
CSS Odrá?ky
CSS Tabu?ky
 
CSS Roz?írené
CSS Dimenzie
CSS Zatrie?ovanie
CSS Umiest?ovanie
CSS Pseudo-triedy
CSS Pseudo-element
CSS Jas obrázku
CSS Typy médií
CSS Zhrnutie
 
CSS Príklady
CSS Príklady
 
Zdroje
CSS2 Zoznam
CSS2 Tla?
CSS2 Po?utelné
CSS Jednotky
CSS Farby
CSS Hodnoty farieb
CSS Názvy farieb
 
CSS Quiz
CSS Quiz
 

CSS Jas obrázku

obrazok obrazok

Vytváranie transparentných obrázkov v CSS je ?ahké.

Príklady

Vytváranie transparentných obrázkov - mouseover effect

Vytváranie transparentného po?a s textom na obrázku-pozadia

Pozn: Toto e?te nie je CSS ?tandard. Av?ak, funguje to vo v?etkých moderných prehliada?och a je to ?as? W3C CSS 3 odporú?ania.

Príklad 1 - Vytváranie Transparentných obrázkov

Najprv vám uká?eme, ako vytvori? transparentný obrázok s CSS.

Be?ný obrázok:

klematis

ten istý obrázok s transparency:

klematis

Pozrite si následujúci zdrojový kód:

<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="opacity:0.4;filter:alpha(opacity=40)" />

Firefox pou?íva vlastnos? opacity:x na transparentnos?, zatia? ?o IE pou?íva filter:alpha(opacity=x).

Tip: CSS3 syntax pre transparency je opacity:x.

Vo Firefox (opacity:x) x mô?e by? hodnota od 0.0 - 1.0. Men?ia hodnota urobí element viac transparentný.

V IE (filter:alpha(opacity=x)) x mô?e by? hodnota od 0 - 100. Men?ia hodnota urobí element viac transparentný.

Príklad 2 - Image Transparency - Mouseover Effect

Hýbte my?ou cez obrázky:

klematis klematis

Zdrojový kód vyzerá asi takto:

<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Vidíme, ?e prvý riadok zdrojového kódu sa podobá tomu v Príklade 1. Okrem toho som pridal onmouseover atribút a onmouseout atribút. Onmouseover atribút ur?uje, ?o sa stane, ak ceze? prejdeme my?ou. Z tohto dôvodu chceme, aby obrázok NEBOL transparentný, ak ním prejdeme my?ou.

Syntax pre toto vo Firefox je: this.style.opacity=1 a syntax v IE je: this.filters.alpha.opacity=100.

Ak kurzor my?i odíde pre? z obrázku, chceme, aby bol obrázok opä? transparentný. To je spravené s atribútom onmouseout.

Príklad 3 - Text v Transparent Boxe

Toto je nejaký text, ktorý je vlo?ený do transparentného boxu.Toto je nejaký text, ktorý je vlo?ený do transparentného boxuToto je nejaký text, ktorý je vlo?ený do transparentného boxu.

zdrojový kód je takýto:

<html>
<head>
<style type="text/css">
div.background
  {
  width: 500px;
  height: 250px;
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
  }
div.transbox
  {
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }
div.transbox p
  {
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
  }
</style>

</head>
<body>
<div class="background">
<div class="transbox">
<p>Toto je nejaký text, ktorý je vlo?ený do transparentného boxu.
Toto je nejaký text, ktorý je vlo?ený do transparentného boxu.
Toto je nejaký text, ktorý je vlo?ený do transparentného boxu.
Toto je nejaký text, ktorý je vlo?ený do transparentného boxu.
Toto je nejaký text, ktorý je vlo?ený do transparentného boxu.
</p>
</div>
</div>
</body>

</html>

Najprv vytvoríme div element (class="background") s pevnou vý?kou a ?írkou a obrázok na pozadí a border. Potom vytvoríme men?í div (class="transbox") vnútri prvého div elementu. Tento div má tie? pevnú ?írku a obrázok na pozadí s borderom. Okrem toho sme urobili tento div transparentným.

Vnútri transparentného div sme pridali nejaký text do p elementu.

obrazok obrazok
© 2008 Nikes