Cikkajánló
Az eddig elkészült rendelések előnézeti képeit feltöltöttem a galériába, ott meg tudjátok nézni. Akiknek még nem jeleztem, hogy kész a design-juk, legyenek türelemmel, mert készülnek azok is.:) Most Sosugary
Egy újabb WordPress leírást hoztam. A WP-Polls szavazó bővítmény beállításáról és annak használatáról olvashatsz. A cikkben szó van a szavazó kinézetéről, magyarosításáról és arról is, hogyan tudod kódokkal az
Több helyen láttam már, ahogy az én G-Portálos oldalamon is, hogy ha úgy használjátok a Blog modult, hogy a főcímet eltüntetitek róla, akkor a szélső modul mindig feljebbről kezdődik,
Emma Roberts G-Portálos téma Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák
Képeffekt elit cseréknél 5.

 

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) rotateX(0deg);
-moz-transform:perspective(400px) rotateX(0deg);
transform:perspective(400px) rotateX(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) rotateX(360deg);
-moz-transform:perspective(400px) rotateX(360deg);
transform:perspective(400px) rotateX(360deg);
opacity: 0.5;
}
--></style>

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

Hozzászólások