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,822
Î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

Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

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