Cikkajánló
Készítettem egy újabb .psd fejlécet, ami szabadon letölthető. A fejlécen Hilary Duff díszeleg :) A nagyon alap kinézetet ez a fejléc ihlette, csak én jobban ki díszítettem plusz inkább
Joseph Morgan Matthew Goode Norman Reedus Ian Fansite Selena Gomez Miley Cyrus Ashley Tisdale Demi Lovato   Hoztam még ötféle képeffektet, amit nagyon jól lehet használni elit cseréknél (is).
Az ingyenesen letölthető Sosugary galéria mellett, ha egyedi saját Sosugary galéria kinézetet szeretnétek, akkor idén (az-az december 31-ig) ingyen lehet megrendelni tőlem. Vagy is, aki ezután rendeli meg, attól
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
Képeffekt elit cseréknél 8.

 

Képek kódja

 

<div id="elit">
<div class="elit" style="background:url(IDE JÖN A KÉP URL CÍME); background-position: center;  background-repeat: no-repeat;">
<div class="elitcsere">
<a href="/" target="_blank">Joseph Morgan</a></div>
</div>
<div class="elit" style="background:url(IDE JÖN A KÉP URL CÍME); background-position: center;  background-repeat: no-repeat;">
<div class="elitcsere">
<a href="/" target="_blank">Demetria Lovato</a></div>
</div>
<div class="elit" style="background:url(IDE JÖN A KÉP URL CÍME); background-position: center;  background-repeat: no-repeat;">
<div class="elitcsere">
<a href="/" target="_blank">Matthew Gode</a></div>
</div>
<div class="elit" style="background:url(IDE JÖN A KÉP URL CÍME); background-position: center;  background-repeat: no-repeat;">
<div class="elitcsere">
<a href="/" target="_blank">Ashley Tisdale</a></div>
</div>
</div>

 

Egy sor kód
Ez egy darab kép kódja. Ezt a sort kell duplázgatni.

 

<div class="elit" style="background:url(IDE JÖN A KÉP URL CÍME); background-position: center;  background-repeat: no-repeat;">
<div class="elitcsere">
<a href="/" target="_blank">Joseph Morgan</a></div>
</div>

 

CSS kód
Ahova nem írtam magyarázatot, azokat az értékeket csak akkor változtassátok meg, ha értetek hozzá

 

<style>
#elit{
margin: 0px auto; /* ez marad. ettől lesz a modulban középen */
width: 400px; /* 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:70px; /* 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 */
padding: 5px;
border: 1px solid #E0C1AF;
border-radius: 40px;
-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: #845233 !important;
font-size: 12px !important;
font-weight: bold !important;
text-decoration: none !important;
text-shadow: 1px 1px 2px #ffffff;
background: transparent !important;
}
.elitcsere{
height: 48px; /* 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: #E0C1AF; /* 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 */
margin-left:-25px; /* ettől kúszik be a fekete háttér */
padding-top: 20px; /* ennyivel dobja le a szöveget a tetejétől */
border:1px solid #E0C1AF;
border-radius: 40px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity: 0;
}
.elit:hover .elitcsere{
opacity: 0.7;
margin-left: 0px;
}
--></style>

lindadesign Hozzászólások
520 megtekintés

Hozzászólások