Cikkajánló
Készítettem a napokban is egy teljes kinézetet, bár most ezt nem kódoltam be, mert ahhoz már nem volt kedvem, így simán Photoshop formátumban tölthető le és használható fel majdnem
Ez a tartalom regisztrációhoz kötött. Ha már regisztrált tag vagy, akkor a Bejelentkezés alatt tudsz belépni, ellenkező esetben regisztrálnod kell a tartalom megtekintéséhez.Regisztrált felhasználó belépéseFelhasználónévJelszó Emlékezzen rám  RegisztrációFelhasználónév*Email cím*E-mail cím újra*Honlap**Kötelezően
Még augusztusban valamikor készítettem háromféle Oldal infó szövegdobozt, amit akkor fel is tettem az oldalra, csak még nem írtam ki. Ha esetleg valaki nem tud magától készíteni az oldalára,
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 Maisie Williams G-Portálos téma
Képeffekt elit cseréknél 14.

Képek kódja

 

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

 

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

 

<div class="elit">
<a href="/" target="_blank"><img src="IDE JÖN A KÉP URL CÍME" /></a>
<div class="linkbox">
<p class="text">Ashley Tisdale</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 */
background: #ECCDD9; /* háttérszín */
border: 1px solid #ECCDD9 !important; /* egyezzen meg a háttér színével */
border-radius:40px; /* ettől kerek a háttér széle */
position:absolute;
top:5px; /* háttér középen */
left:5px; /* háttér középen */
opacity: .8;
}
.elit:hover .linkbox {
margin-top: 88px;
}
.elit a:link img, .elit a:visited img {
border: 1px solid #ECCDD9; /* keret a képek köré */
border-radius:40px;
padding: 5px; /* távolság keret és kép között */
filter: alpha(opacity=100);
opacity: 10;
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
}
.elit a:hover img {
border: 1px solid #5E334F; /* keret a képek köré */
filter: alpha(opacity=100);
opacity: 10;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.text {
text-align: center; /* szöveg középen */
line-height: 14px;
padding-top: 20px; /* ennyivel dobja le a szöveget a tetejétől */
font-family: Arial !important;
color: #ffffff !important;
font-size: 12px !important;
text-shadow: -1px 1px 3px #BB83A7;
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;
}
a:hover {
background: transparent !important;
}
</style>

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

Hozzászólások