HTML §5. | Szövegdobozok

Aloha everybody! :D

Régen jelentkeztem már html bejegyzéssel, ezért úgy gondoltam, hogy most ez lesz soron! Mint ahogy azt a cím is mutatja, különböző szövegdobozok kódjait találhatjátok meg, amiknek a használatával szebbé varázsolhatjátok a blogotok kinézetét és akár figyelemfelkeltőbb is lehet, mint egy sima 'szöveg' típusú bejegyzés! Úgyhogy, használjátok őket nyugodtan, de csak csínján bánjatok vele! :) A pirossal kiemelt részeken változtathattok, ezek többnyire csak a szokásos adatok, de mivel többen is kérdeztétek már, ezért itt egy kis segítség:
• width: szélesség
• height: magasság
• background-color: háttérszín
• color: betű színe
• background-imagine: háttérkép
• font-size: betűméret

A kódokért köszönet a FuckinWay-nek!

Szép estét,

Diana H.

------------------------------------------------------------------------------------------------------------------

Kerek szövegdoboz

Ha ráviszed az egeret, akkor színt vált (akár teljesen másik színt,
de árnyalatot is lehet)! A menü működik, de ez csupán egy kép!

.kerek_szovegdoboz:hover {filter: alpha(opacity=100); opacity:1.0;;-moz-transition: 0.5s}

<div class="kerek_szovegdoboz"><div style="margin-top: -5px; margin-left: -5px;"">

IDE JÖN A SZÖVEGED!!!!!!

</div></div>

<style>

.kerek_szovegdoboz {

width: 170px;

height: 170px;

padding: 40px;

text-align:justify;

border-radius: 125px;

moz-border-radius: 125px;

background-color: #93C1C2;

color: #fefefe;

font-family: trebuchet ms;

filter: alpha(opacity=60); opacity:0.6;;-moz-transition: 0.5s

}

.kerek_szovegdoboz a{border-bottom: 1px dotted #fefefe;}

.kerek_szovegdoboz:hover {filter: alpha(opacity=100); opacity:1.0;;-moz-transition: 0.5s}

</style>

Idézetes szövegdoboz

A háttérben levő képet nyugodtan lecserélheted, csak illeszd be
a kép url címét! :)

<div id="idezet_doboz">

SZÖVEGED HELYE!!!

</div>

<style>

#idezet_doboz{

padding-left: 3px;

background-image:url(a kép linkje);

font-size: 10pt;

color: #000000;

font-weight: normal;

line-height: 15pt; 

padding: 8px; 

font-family: georgia;

font-style: italic; 

letter-spacing: 1px; 

border: 1pt dashed #E7D8BF;

}

</style>

Egyszerű, felhajtott sarkú szövegdoboz

A szövegdoboznak adhatsz háttérképet is, de akár simán csak színt is,
valamint megváltoztathatod a keret és a betű színét is!

<div class="curlycontainer">
<div class="innerdiv">
<b>Főcím</b> <br />
Ide jön a szöveged!
</div>
</div>
<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}.curlycontainer .innerdiv{
background: transparent 

url(a kép linkje) 

bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>

Lenyíló szövegdoboz

 Figyelem! Ez nem menü, csupán egy szövegdoboz, így
átirányító linket nem tudsz rá rakni!!!

<div class="dhtmlgoodies_question">Bemutatkozó szöveg</div>

<div class="dhtmlgoodies_answer">

<div>

Lorem ipsum dolor sit amet

<ul>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

</ul>

</div>

</div>

<div class="dhtmlgoodies_question">Miket találsz itt?</div>

<div class="dhtmlgoodies_answer">

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

</div>

</div>

<div class="dhtmlgoodies_question">Az oldal információ</div>

<div class="dhtmlgoodies_answer">

<div>

dLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

</div>

</div>