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
315 napja
721 néző

WordPress themes

WordPress themes
316 napja
206 néző

G-Portál themes

G-Portál themes
316 napja
117 néző

Tumblr themes

Tumblr themes
316 napja
169 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 799 megtekintés

Hozzászólások