Cikkajánló
Most, hogy már nem szerkesztek napi szinten a G-Portálon kevesebbszer nézem meg például a Portállistát is. De a napokban ránéztem és kíváncsi voltam a portálépítés kategóriára. Örültem is, hogy
Megszületett a honlapverseny eredményhirdetése. Az első 3 helyezett sok-sok nyereménnyel lett gazdagabb. Részletes végeredmény nincsen. Akik nem kerültek be az első 3-ba, azok holtversenyben mind a 4. helyen végeztek
Kérdeztétek már jó sokan, hogy van-e rá valami megoldás, hogy KrazyJokes, Chazz és hasonló nevű egyének vagy robotok (ki tudja), ne firkálják tele a Chat-et. A válasz pedig, hogy
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 4.

 

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

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

Hozzászólások