[CSS] Przezroczysty, zaokrąglony DIV Opcje

[janekpogwad]

Witam!

Mam pytanie. Chciałbym zrobić takiego div'a, który byłby półprzezroczysty, ale tylko tło (litery, formluarze, przyciski nie) oraz żeby jego rogi, były nieco zaokrąglone. Nie chce, żeby był oparty od obrazki. Coś podobnego jest w kokpicie BLIP. Może wiecie jak to zrobić?(IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

Pozdr.

[erix]

Nie chce, żeby był oparty od obrazki.

Nie da się. No chyba, żebyś pozycjonowaniem absolutnym nakładał jedną warstwę na drugą. Ale nigdy Ci się to nie uda, aby dziecko było nieprzezroczyste, a rodzic tak.

Zresztą, popatrz:

Kod

div#content-full div.bliposphere-rounding-top {
  background: url(/images/bliposphere-top.png) top left no-repeat;
  font-size: 6px;
  height: 6px;
  line-height: 6px;
  width: 800px;
}

div#content-full div.bliposphere-rounding-bottom {
  background: url(/images/bliposphere-bottom.png) top left no-repeat;
  font-size: 6px;
  height: 6px;
  line-height: 6px;
  width: 800px;
}

[kamil4u]

Nie chce, żeby był oparty od obrazki.

Podaj mi chociaż 1 powód dlaczego nie chcesz zastosować metody z wykorzystaniem obrazków?

[debian]

Co do zaokrąglenia rogów bez użycia obrazków jest na to pewien parametr w CSSie ale oczywiscie IE, Opera tego nie rozpoznają. w FF wszystko gra. Zobacz:

Kod

div.klasa{
     width:160px;
     margin-top:3px;
     margin-bottom:3px;
     background-color:#F4F4F4;
     border:1px #B4B4B4 solid;
     -moz-border-radius:4px;   /*Tutaj ustawiasz w pikselach jakie ma być zaokrąglenie rogu*/
     color:#474747;
     font-family:Tahoma;
     font-size:12px;
     padding:5px 25px;
     }

Co do przeroczystości to takie coś:

Kod

div.przezroczystosc{
    filter:alpha(opacity=50);
    -moz-opacity:.50;
     opacity:.50;
}

W takiej klasie umieszcza np, obrazek który ma być pół przezroczysty, wszystko jest w procentach %

[HTML] pobierz, plaintext 
<div class="przeroczystosc"><img src="obrazek.jpg" alt="" width="" height="" /></div>
[HTML] pobierz, plaintext 

Ten post edytował debian 26.01.2009, 14:09:47

[piotrooo89]

co do przeźroczystości IE może mieć problem.

przezroczystosc

[deeper]

Ja to robie tak:

[HTML] pobierz, plaintext 
<div class="box">
  <div class="tlo"></div>
  <div class="tresc">Tresc ... formularz, przyciski</div>
</div>
[HTML] pobierz, plaintext 

a style:

[HTML] pobierz, plaintext 
.box {
  position: relative;
}
.tlo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #000; 
  filter:alpha(opacity=50);
  -moz-opacity:.50;
  opacity:.50;
}
.tresc {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
[HTML] pobierz, plaintext 

Oczywiscie wszelkie rozmiary ustalamy po swojemu.
Caly myk polega na tym zeby umiescic 2 przygotowane divy 1 nad drugim (z-index),
przy czym temu pod spodem nadajemy przezroczystosc.
Uzyskujemy transparentne tlo i nietransparentna zawartosc.

Co do zaokraglania bez grafiki to nie wszystkie przegladarki to lykna wiec mozna sobie odpuscic.

Dodam ze wszystko co zostanie umieszczone w .tlo bedzie transparentne.

Ten post edytował deeper 29.01.2009, 14:48:17