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

Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

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