2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
Coppermine Gallery themes

Coppermine Gallery themes
166 napja
276 néző

WordPress themes

WordPress themes
168 napja
143 néző

G-Portál themes

G-Portál themes
168 napja
86 néző

Tumblr themes

Tumblr themes
168 napja
128 néző

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>


2 687 megtekintés

Hozzászólások