CSS - Border png peste un jpg - Forumul Softpedia

#1
catalinuptm

Posted 03 November 2013 - 11:20

Senior CG Artist

Grup: Senior Members
Posts: 4,308
Înscris: 11.03.2008

Exista vreo posibilitate sa pot pune un border facut in Photoshop in format png pentru o imagine jpg ? Initial facusem un border din css pentru fiecare imagine in parte, dar borderul pe care-l foloseam era prea simplu, asa ca am zis sa fac unul in PS, problema este ca e foarte mult de munca sa pun border-ul peste toate imaginile pe care le am pe site, exista vreo posibilitate sa fac asta din css?

Sa dau si un exemplu, am border-ul mai jos + imaginea + cum as vrea sa arate rezultatul final dupa implementarea css-ului.

1.Border-ul.

[ http://img96.imageshack.us/img96/3378/ps6o.png - Pentru incarcare in pagina (embed) Click aici ]

2.Imaginea peste care vreau sa fie boredr-ul de mai sus.

[ http://img542.imageshack.us/img542/3665/m9ui.jpg - Pentru incarcare in pagina (embed) Click aici ]

3. Imaginea finala afisata pe site

[ http://img707.imageshack.us/img707/5465/mr2l.jpg - Pentru incarcare in pagina (embed) Click aici ]

Stiu ca pot face asta direct din photoshop, dar cand am foarte multe imagini pierd foarte mult timp editandu-le.

Back to top

#2
HpVirus

Posted 03 November 2013 - 12:30

Active Member

Grup: Members
Posts: 1,142
Înscris: 30.05.2009

Se face cu z-index. La imagine probabil trebuie sa folosesti margin. Exemplul de mai jos nu e testat.

<div class="border">
	 <div><img src="image.jpeg" class="image"/></div>
</div>

//CSS
.border {
	 background-image: url("border.png");
	 background-repeat: no-repeat;
	 width: X px;
	 height: Y px;
	 z-index: 1000;
}
.image {
	 z-index: 1;
}

Edited by HpVirus, 03 November 2013 - 12:31.

Back to top

#3
Mizu

Posted 03 November 2013 - 12:31

moroșan

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

Cu o clasa pentru toate imaginile, si pui borderul din CSS.

Back to top

#4
catalinuptm

Posted 03 November 2013 - 12:33

Senior CG Artist

Grup: Senior Members
Posts: 4,308
Înscris: 11.03.2008

Codul de mai sus este fiabil si in cazul in care borderul are o rezolutie diferita de imaginea pe care se va aplica? In cazul meu, am imagini de rezolutii diferite.

LE: Am testat, nu functioneaza cum trebuie, border-ul se afla sub imagine, asadar nu se vede.

Back to top

#5
HpVirus

Posted 03 November 2013 - 12:41

Active Member

Grup: Members
Posts: 1,142
Înscris: 30.05.2009

Din pacate nu. Revin!

Back to top

#6
Mizu

Posted 03 November 2013 - 12:42

moroșan

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

Daca ai imagini de rezolutii diferite nu tare poti cum ai prezentat tu problema.

Ce as incerca eu... un div container pentru imagini, la care pui bordurile din mai multe png-uri pe repeat. Sau un tabel cu 5 celule din care 4 vor fi border si in centru intra imaginea.

Back to top

#7
HpVirus

Posted 03 November 2013 - 12:42

Active Member

Grup: Members
Posts: 1,142
Înscris: 30.05.2009

Incearca aici.

Edited by HpVirus, 03 November 2013 - 12:43.

Back to top

#8
catalinuptm

Posted 03 November 2013 - 12:56

Senior CG Artist

Grup: Senior Members
Posts: 4,308
Înscris: 11.03.2008

SfPetru, on 03 noiembrie 2013 - 12:42, said:

Ce as incerca eu... un div container pentru imagini, la care pui bordurile din mai multe png-uri pe repeat.

La varianta asta nu m-am gandit, teoretic ar trebui sa functioneze cum trebuie, tai border-ul meu in doar 2 margini, 1 (pentru top si bottom) si 1 (pentru right si left) ai idee cum ar trebui sa arate codul ?

LE: Ar trebui sa arate ceva de genul asta ?

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

SfPetru, on 03 noiembrie 2013 - 12:42, said:

Sau un tabel cu 5 celule din care 4 vor fi border si in centru intra imaginea.

Varianta cu tabel nu cred ca e fiabila, pentru ca imaginile mi se deschid intr-un lightbox, si nu cred ca merge sa fac cu tabel daca ele se deschid in lightbox.

HpVirus, on 03 noiembrie 2013 - 12:42, said:

Incearca aici.

Da, interesant, dar nu stiu daca o sa functioneze pentru imagini cu rezolutie diferita.

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

CSS - Border png peste un jpg

#1 catalinuptm Posted 03 November 2013 - 11:20

#2 HpVirus Posted 03 November 2013 - 12:30

#3 Mizu Posted 03 November 2013 - 12:31

#4 catalinuptm Posted 03 November 2013 - 12:33

#5 HpVirus Posted 03 November 2013 - 12:41

#6 Mizu Posted 03 November 2013 - 12:42

#7 HpVirus Posted 03 November 2013 - 12:42

#8 catalinuptm Posted 03 November 2013 - 12:56

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
catalinuptm

Posted 03 November 2013 - 11:20

#2
HpVirus

Posted 03 November 2013 - 12:30

#3
Mizu

Posted 03 November 2013 - 12:31

#4
catalinuptm

Posted 03 November 2013 - 12:33

#5
HpVirus

Posted 03 November 2013 - 12:41

#6
Mizu

Posted 03 November 2013 - 12:42

#7
HpVirus

Posted 03 November 2013 - 12:42

#8
catalinuptm

Posted 03 November 2013 - 12:56