Jump to content
php.lv forumi

Apaļots, caurspīdīgs bloks


bfj

Recommended Posts

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:

blocket.png

 

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

 

P.S.

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

Edited by bfj
Link to comment
Share on other sites

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ā).

Link to comment
Share on other sites

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 by bfj
Link to comment
Share on other sites

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 by bfj
Link to comment
Share on other sites

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).

 

block.png

 

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 by bfj
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

Ī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 by Maris-S
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by bfj
Link to comment
Share on other sites

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>

bx_1261511337.png

 

šā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)

bx-t_1261511618.png

 

bx-b_1261511723.png

 

šī 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

bx-ie6-bez-fix_1261513211.png

 

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

bx-ie6-ar-fix_1261513269.png

 

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 by 2easy
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...