Kezdés
Welcome message

Üdvözlök minden kedves erre tévedőt a Glamour Factory nevet viselő webmagazinon! Az oldal grafikákra, kellékekre, photoshop leírásokra és kódolásra specializálódott, melyek hasznosak és ötlet adóak, inspirálóak lehetnek kezdő, haladó és akár profi oldal szerkesztőknek, blogolóknak. A glamour gyár hetente frissülni fog változatos tanácsokkal, érdekességekkel és tippekkel. Érezd jól magad itt, ha tetszik a munkám nézz be máskor is! bcp de bisous, Efruse

Elérhetőségeink:

 
Partnerek
Partners

Képre vár vagy inaktív:

Orchiq ; Berni ; Birds

 
Üzenj
Chat

 
Köszönet
References

Bizony az oldal nem jöhetett volna létre segítség nélkül, és úgy gondolom, hogy a forrásaim, "nevelőim" megérdemlik azt, hogy megemlítsem őket, köszönetet mondjak nekik. Az alapokat Linda leírásai után sikerült elsajátítanom, általa és nővérem által ismerkedtem meg a honlapszerkesztéssel, csöppentem bele a G-Portál világába. Ahogy egyre jobban belejöttem a dolgokba, úgy ismerkedtem meg több grafikákkal, photoshop leírásokkal, illetve kódok ismertetésével foglalkozó weblappal. Ide tartozik nikkii*, Brielle, Adry és Bogee (az egykori Design World szerkesztője). Mellettük sok támogatást és segítséget nyújtott egyaránt Nikrécia, JuciZed és Gergő. Tovább a külföldi forrásokhoz >>

 
Jövőbeli tervek
Plans for the future
kód navigációs menü
kód projektdoboz
leírás ajánlott betűtípusok
leírás sosugary galéria átalakítása
kód cserék szöveggel, képpel
grafika psd színezések
leírás esztétikus kinézet
 
Elit csere 20#

@2017.08.16.

Minta:

CSS kód:

.csere { /* maga a cseredoboz középen helyezkedik el a modulon belül */
margin: 0 auto !important;
text-align: center;
line-height: 13px !important;
}
 
 
.csere strong { /* a cserefelirat első, felső része */
display: inline-block; /* a két felirat rész nem folyik egybe */
width: 65px !important;
color: #000;
background-color: transparent;
padding: 0px;
letter-spacing: 1px;
font-family: Georgia !important;
font-size: 7px !important;
font-style: normal;
font-weight: 800 !important;
text-transform: uppercase;
}
.csere em { /* a cserefelirat második, alsó része */
color: #fff;
background-color: #000;
padding: 1px !important;
letter-spacing: 2px;
font-family: Georgia !important;
font-size: 8px !important;
font-style: italic;
font-weight: 300 !important;
text-transform: lowercase;
}
 
 
.csere a img { /* csereképek kinézete */
z-index: 99;
filter: none;
border: 0px !important;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.csere a:hover img { /* csereképek kinézete ha rávisszük az egeret */
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2) !important; /* árnyék */
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2) !important;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2) !important;
filter: none;
}
 

/* a csere feliratokat tartalmazó kis dobozok elhelyezkedése - a képekre beállított margók miatt változnak */
/* elhelyezkedésük a képek méretétől is függ, ez jelen esetben 70x80 pixel */
a.cserek, a.cserek2, a.cserek3,
a.cserek4, a.cserek5, a.cserek6 {
position: relative;
display: inline;
z-index: 8;
}
a.cserek span, a:hover.cserek span {
bottom: 3px;
margin-left: -36px;
}
a.cserek2 span, a:hover.cserek2 span {
bottom: 3px;
margin-left: -35px;
}
a.cserek3 span, a:hover.cserek3 span {
bottom: 3px;
margin-left: -34px;
}
a.cserek4 span, a:hover.cserek4 span {
bottom: 7px;
margin-left: -36px;
}
a.cserek5 span, a:hover.cserek5 span {
bottom: 7px;
margin-left: -35px;
}
a.cserek6 span, a:hover.cserek6 span {
bottom: 7px;
margin-left: -34px;
}
 
 
/* a csere feliratokat tartalmazó buborék kinézete - háttér, keret */
a.cserek span, a.cserek2 span, a.cserek3 span,
a.cserek4 span, a.cserek5 span, a.cserek6 span {
z-index: 8;
position: absolute;
width: 68px !important; /* doboz szélessége */
height: 78px !important; /* doboz magassága */
color: #ffffff;
background: rgba(255,255,255,1);
border: 1px solid #e2e2e2;
line-height: 40px; /* a feliratok ennyire helyezkednek el egymástól távol */
text-align: center;
visibility: visible;
opacity: 1;
left: 50%;
filter: alpha(opacity=100);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;  
}
/* a csere feliratokat tartalmazó buborék kinézete ha rávisszük az egeret */
a:hover.cserek span, a:hover.cserek2 span, a:hover.cserek3 span,
a:hover.cserek4 span, a:hover.cserek5 span, a:hover.cserek6 span {
background: rgba(255,255,255,0.1);
visibility: hidden; /* eltűnik */
z-index: 999;
opacity: 0;
filter: alpha(opacity=0);
left: 50%;
}

HTML kód:
Tipp: Ha több cserehelyre van szükséged, mint nyolc hely, például 12, akkor úgy duplázd majd a kódot, hogy elsősorban az legelső négy csere kódját duplázod nem a </div> zárótag után, hanem egy <br> sortörés tag után a nyolcadik végére. Ha példának okáért 16 darabot szeretnél, akkor az első nyolc elit kódot másold át, ugyanúgy egy sortörés után. Ha bárhol elakadtál, nyugodtan szólj és igyekszek segíteni!:)

<div class="csere">
<a class="cserek" href="CSERE URL CÍMÉNEK HELYE 1"><img alt="" src="KÉP URL CÍMÉNEK HELYE" style="width: 70px; height: 80px; margin-left: 0px; margin-right: 2px;"><span><strong>CSERE</strong> <em>NEVE</em></span></a> 
 
<a class="cserek2" href="CSERE URL CÍMÉNEK HELYE 2"><img alt="" src="KÉP URL CÍMÉNEK HELYE" style="width: 70px; height: 80px; margin-left: 2px; margin-right: 2px;"><span><strong>CSERE</strong> <em>NEVE</em></span></a> 
 
<a class="cserek2" href="CSERE URL CÍMÉNEK HELYE 3"><img alt="" src="KÉP URL CÍMÉNEK HELYE" style="width: 70px; height: 80px; margin-right: 2px;"><span><strong>CSERE</strong> <em>NEVE</em></span></a> 
 
<a class="cserek3" href="CSERE URL CÍMÉNEK HELYE 4"><img alt="" src="KÉP URL CÍMÉNEK HELYE" style="width: 70px; height: 80px; margin-left: 2px; margin-right: 0px;"><span><strong>CSERE</strong> <em>NEVE</em></span></a><br>
 
 
 
<a class="cserek4" href="CSERE URL CÍMÉNEK HELYE 5"><img alt="" src="KÉP URL CÍMÉNEK HELYE" style="width: 70px; height: 80px; margin: 4px 2px 4px 0px;"><span><strong>CSERE</strong> <em>NEVE</em></span></a> 
 
<a class="cserek5" href="CSERE URL CÍMÉNEK HELYE 6"><img alt="" src="KÉP URL CÍMÉNEK HELYE" style="width: 70px; height: 80px; margin: 4px 2px;"><span><strong>CSERE</strong> <em>NEVE</em></span></a> 
 
<a class="cserek5" href="CSERE URL CÍMÉNEK HELYE 7"><img alt="" src="KÉP URL CÍMÉNEK HELYE" style="width: 70px; height: 80px; margin: 4px 2px;"><span><strong>CSERE</strong> <em>NEVE</em></span></a> 
 
<a class="cserek6" href="CSERE URL CÍMÉNEK HELYE 8"><img alt="" src="KÉP URL CÍMÉNEK HELYE" style="width: 70px; height: 80px; margin: 4px 0px 4px 2px;"><span><strong>CSERE</strong> <em>NEVE</em></span></a>
</div>