Cikkajánló
Ehhez a kódhoz már két másik hasonló is megtalálható az oldalon. Az egyik a legfrissebb cikkek megjelenítése, a másik a cikkajánló és most ez, amivel a legutoljára frissített cikkeket
Nagyon-nagyon sokan kérdeztétek, hogyan lehet azt megoldani, hogy a G-portálon a kiemelt kép szélein ne legyen padding, az-az oldalt és felül végigérjen a modulban a kép. Ezt is mint
Már is belevágok a közepébe. Remélem kisebb kárpótlás lesz ez a segítség sorozat, ha már az oldalam költöztetése miatt nem igazán maradt időm frissítéseket is hozni. Egy pár design
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épes üdvözlő szövegdoboz

Egy olyan szövegdoboz kódját osztom most meg veletek, ami manapság eléggé elterjedt egyes weboldalakon. Mondhatni ez a jelenlegi divat. Így mielőtt még úgyis megkérdeznétek, hogyan lehet ilyen szövegdobozt készíteni, elhoztam a kódját. :) Erről a dobozról van szó:

 

 

Természetesen többféleképpen is belehet kódolni az ilyen és hasonló dobozokat. Az általam készített kód ez:

 

Szövegdoboz kódja

 

<div id="idezet">
<div class="imagebox">
<p class="cim">
Welcome</p>
<blockquote>
<img class="thumb" src="/images/scripts/szovegdobozok/022/lauren-mini.png" style="height: 70px; width: 70px; margin-left: 5px; float: right;" />IDE JÖHET A SZÖVEG. IDE JÖHET A SZÖVEG.</blockquote>
<p>&nbsp;</p>
</div>
</div>

 

Ebben a kódban a kiemelt url a minikép. Ha nem szeretnél miniképet a dobozba, akkor a kiemelt sor törölhető.

 

CSS kód hozzá

 

<style type="text/css">
.cim { /*  a WELCOME felirat kinézete */
font-family: Arial;
font-size: 18px;
color: #ffffff;
text-align: center;
text-transform: uppercase;
padding-bottom: 30px;
text-shadow: none !important;
}
div[id*="idezet"] blockquote { /* a szöveg kinézete a dobozban */
background: transparent;
text-align: justify;
font-size: 13px !important;
color: #ffffff;
line-height: 19px;
border: 1px solid #ffffff;
}
div[id*="idezet"] .imagebox{ /* háttérkép */
background: url(/images/scripts/szovegdobozok/022/lauren-background.png);
padding-left: 20px;
padding-right: 20px;
}
--></style>

lindadesign Hozzászólások
2 374 megtekintés

Hozzászólások