Cikkajánló
Igaz, már jó régóta megváltozott a Cbox Chat kezelőfelülete, de csak most bírtam rávenni magam, hogy frissítsem a régi leírásokat. De ma ez is megtörtént, így jelenleg minden naprakész
2. rész   Ebben a részben a .site kódrészről írok kicsit bővebben. Maga a kód így néz ki   .site { /* oldal szélessége */ width: 1018px; }  
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
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
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
184 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