Cikkajánló
@nina   A cikk 2017. 07. 10-én frissült, mert az előző leírás már elavult volt és az oldal nem jött be, vagy maga a kód nem jelenítette meg az
Egy olyan beállításra hívnám fel a figyelmeteket, ami eléggé fontos lehet a szép kinézethez. Amióta elterjed, hogy a lehető legszélesebb fejlécet készíti a többség sajnos beleestek abba a hibába,
Szia mindenki! Elindult A tél weboldala verseny szavazása. Összesen 28 darab oldal nevezett a versenyre. Mindegyik különleges a maga nemében ♥ Ez most a közönségszavazás. Amelyik képre a legtöbb szavazat
Prémium téma | Ellie Goulding G-Portálos téma WordPress | Bejegyzés nem jelenik meg a főoldalon Gal Gadot G-Portálos téma Emilia Clarke G-Portálos téma Cole Sprouse G-Portálos téma
2017. július. 09.
Elit csere effekt szöveggel és képekkel

Kaptam már kérdést arról, hogy hogyan lehet azt megcsinálni, hogy az elit cserék szöveggel vannak kiírva és amikor rávisszük az egeret, akkor a szöveg helyett képeket mutat. Nos mivel nem láttam sehol sem ilyen elit csere kódot, így írtam egy egyszerűt. Valószínű, hogy más megoldás is van rá, de nekem ez volt a legkézenfekvőbb megoldás és egyszerű is a használata, ha valaki némileg már ért a kódoláshoz is. De ha elakadtok, akkor nagyon szívesen segítek benne :) Akkor lássuk a demót és a kódot:

 

Div kód

 

<div id="elitbox">
<a class="pictext" href="/" target="_blank">elit csere</a> <a class="pictext1" href="/" target="_blank">link csere</a> <a class="pictext2" href="/" target="_blank">affi csere</a> <a class="pictext3" href="/" target="_blank">társ csere</a>
<br>
<a class="pictext" href="/" target="_blank">elit csere</a> <a class="pictext1" href="/" target="_blank">link csere</a> <a class="pictext2" href="/" target="_blank">affi csere</a> <a class="pictext3" href="/" target="_blank">társ csere</a>
</div>

 

Minden új cserénél új ilyen sort kell a végéhez hozzáadni, és mindig megszámozni a következő sorszámmal.
<a class=”pictext2” href=”itt a perjel helyére jön az oldal linkcíme” target=”_blank”>elit csere</a>
Egymás után annyi ilyet kell egymás mellé tenni, amennyi kép lesz egy sorban. Ezután egy <br> taggal sortörést kell csinálni és új sorban jöhetnek a következő képek, ahogy a DIV minta kódban is látjátok fentebb.

 

CSS kód

 

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,600&subset=latin-ext');
#elitbox {
margin: 0px auto;
width: 470px;
height: 210px;
}
a.pictext, a.pictext1, a.pictext2, a.pictext3 { /* a szöveg kinézete, elhelyezkedése */
font-family: 'Fira Sans Condensed', sans-serif;
font-size: 13px;
font-weight: 400;
color: #ffffff;
text-align: center;
background: #CFC8E6;
outline: 1px solid #ffffff;
outline-offset: -5px;
padding: 37px 10px 0 10px;
width:80px;
height:63px;
float: left;
margin-left: 5px; /* a két ikon közötti távolság */
margin-bottom: 5px;
}
/* a képek URL címei külön-külön */
a.pictext:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/003.png);
}
a.pictext1:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/005.png);
}
a.pictext2:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/002.png);
}
a.pictext3:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/004.png);
}
</style>

 

A CSS kódban ebben a sorban vannak a szöveg kinézetei és elhelyezkedése. Háttérszíne, stb.
a.pictext, a.pictext1, a.pictext2, a.pictext3 { /* a szöveg kinézete, elhelyezkedése */
Minden új a.DIV alkalmával ide is be kell írni az új pictext-et az új sorszámával vesszővel elválasztva!!!!!!!!!!!!

 

Az a.pictext:hover részhez pedig egy új ugyanilyen sort kell másolni, csak minden új sorban az aktuális kép URL címét kell bemásolni!!!!!!!!!!!!!!!!!!!!!!! A számsort sem szabad minden újnál elfelejteni, hogy tudjon mihez hivatkozni a hover effekt.
a.pictext3:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/004.png);
}

Kapcsolódó bejegyzések

lindadesign
436 megtekintés

Előző, következő cikk

Lana Del Rey és Kylie Jenner G-Portálos témák

Mára elkészítettem még kettő darab G-Portálos kinézetet. Valahogy mostanában ehhez van kedvem. Mondjuk nem tudom, hogy Kylie Jenner mennyire lehet nagy szám nálunk, de tetszenek a fotósorozatai, így az egyik kinézetnél rá esett a választásom a fejlécet illetően. Amiben

Project dobozok és egy Elit csere effekt

Hasznosabb kódokat már jó régen nem hoztam, így ma összedobtam három féle új script-et. A kódok előnézeti képei láthatóak a kiemelt képen. Kettő darab project dobozt készítettem. Ebből az egyik már megvolt, csak a CSS részét írtam át és

 

Hozzászólások