Pagina 1 din 1
Contur deosebit la imagine in pagina
Scris: Mie Mai 29, 2013
de MenCar
Salut Marplo, sti cumva un cod sau un site de unde pot lua sau downloada un cod pt site html php nu conteaza...
Despre ce este vorba...
Uitate exemplu pe:
emt2.zapto.org
Pe mine ma intereseaza marginea aceea la imagine.
Cum sa fac si eu sa imi fac asa ceva?
Astept raspuns, merci o zi buna.
Contur deosebit la imagine in pagina
Scris: Mie Mai 29, 2013
de MarPlo
Salut
La acea pagina, conturul e o imagine, aceasta:
emt2.zapto.org/img/layout/bg_up.jpg
Adaugata ca background intr-un Div pozitionat "absolute" in spatele la tot continutul ( z-index: -999; ).
Codul lor CSS pentru acel Div:
Cod: Selectaţi tot
div#bgLine {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("img/layout/bg_up.jpg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: auto auto;
height: 600px;
position: absolute;
top: 0;
width: 100%;
z-index: -999;
}
Contur deosebit la imagine in pagina
Scris: Mie Mai 29, 2013
de MenCar
Eu zic de marginea pe pagina, dai in sus sau in jos si acea forma in imp ramane pe marginea siteului...
Uite o imagine, ce e incercuit cu rosu:
i42.tinypic.com/rcpsub.jpg
Contur deosebit la imagine in pagina
Scris: Joi Mai 30, 2013
de MarPlo
Acel contur pe marginea paginii e facut din mai multe bucati, si anume 8 Div-uri cu "position: fixed;", in care s-a adaugat imagine pt. background.
4 Div-uri pt. colturi si 4 pt. fiecare latura.
De exemplu, pt. coltu stanga-sus e folosita imaginea de la adresa asta:
emt2.zapto.org/img/frame_ctl.png
Si acest cod css:
Cod: Selectaţi tot
#corner_tl {
position:fixed;
z-index:43;
height:81px;
width:108px;
background-repeat:no-repeat;
top:0;
left:0;
background:url("img/frame_ctl.png");
}
- Pentru latura din stanga (si dreapta) e imaginea:
emt2.zapto.org/img/frame_left.png
Si codul css:
Cod: Selectaţi tot
#frame_left {
position:fixed;
z-index:42;
width:19px;
background-repeat:repeat-y;
height:100%;
left:0;
background:url("img/frame_left.png");
}
- Similar se face si pentru celelalte colturi si laturi.
Re: Contur deosebit la imagine in pagina
Scris: Joi Mai 30, 2013
de MenCar
Am creiat doua fisiere:
index.html (in el am bagat):
Cod: Selectaţi tot
<link href="111.css" rel="stylesheet" type="text/css" media="screen" />
111.css (in el am bagat):
Cod: Selectaţi tot
#corner_tl {
position:fixed;
z-index:43;
height:81px;
width:108px;
background-repeat:no-repeat;
top:0;
left:0;
background:url("http://emt2.zapto.org/img/frame_ctl.png");
}
#frame_left {
position:fixed;
z-index:42;
width:19px;
background-repeat:repeat-y;
height:100%;
left:0;
background:url("http://emt2.zapto.org/img/frame_left.png");
}
Si nu functioneaza, oare de ce???
Contur deosebit la imagine in pagina
Scris: Joi Mai 30, 2013
de MarPlo
Tu stii de ce nu functioneaza la tine, probabil nepotrivire cu Div-urile pt. acele proprietati css.
Uite, acest cod functioneza (dar e mai bine sa folosesti pentru background imagini de pe acelasi server unde e site-ul).
Cod: Selectaţi tot
<style>
#corner_tl, #corner_bl, #corner_br, #corner_tr {
position:fixed;
z-index:43;
height:81px;
width:108px;
background-repeat:no-repeat;
}
#corner_tl {
top:0;
left:0;
background:url("http://emt2.zapto.org/img/frame_ctl.png");
}
#corner_bl {
bottom:0;
left:0;
background:url("http://emt2.zapto.org/img/frame_cbl.png");
}
#corner_br {
bottom:0;
right:0;
background:url("http://emt2.zapto.org/img/frame_cbr.png");
}
#corner_tr {
top:0;
right:0;
background:url("http://emt2.zapto.org/img/frame_ctr.png");
}
#frame_left, #frame_right {
position:fixed;
z-index:42;
width:19px;
background-repeat:repeat-y;
height:100%;
}
#frame_left {
left:0;
background:url("http://emt2.zapto.org/img/frame_left.png");
}
#frame_right {
right:0;
background:url("http://emt2.zapto.org/img/frame_right.png");
}
#frame_bottom, #frame_top {
position:fixed;
z-index:42;
height:19px;
background-repeat:repeat-x;
width:100%;
}
#frame_bottom {
bottom:0;
background:url("http://emt2.zapto.org/img/frame_bottom.png");
}
#frame_top {
top:0;
background:url("http://emt2.zapto.org/img/frame_top.png");
}
</style>
<div id="corner_tl"></div>
<div id="corner_bl"></div>
<div id="corner_br"></div>
<div id="corner_tr"></div>
<div id="frame_left"></div>
<div id="frame_bottom"></div>
<div id="frame_right"></div>
<div id="frame_top"></div>