Cikkajánló
Létrejött egy új menüpont az oldalon PSD kellékek címmel. Ebben a modulban találhatóak majd az általam Photoshop-pal készített kellékek Photoshop formátumban természetesen :), hogy letöltés után áttudjátok alakítani és
Új kategóriával bővült a galéria Vectoros grafika címmel. Amikor időm van, vagy kedvem akkor töltögetem fel a design kellékeket is a galériába, amik eddig az aranymeli.gp-n voltak elérhetőek. Persze
Hoztam egy hozzászólás űrlapot a WordPress használóknak :) Ha unnátok az alap űrlapot, akkor cseréljétek le erre. Kicsivel több mindent tud. Lehet avatart beállítani, nekem kinézetre is szimpatikusabb, és
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
Képeffekt elit cseréknél 4.

 

Képek kódja

 

<div id="elit">
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Joseph Morgan</a></figcaption></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Matthew Goode</a></figcaption></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Norman Reedus</a></figcaption></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Ian Fansite</figcaption></a></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Selena Gomez</figcaption></a></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Miley Cyrus Fansite</figcaption></a></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Ashley Tisdale</figcaption></a></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Demi Lovato Fansite</figcaption></a></figure></div>
</div>

 

Simán csak ezt a kódsort kell ismételni, attól függően, hogy mennyi ikonotok van :) Az a href után a perjel helyére kell írni a link csere címét. Az img src után kell írni a képek címét.

 

<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Joseph Morgan</a></figcaption></figure></div>

 

CSS kód

 

<style type="text/css">
#elit {
margin: 0px auto; /* ez marad. ettől lesz a modulban középen */
width: 308px; /* a doboz szélessége, amiben a képek vannak */
height: 220px; /* a doboz magassága, amiben a képek vannak */
}
.elit {
width:70px; /* az ikon szélessége */
height:100px; /* az ikon magassága */
float:left;
margin-left: 5px;
margin-top: 5px;
}
.elit a:link, elit a:hover { /* link kinézete a képen*/
font-family: Arial !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: bold;
}
.elit figure figcaption { /* háttere kinézete */
text-align: center !important;
padding-top: 40px; /* ennyivel dobja le a szöveget a tetejétől */
background-color: #000000;
line-height: 12px !important;
top:0;
left:0;
width:70px; /* szélesség ua., mint a képnél */
height:100px; /* magasság ua., mint a képnél */
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-transform:perspective(400px) rotateY(0deg);
-moz-transform:perspective(400px) rotateY(0deg);
transform:perspective(400px) rotateY(0deg);
display:block;
position:absolute;
opacity: 0;
}
.elit figure {
margin:0;
padding:0;
position:relative;
}
.elit figure img {
display:block;
position:relative;
}
.elit figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.elit figure:hover img,figure.hover img {
}
.elit figure:hover figcaption,figure.hover figcaption {
-webkit-transform:perspective(400px) rotateY(360deg);
-moz-transform:perspective(400px) rotateY(360deg);
transform:perspective(400px) rotateY(360deg);
opacity: 0.5;
}
--></style>

lindadesign Hozzászólások
1 071 megtekintés

Hozzászólások