Apaļots, caurspīdīgs bloks

bfj · December 21, 2009

Sveicināti!

Kā varētu dabūt gatavu caurspīdīgu bloku ar apaļiem stūriem? Jāņem vērā, ka tā katrs stūris apaļots savādāk un tā malas nav taisnas. Blokam būtu jāstiepjas vertikāli, atkarībā no tā satura (platums var būt fiksēts).

To varētu realizēt, sadalot bloka fona .png bildi trīs daļās - augša, vidus (vertikāli atkārtojas) un apakša, ko nav problemātiski uztaisīt, taču - kā lai to visu padara caurspīdīgu? Caurspīdīgam jābūt tikai fonam, pats saturs nedrīkst būt caurspīdīgs, tā kā CSS 'opacity', manuprāt šeit īsti nederēs.

Pieļauju, ka to var realizēt ar JavaScript palīdzību, taču tas būtu samērā nevēlami. Ideāli būtu tīrs CSS risinājums.

Te tāds aptuvens piemērs:

Būšu pateicīgs par jebkādu ideju.

P.S.

Protams, tam visam vajadzētu būt 'cross-browser compatible'

Edited December 21, 2009 by bfj

Kavacky · December 21, 2009

Ja jau dalījums notiek pa PNG bildēm, tad kur problēma pieseivojot ieviest PNG alpha transparency?

rATRIJS · December 21, 2009

Tieši tā - pašai bildei samazini opacity un liec fonā. Apaļos stūrus vari veidot tā kā pats jau aprakstīji.

Ja gribi mega CSS, tad vari apaļos stūrus veidot arī ar border-radius (-moz-border-radius, -webkit-border-radius) propertiju, bet tā kā tas nav 100% atbalstīts, tad uz to nevar vienmēr paļauties (ja apmierina, ka, piemēram, daži (IE, Opera) apaļo stūru vietā redzēs neapaļus stūrus, tad dari tā).

bfj · December 21, 2009

Ja jau dalījums notiek pa PNG bildēm, tad kur problēma pieseivojot ieviest PNG alpha transparency?

Tā jau arī daru, bet...

Laikam būšu ne pārāk pareizi noformējis problēmu (ko var gribēt plkst. 3:00 naktī :) ).

Kā panākt, lai dalītie posmi nepārklājas? Ja PNG nav caurspīdīgi, tad to bez problēmām var izdarīt, izmantojot 'z-index' un/vai citus jau zināmus brīnumus, taču šajā gadījumā, vajag, lai bloka fons ir caurspīdīgs.

Teiksim, to var uztaisīt absolūti pozicionējot bildes daļas, vidus bildei nosakot 'top' vērtību no augšas un apakšai 'bottom:0', bet vidum vajadzētu stiepties līdz ar saturu (šajā gadījumā, tātad 100% augstums nederēs, jo vidus pārklāsies pāri apakšai). Tā kā augšai un apakšai būtu fiksēts augstums, vidum būtu jāstiepjas, bet bloka saturam vajadzētu sākties un beigties nevis līdz ar vidusposmu, bet bloka augšu un apakšu.

Ja gribi mega CSS, tad vari apaļos stūrus veidot arī ar border-radius (-moz-border-radius, -webkit-border-radius) propertiju, bet tā kā tas nav 100% atbalstīts, tad uz to nevar vienmēr paļauties (ja apmierina, ka, piemēram, daži (IE, Opera) apaļo stūru vietā redzēs neapaļus stūrus, tad dari tā).

Kaut ko tādu arī apsvēru, taču laikam būs vien jāgaida, kamēr CSS3 kļūs par standartu un cilvēki vairs nelietos (naivi gan :D) IE6 un 7

Edited December 21, 2009 by bfj

fish · December 21, 2009

taisi vienk 3 divus, kur augšējā un apakšējā ir izgrieztas caurspīdīgas png bildes ar apaljuem stūriem un vidējā atkārtojas caurspīdīgs fons..

bfj · December 21, 2009

taisi vienk 3 divus, kur augšējā un apakšējā ir izgrieztas caurspīdīgas png bildes ar apaljuem stūriem un vidējā atkārtojas caurspīdīgs fons..

Un kā panākt, lai vidējais divs stiepjas līdzi saturam (un reizē nepārklājas ar augšu un/vai apakšu)? Augšai un apakšai ir fiksēts augstums, bet vidu vajag dinamisku un saturam jābūt no pašas bloka augšas līdz apakšai, t.i. nevar būt tā, ka saturs ir zem augšējā diva un virs apakšējā diva.

Edited December 21, 2009 by bfj

rATRIJS · December 21, 2009

Vai tas ir domāts kā kaut kāds popups? Ja nē, tad kādēļ kaut ko pozicionēt absolūti?

bfj · December 21, 2009

Vai tas ir domāts kā kaut kāds popups? Ja nē, tad kādēļ kaut ko pozicionēt absolūti?

To es biju tajā brīdī ieņēmis galvā, kad jau kādu n-to reizi mēģināju sasniegt rezultātu :) Tas nav kā popups. Mēģināju absolūti pozicionēt backgroundus iekš paša bloka.

Zemāk pagaidām tuvākais rezultāts, kādu man izdevies sasniegt. Kā redzams, tad vidus pārklājas ar apakšu, turklāt, paliek vieta vēl zem teksta (protams, reāli būs atkāpes no malām, taču, manuprāt tas īsti nemaina lietas būtību, jo gribētos izveidot kopēju principu, kuru varētu lietot arī pārējiem blokiem - tādi ir vairāki un ar savādāk noapaļotiem stūriem un slīpām malām - šis piemērs būtu "neapaļākais" no tiem, kurus vēl vajadzēs veidot).

HTML:

<div id="wrapper">
   <div class="bg_top"><div class="bg_middle"><div class="bg_bottom">
       <div class="content">
           Lorem ipsum dolor sit amet... <!--Īsuma labad, tikai nedaudz teksta-->
       </div>
   </div></div></div>
</div>

CSS:

#wrapper
{
   float:      right;
   width:      732px;
   margin:     9px 36px 0 0;
}
.bg_top,
.bg_middle,
.bg_bottom
{
   float:              left;
   width:              100%;
}
.bg_top
{
   background-image:   url(../images/bg_menu_t.png);
   background-repeat:  no-repeat;
   background-position:0 0;
}
.bg_middle
{
   background-image:   url(../images/bg_menu_m.png);
   background-repeat:  repeat-y;
   background-position:0 0;
   position:           relative;
   top:                18px;
}
.bg_bottom
{
   background-image:   url(../images/bg_menu_b.png);
   background-repeat:  no-repeat;
   background-position:0 100%;
}
#wrapper .content
{
   position:   relative;
   top:        -18px;
   min-height: 47px;
}

P.S.

Koda lasāmību un sakārtotību var neņemt vērā. Tāpat arī neesmu iekopējis atsevišķos IE6 CSS, kur izlaboti 'Double margin bug' un PNG atbalsts. Šobrīd tikai jāsasniedz vēlamais. Pēc tam varēs tīrīt :)

Edited December 21, 2009 by bfj

bfj · December 22, 2009

Vai tiešām kādam nebūtu idejas vai pieredze ar šādu situāciju? Protams, apzinos, ka nav jau neviena pienākums palīdzēt, bet jau sākās izmisums. :)

Ļoti negribētos klientam teikt, ka būs jāiztiek ar necaurspīdīgiem blokiem vai arī jāizmanto JavaScript...

2easy · December 22, 2009

pag, man ir ideja ar negative margin

varbūt sanāks, bet vēl taisu simple example...

Maris-S · December 22, 2009

Īsti nesaprotu, kas tieši Tev nesanāk ar pozicionēšanu? Doma Tev pareiza div ar caurspīdīgu fona bildīti un apaļiem stūrīšiem izmanto div elementus augšā un apakšā, kas ir pozicionēti absolūti. Izmanto arī z-index, lai varētu norādīt slāņa līmeni, kurā atrodas atbilstošie elementi. Jāpiebilst vienīgi ka šis propertijs strādā tikai elementiem ar absolūtu un relatīvu pozicionēšanu, noklusēti ir static, tāpēc to arī jānorāda tur kur tas ir vajadzīgs. Kods varētu būt šāds:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pozicionēšana</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!--[if lt IE 7]>
	<link rel="stylesheet" href="css/ie_png.css" type="text/css">
<![endif]-->
<link rel="stylesheet" href="css/positioning.css" type="text/css">
</head>

<body>
<div id="container">
	<div id="top"></div>
	<div id="bottom"></div>

	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
	<p>Te nāk saturs.</p>
</div>
</body>
</html>

Css sekojošs:

div#container {
width: 800px;
position: relative;
background-image: url(../images/background.png);
}

div#container p {
position: relative;
z-index: 5;
}

div#top {
width: 800px;
height: 30px;
background-image: url(../images/top.png);
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

div#bottom {
width: 800px;
height: 30px;
background-image: url(../images/bottom.png);
position: absolute;
bottom: 0px;
left: 0px;
z-index: 1;
}

Protams stūrīšu noapaļojumiem jābūt fona krāsā (lapas fona krāsā), ja uzliksi caurspīdīgus, tad ārējā div fona bilde būs redzama stūrīšos. Pārbaudi arī visos pārlūkos kādi ir pieejami.

Edited December 22, 2009 by Maris-S

Maris-S · December 22, 2009

Bišku pielaboju link tagu, kas paredzēt ie6 png caurspīdīgumam (ie_png.css), ņem vērā ka tas nav saistīts ar pašu pozicionēšanu, šeit ir jābūt nepieciešamajiem, principā vari izmantot jebkuru metodi, kas Tev patīk, lai izlabotu caurspīdīguma problēmu. Sākot ar IE7 tas nav aktuāli.

bfj · December 22, 2009

Paldies par pieslēgšanos :)

Protams stūrīšu noapaļojumiem jābūt fona krāsā (lapas fona krāsā), ja uzliksi caurspīdīgus, tad ārējā div fona bilde būs redzama stūrīšos.

Lūk, tieši tā arī ir problēma. Lapai fons ir raibs un jebkurā gadījumā vēlos panākt to, lai bloku varētu novietot jebkur, neatkarīgi no fona. Lai stūru apaļojumi būtu caurspīdīgi, tāpat arī pats bloks. Jau biju mēģinājis arī līdzīgu metodi, kā Tu aprakstīji. Un, izmantojot šo metodi, ja augšas un apakšas bildes ir caurspīdīgas, tad jebkurā gadījumā satura fons būs redzams zem augšas un apakšas bildēm un 'z-index' īsti nepalīdzēs.

pag, man ir ideja ar negative margin

varbūt sanāks, bet vēl taisu simple example...

To es arī izmēģinājos visdažādākajos variantos. Ceru, ka Tev izdosies :)

Edited December 22, 2009 by bfj

2easy · December 22, 2009

wooooooooooooooow amazing unbelievable omg

nē nu es vnk nevaru... tas strādā!!!!!!!!!!!!!!!!!! un visur strādā! :)))

kr4 man kkad agrāk bija sarežģītāks risinājums, bet šodien tam piegāju pilnīgi no jauna un izmēģināju visādas lietas šodienas skatījumā. un arī atklāju vienu labāku risinājumu nekā bija toreiz, bet nupat ienācā prātā pavisam vienkārša ideja. tiešām viss ģeniālais ir vienkāršs

tātad tgd demonstrēju metodi ar pozicionēšanu (ar negatīviem margin arī var, bet tad ir jāraksta vairāk css,html)

viss prikols slēpjas tajā apstāklī, ka position:absolute var vienlaicīgi uzlikt gan top, gan bottom un bloks pats izstiepjas pa vidu. sooo simple!!!!

caurspīdīgu backgroundu gadījumā tas ir ideāli, jo vidējais backgrounds nepalien zem top,bottom backgroundu transparent apgabaliem. līdz ar to var pilnībā apiet visu maģiju ar negatīviem marginiem un negatīvām relatīvām pozionēšanām :P

nju tad enjoy ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>test</title>
<style type="text/css">

#bx {position: relative; width: 180px; min-height: 40px; padding: 0 10px}
#bx-t {background: url(i/bx-t.png); position: absolute; top: 0; left: 0; width: 100%; height: 20px; z-index: -1}
#bx-m {background: #ccc; position: absolute; top: 20px; bottom: 20px; left: 0; width: 100%; z-index: -1}
#bx-b {background: url(i/bx-b.png); position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; z-index: -1}

</style>
<!--[if ie 6]><style type="text/css">
#bx {height: 60px}
#bx-t, #bx-m, #bx-b {width: 200px}
#bx-m {height: expression(this.parentNode.clientHeight - 40 + "px")}

img, input {behavior: expression(this.style.behavior = "none", /png$/.test(this.src) ? (this.style.width = this.width + "px", this.style.height = this.height + "px", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + (this.src) + ")", this.src = "i/sp.gif") : 0, void 0)}
div, a {behavior: expression(this.style.behavior = "none", this.currentStyle.backgroundImage.substr(this.currentStyle.backgroundImage.length - 6) == '.png")' ? (this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.currentStyle.backgroundImage.substr(5, this.currentStyle.backgroundImage.length - 7) + ",sizingMethod=scale)", this.style.background = "none", this.style.zoom = 1, this.tagName == "A" ? this.style.cursor = "pointer" : 0) : 0, void 0)}
</style><![endif]-->
</head><body>

content before
<div id="bx">
<div id="bx-t"></div>
<div id="bx-m"></div>
<div id="bx-b"></div>
asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />
</div>
content after

</body></html>

šādi izskatās top un bottom background bildes (to whitespace apkārt aplika bilžu hosts, un stūri ir caurspīdīgi - png alpha transparency)

šī metode ir notestēta un strādā uz ie6,ie7,ie8,ff,opera,safari,chrome

pāris atšifrējumi, ja nu kādam kkas ir nesaprotams (sry, bet kodu patīk rakstīt small & simple, izmantojot "labi zināmos" saīsinājumus :P)

bx - box (kastīte/bloks)

bx-t - box top

bx-m - box mid/middle

bx-b - box bottom

info pēc ieliku arī, kā tas izskatās uz ie6, ja neveic nekādus fix

bet kad tam iebaro pāris ie6 specific css rindiņas, tad jau arī tas sāk uzvesties normāli

kr4 no tevis 5 Ls par risinājumu (joks)

vispār jau paldies tev, ka uzdevi šo jautājumu, a to es tā arī turpinātu lietot kkādas daudz neefektīvākas metodes... :D:D:D

galvenais tik uzdot pareizos jautājumus ;)

Edited December 22, 2009 by 2easy

2easy · December 22, 2009

btw, nemaz nebrīnītos, ja tgd atnāktu mefisto, pateiktu, ka man jāpamācās teorija un iemestu kādu linku :D

Sign In

Apaļots, caurspīdīgs bloks

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation