Cikkajánló
6. rész   Ebben a részben részletesen bemutatom a BlogPlusz CSS kódját. Idővel lehet, hogy majd frissíteni kell a cikket, mert a G-Portál is folyamatosan frissül, de jelenleg a
Amikor rákattintunk egy cikkre, hogy teljes egészében elolvassuk, akkor sok helyen van a cikk alatt egyfajta cikkajánló. Nálam is van ilyen. Arról már írtam, hogy azt kóddal hogyan lehet
9. rész   Hoztam egy újabb G-Portálos CSS kódot. Ez még meleg, olyan új :) Igaz, hogy írtam már egy olyan CSS kódról, amivel a hozzászólásokat lehet átalakítani, de
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 9.

 

Képek kódja

 

<div id="elit">
<div class="elit">
<img src="IDE JÖN A KÉP URL CÍME" />
<div class="linkbox">
<p class="text"><a href="/" target="_blank">Joseph Morgan</a></p>
</div>
</div>
<div class="elit">
<img src="IDE JÖN A KÉP URL CÍME" />
<div class="linkbox">
<p class="text"><a href="/" target="_blank">Demetria Lovato</a></p>
</div>
</div>
<div class="elit">
<img src="IDE JÖN A KÉP URL CÍME" />
<div class="linkbox">
<p class="text"><a href="/" target="_blank">Matthew Gode</a></p>
</div>
</div>
<div class="elit">
<img src="IDE JÖN A KÉP URL CÍME" />
<div class="linkbox">
<p class="text"><a href="/" target="_blank">Ashley Tisdale</a></p>
</div>
</div>
</div>

 

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

 

<div class="elit">
<img src="IDE JÖN A KÉP URL CÍME" />
<div class="linkbox">
<p class="text"><a href="/" target="_blank">Ashley Tisdale</a></p>
</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 {
float: left;
position:relative;
margin-left: 5px; /* a két ikon közötti távolság */
margin-top: 0px; /* két sor közötti távolság */
}
.elit .linkbox {
width:70px; /* kép szélessége */
height:70px; /* kép magassága */
position:absolute;
top:6px;
left:6px;
-webkit-transform: scale(0);
transform: scale(0);
}
.elit:hover .linkbox {
-webkit-transform: scale(1);
transform: scale(1);
}
.elit img:hover {
-webkit-filter: blur(3px);
filter: blur(3px);
}
.elit img { /* kép kinézete */
border: 1px solid #E1E1E1;
border-radius:40px;
padding: 5px;
}
.text {
text-align: center; /* szöveg középen */
line-height: 14px; /* sorok közötti táv */
padding-top: 20px; /* ennyivel dobja le a szöveget a tetejétől */
}
.text a { /* szöveg kinézete */
font-family: Arial !important;
color: #ffffff !important;
font-size: 12px !important;
text-shadow: #000000 0px 0px 2px;
background: transparent !important;
font-weight: bold !important;
text-decoration: none !important;
z-index: 2;
}
.linkbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>

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

Hozzászólások