Cikkajánló
Kellemes estét mindenkinek :) Így hétvégére hoztam újabb kettő darab letölthető G-Portálos teljes sablont. Egy Kristen Stewart és egy Troian Bellisario sablon készült el. Úgy, mint az eddigieket, itt
Készítettem egy újabb ingyenes .psd fejlécet, amit bárki letölthet és felhasználhat forrás megjelölésével természetesen. A fejléc innen tölthető le: PSD – Photoshop fejlécek   megnézem teljes nagyságban Kapcsolódó bejegyzések
Mielőtt megörülnétek, nem, nem lett a G-Portálon ilyen funkció. Ezt magunknak kell elkészíteni. Viszont, mivel sok mindenki használja a szélső sávban a címkéket felsorolás jellegűen, így készítettem egy tök
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 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 024 megtekintés

Hozzászólások