Background div cu forma neregulata. Se poate?

#1
colombo2003

Posted 14 December 2014 - 01:25

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Am un pop-up (dialog modal), intr-un <div> caruia, in css, i-am pus fundal alb ( = un dreptunghi alb, ca o coala de hartie)
Tot in css i-am pus si o imagine ca border (o panglica tricolora, forma neregulata; vezi atasament).

Problema este ca arata ca si cum as pune/suprapune panglica pe o coala alba de hartie. Si cum forma panglicii e neregulata, albul imi iese si in afara ei.
As vrea sa arate ca si cum as fi decupat cu foarfeca dupa forma panglicii, si background-ul div-ului (albul) sa fie doar la interior, si sa urmareasca si el conturul panglicii.

Intrebarea este daca se poate face ceea ce vreau, si daca da, cum? Vreo idee? Multumesc

Attached Files

Flamura.png 302.53K 9 downloads

Back to top

#2
Mizu

Posted 14 December 2014 - 01:54

moroșan

Grup: Senior Members
Posts: 18,808
Înscris: 10.12.2006

Pune background panglica pe care o umpli cu alb in prealabil cu programul tau preferat de editare foto.

Back to top

#3
LensFlare

Posted 14 December 2014 - 07:29

Tin Foil Mask Society

Grup: Senior Members
Posts: 14,761
Înscris: 09.05.2005

background transparent?

Back to top

#4
whitewizard

Posted 14 December 2014 - 07:34

Softpedist pana la moarte!

Grup: Senior Members
Posts: 3,070
Înscris: 07.05.2006

LensFlare, on 14 decembrie 2014 - 07:29, said:

background transparent?

Eu zic ca un png rezolva problema.

Attached Files

Flamurashadow.png 335.08K 8 downloads

Edited by whitewizard, 14 December 2014 - 07:43.

Back to top

#5
colombo2003

Posted 14 December 2014 - 15:47

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Am incercat si cu background transparent, desigur, dar nici asa nu mi-a iesit. Apoi am incercat cu atasamentul tau @whitewizard (merci), dar nici asa nu a functionat).

Poate ar trebuie sa dau mai multe detalii despre cod (foarte posibil ca de aici vine problema). Asa cum am spus, este vorba despre o fereastra de tip modal dialog (multumesc OriginalCopy).
Acesteia i-am spus background alb, iar background-ul care sa-mi acopere site-ul (sa nu pot face click pe ceva in afara acestei ferestre modale) este un gri. Opacitatea este setata la 0.95.

Pun si un border acestei ferestre modale (div), dar, dupa cum spuneam, background-ul div-ului care contine mesajul propriu-zis pe care vreau sa il afisez, ca forma, este dreptunghiular (ca o coala de hartie alba).
Borderul apare si el (acea panglica tricolora), numai ca ea, pamglica, avand forma neregulata, imi iese in afara ei albul de la celalalt div. Si tocmai asta nu reusesc.

Codurile sunt asa:
in pagina principal php:

<body onload="overlay()">
...
...
...
<div id="popUpDiv">
 <div>
 <a href="javascript:close()"><img alt="" src="images/close.jpg" /></a>

 <br>Stimati client............(textul cu programul de sarbatori)....<br>
 </div>
</div>
...
...
...

in css:

...
...
body {
   margin:0;
   padding:0;
}

@font-face {
   font-family: "Arhaic_rom";
   src: url(../fonts/Arhaic_rom.eot), url(../fonts/Arhaic_rom.ttf);
  // format('truetype');
}

#popUpDiv img {
	float: right;
	display: block;
	width: 5%;
	margin: -15px -15px 0 0;
}

#popUpDiv {
	 //visibility: hidden;
	 position: fixed;
	 left: 0;
	 top: 0;
	 width: 100%;
	 height: 100%;
	 text-align: center;
	 z-index: 9999;
	 background-color: #cccccf;
	 opacity: 0.95;
}

#popUpDiv div {
	 width: 300px;
	 margin: 100px auto;
	 background-color: #fff;
	 border: 1px solid #000;
	 padding: 15px;
	 text-align: center;

	 border: 10px solid #AAAAAA;
	 margin: 0 auto;
	 margin-top: 20px;
	 padding: 10px;
	 border: 50px solid transparent;
	 //width: 250px;
	 padding: 10px 20px;
	 width: 32%;
	 border-image: url(/images/bordertransp.png) 25 25 round;
	 -webkit-border-image: url(/images/bordertransp.png) 25 25 round;
	 -o-border-image: url(/images/bordertransp.png) 25 25 round;
}
...
...
...

Deci...?

Back to top

Anunturi

Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro

Background div cu forma neregulata. Se poate?

#1 colombo2003 Posted 14 December 2014 - 01:25

Attached Files

#2 Mizu Posted 14 December 2014 - 01:54

#3 LensFlare Posted 14 December 2014 - 07:29

#4 whitewizard Posted 14 December 2014 - 07:34

Attached Files

#5 colombo2003 Posted 14 December 2014 - 15:47

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
colombo2003

Posted 14 December 2014 - 01:25

#2
Mizu

Posted 14 December 2014 - 01:54

#3
LensFlare

Posted 14 December 2014 - 07:29

#4
whitewizard

Posted 14 December 2014 - 07:34

#5
colombo2003

Posted 14 December 2014 - 15:47