Cikkajánló
Ez is egy olyan leírás, amit azért teszek fel az oldalra, mert már hangzott el kérdés róla. Hogyan lehet olyan modult készíteni, amiben minta is van? Például ez a
Kellemes estét :) Hoztam mára még négyféle project szövegdobozt és kilencféle elit csere ikon effektet. Az összes egyesével megnézhető az alábbi linkeken. Válogassatok :) A project dobozoknál és az
Sziasztok :) A mai frissítésem kettő darab G-Portálos teljes kinézet kódolással és részletes leírással együtt. Az egyik témán Selena Gomez, a másikon pedig Emilia Clarke van. A témákat innen
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 3.

 

Képek kódja

 

<div id="elit">
<div class="elit" style="background:url(ide jön a képed URL címe);">
<div class="elitcsere">
<a href="/" target="_blank">Joseph Morgan</a></div>
</div>
<div class="elit" style="background:url(ide jön a képed URL címe);">
<div class="elitcsere">
<a href="/" target="_blank">Matthew Goode</a></div>
</div>
<div class="elit" style="background:url(ide jön a képed URL címe);">
<div class="elitcsere">
<a href="/" target="_blank">Norman Reedus</a></div>
</div>
<div class="elit" style="background:url(ide jön a képed URL címe);">
<div class="elitcsere">
<a href="/" target="_blank">Ian Fansite</a></div>
</div>
<div class="elit" style="background:url(ide jön a képed URL címe);">
<div class="elitcsere">
<a href="/" target="_blank">Selena Gomez</a></div>
</div>
<div class="elit" style="background:url(ide jön a képed URL címe);">
<div class="elitcsere">
<a href="/" target="_blank">Miley Cyrus</a></div>
</div>
<div class="elit" style="background:url(ide jön a képed URL címe);">
<div class="elitcsere">
<a href="/" target="_blank">Ashley Tisdale</a></div>
</div>
<div class="elit" style="background:url(ide jön a képed URL címe);">
<div class="elitcsere">
<a href="/" target="_blank">Demi Lovato</a></div>
</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 url után a zárójelbe kell írni a képek címét.

 

<div class="elit" style="background:url(ide jön a képed URL címe);">
<div class="elitcsere">
<a href="/" target="_blank">Joseph Morgan</a></div>
</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; /* a két ikon közötti távolság */
margin-top: 5px; /* két sor közötti távolság */
-webkit-transition: opacity 0.2s linear;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.elit a, elit a:hover { /* link kinézete a kép mögött */
font-family: Arial !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: bold !important;
text-decoration: none !important;
}
.elitcsere{
height: 60px; /* a kép magasságából a margin-top értéket mindig ki kell vonni! */
width: 70px; /* az elit kép szélessége */
background: #000000; /* a bekúszó háttér színe */
text-align: center; /* szöveg középen */
line-height: 12px !important; /* sorok közötti táv */
padding-top: 40px; /* ennyivel dobja le a szöveget a tetejétől */
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity: 0;
-ms-transform: rotate(0deg); /* IE 9, ettől forog a háttér */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera, ettől forog a háttér */
transform: rotate(0deg); /* ettől forog a háttér */
}
.elit:hover .elitcsere{
opacity: 0.5;
-ms-transform: rotate(360deg); /* IE 9, ettől forog a háttér */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera, ettől forog a háttér */
transform: rotate(360deg); /* ettől forog a háttér */
}
--></style>

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

Hozzászólások