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
283 napja
701 néző

WordPress themes

WordPress themes
284 napja
198 néző

G-Portál themes

G-Portál themes
284 napja
112 néző

Tumblr themes

Tumblr themes
284 napja
162 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 790 megtekintés

Hozzászólások