2018. 01. 02.Mi lesz a G-Portállal?
2018. 01. 01.Coppermine | Magyar nyelvű galéria (hungarian.php)
2017. 12. 23.Saját videó beágyazása weboldalba
2017. 12. 18.Coppermine vagy Sosugary galéria?
2017. 12. 18.Coppermine | Egyedi főoldali tartalom
Coppermine Gallery themes

Coppermine Gallery themes
17 napja
30 néző

WordPress themes

WordPress themes
19 napja
33 néző

G-Portál themes

G-Portál themes
19 napja
18 néző

Tumblr themes

Tumblr themes
19 napja
30 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 563 megtekintés

Hozzászólások