| Autor | Zpráva | ||
|---|---|---|---|
| deader Profil |
#1 · Zasláno: 29. 10. 2010, 20:01:39
Lze nějak udělat div různě šířky(200-500px) s rohy a okraji zpola průhlednými bez Javascriptu?
Takhle vypadá: 
Zkoušel jsem různě kombinovat divy, ale nikdy se mi nepovedly udělat okraje tak, aby fungovaly ve všech šířkách. Díky za tipy. |
||
| SpotRudloff Profil |
#2 · Zasláno: 29. 10. 2010, 20:11:52
Pokud ti jde vše, kromě okrajů, okraje jdou vyřešit ve většině prohlížečů tímto kódem:
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; Je to komponenta CSS3, takže nebude fungovat ve starších prohlížečích a těch, které ji jej stále nevyužívají. Pixely můžeš samozřejmě kombinovat. Doporučuji si o border-radiusu přečíst více. |
||
| deader Profil |
#3 · Zasláno: 29. 10. 2010, 20:16:51
Proto jsem psal rohy a okraje, rohy mi jdou, nevím však, jak udělat ostatní "okraje" a to hlavně dole, kvůli tomu stínu a průhlednosti rohů.
|
||
| Keeehi Profil |
#4 · Zasláno: 29. 10. 2010, 20:29:10
deader:
Pokud to má být průhledné všude stejně, pak můžeš použít opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; Pokud ne, můžeš to udělat pomocí png obrázku. Ten může být na každém místě jinak průhledný. |
||
| Chamurappi Profil |
#5 · Zasláno: 29. 10. 2010, 21:00:40
Reaguji na deadera:
Použij normálně poloprůhledné PNG nebo GIFy, tak, jak se to dělá posledních osm let — hledej a najdeš stovky návodů. Zmíněný border-radius nedoporučuji, nemá dostatečnou podporu.
|
||
| deader Profil |
#6 · Zasláno: 29. 10. 2010, 21:26:42 · Upravil/a: deader
Ale to já vím, asi jsem se špatně vyjádřil. Mě jde o to, jak jen pomocí html,css a samozřejmě i png obrázku podobného tomu v 1.příspěvku udělat blok předem neznámé šířky, který bude vypadat jako obr v 1. příspěvku.
Použití: http://pisarovic.cz/ukolnicek - klikněte vpravo na 2.D |
||
| deader Profil |
#7 · Zasláno: 30. 10. 2010, 17:41:48
Chtěl jsem tohle: www.456bereastreet.com/lab/transparent_custom_corners_borders/, ale bez JS, což asi nejde - možná by to však šlo udělat tabulkou. Které řešení myslíte, že je lepší?
|
||
| panther Profil |
#8 · Zasláno: 30. 10. 2010, 17:50:55
deader:
„možná by to však šlo udělat tabulkou.“ proč tabulkou? Jen to musíš poskoládat z vícero obrázků, nic víc v tom není. Obrázky by mohly být následující: 4x roh 1x gradient shora 1x gradient zdola (aby se dal natahovat i na výšku) 1x opakující se po ose Y obrázek s levou linkou a pravým stínem. Dohromady to už nějak seskládáš, ne? :-) |
||
| deader Profil |
#9 · Zasláno: 30. 10. 2010, 18:00:42
Jenže šířka toho divu je v %, nemůžu tedy vytvořit "1x opakující se po ose Y obrázek s levou linkou a pravým stínem" a nevím, jak definovat šířku horního a dolníhu gradientu, když dám 100%, tak bude vidět pod rohy. :(
|
||
| deader Profil |
#10 · Zasláno: 1. 11. 2010, 15:06:57
Vyřešeno:
<div id="okno15" class="tabulka" onmousedown="Okno_onMouseDown('okno15')">
<div class="roh_hl"> </div>
<div class="roh_hr"> </div>
<div class="roh_h2"><div class="roh_h"> </div></div>
<div class="obsah">
<div class="vnitrek" id="obsah15">
...
</div>
</div>
<div class="roh_dl"> </div>
<div class="roh_dr"> </div>
<div class="roh_d2"><div class="roh_d"> </div></div>
</div>
.tabulka {
display:block;
visibility:visible;
position:relative;
left:0;
top:0;
width:100%;
}
.roh_hl{
left:1px;
top:-10px;
_left:0;_top:0;
//position:absolute;
float:left;
z-index:3;
background:url('img/okno-top_left.png');
background-position:left top;
width:30;
height:35px;
}
.roh_hr{
right:0px;
top:-10px;
_right:0;_top:0;
//position:absolute;
float:right;
z-index:3;
background-color:white;
background:url('img/okno-top_right.png');
background-position:right top;
width:30;
height:35px;
}
.roh_h{
background-color:white;
background:url('img/okno-top.png');
height:35px;
}
.roh_h2{padding:0 30;}
.roh_dl{
float:left;
background-color:white;
background:url('img/okno-bottom_left.png');
height:25px;
width:30px;
margin-top:-1;
}
.roh_dr{
float:right;
z-index:3;
background:url('img/okno-bottom_right.png');
height:25px;
width:30px;
margin-top:-1;
}
.roh_d{
background-color:white;
background:url('img/okno-bottom.png');
height:25px;
margin-top:-1;
}
.roh_d2{padding:0 25;}
.obsah{
position:relative;
z-index:3;
top:4px;
background-image:url('img/okno-right.png');
background-position:right -40;
border-left:1px solid black;
margin-top:-10;
}
.vnitrek{
margin-left:8px;margin-bottom:5px;margin-right:14px;
} |
||
|
Časová prodleva: 13 let
|
|||
0