HTML §9. | Szövegdobozok

Aloha!

Az utóbbi időben eléggé elmaradtak az ilyesfajta bejegyzések, így arra gondoltam, mindenképpen illő lenne már hozni egyet. Néhány egyszerűbb, ám mutatós szövegdoboz kódját osztom meg veletek, melyeket a Kawaii Blog Designról szedtem; s egy kicsit bonyolultabb szövegdobozt is taláhattok, melynek forrása a SHINE oldal. Bal oldalt látjátok, hogy miként néz ki a szövegdoboz, a jobb hasábban - mellette - pedig a kódját. Ha esetleg segítség kellene abban, mi-mit jelent és mit írhattok át, írjatok nyugodtan! :)

További szép napot!

Diana H.

Pillangós doboz


szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg


Vége

Felhős doboz


szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg


Vége

Szövegdoboz

szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg


Vége

Szöveg doboz


szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg


Vége

<div style="background: url(http://31.media.tumblr.com/724fbaab2925483dd06a9f3ace68d2a2/tumblr_mj3q2aFBFg1qcdtsho1_1280.jpg); border-radius: 12px; padding: 17px; text-align: center; width: 120px;">
Pillangós  doboz<br />
<br />
<br />
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg<br />
<br />
<br />
Vége</div>

<div style="background: url(http://37.media.tumblr.com/tumblr_me9qbr31U01qcdtsho1_1280.jpg); border-radius: 25px; border: 1px solid #9ac9db; box-shadow: 2px 1px 5px #9ac9db; padding: 17px; text-align: center; width: 120px;">
Felhős  doboz<br />
<br />
<br />
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg<br />
<br />
<br />
Vége</div>

<div style="background-image: url(http://24.media.tumblr.com/tumblr_la3d70XaoV1qcdtsho1_500.jpg); border-radius: 600px 600px 0% 0%; box-shadow: 0px 0px 3px #000; color: white; padding-top: 10px; padding: 5px; text-align: center; width: 210px;">
Szövegdoboz
</div>
<div style="background: #c2a89f; box-shadow: 0px 0px 3px #000; padding-top: 10px; padding: 5px; text-align: center; width: 210px;">
<br />
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg<br />
<br />
<br />
Vége
</div>

<div
 style="background: #C3F592; border-radius: 12px; box-shadow: 5px 5px
5px #89A042; padding: 17px; text-align: justify; width:
120px;"><div style="text-align: center;">
Szöveg doboz<br
/>
<br />
<br />
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg<br />
<br />
<br />
Vége</div>
</div>

S akkor itt van az ígért bonyolultabb szövegdoboz: ha ráviszed az egeret a képre (ami lehet sima kép is, de gif is akár), akkor alatta megjelenik egy görgetősávos szövegdoboz. A betűk típusa, mérete, színe, a háttér színe, az oldalsó keretek színei, mind változtathatóak. :) A kódot a kép alatt találjátok!

 

a whole new world

check it out it's jazzy, the princess of arabia. how cool is she? she's supercool, deal with it. so this little desert flower has lived a very sheltered life. like... [i]very[/i] sheltered. the only people she's ever met in her life are her father, jafar, raja, the palace staff, and a list of suitors that she's interacted with for an hour, at maximum. yeah, she needs to get out more. and she really wants to! she's just not allowed because everyone treats her like she's breakable. everything is already laid out for her, but that's not how jasmine wants to live her life. she wants to explore! she wants to see the world, instead of tying herself down in a palace. because she has learned over sixteen years that money can't bring happiness. she just wants to experience everything that life has to offer, and it's hard to do that from a throne. she loves her kingdom and is looking forward to being the queen... she would just rather be a different type of ruler than the kind that her father has in mind for her, and the world seems to expect from her. jasmine is probably one of the most stubborn little lassies you'll ever have the fortune of meeting, and tends to let her determination overrule her better judgment sometimes. but she has a very good heart, and she was raised with proper values. the idea of being tied down for her whole life, and not being able to make any decisions on her own is painful for her to consider, and she is currently attempting to come up with a plan to extend her freedom -- including setting raja on some of the suitors that her father is having come visit her. jasmine just needs to get out more, tbh.

friends: these will be... nonexistent. she's never been outside the palace, so she's never met anyone other than those listed above. and the palace staff never look at her, jafar is a creepy bastard, and her father is... her father. so her only friend is raja. oops.

enemies: she's the fracken princess! of course she'll have enemies. people jelly of her, suitors that have been attacked by her tiger, people that she accidentally angered because she doesn't know how the world works... there's really no end to it. and she won't take people's abuse lying down. nope.

lovers: she has a very romantic idea of what she wants to happen. unfortunately, that's prolly not going to happen considering how she's gonna fall in love with a peasant. loljk aladdin and jasmine forever and they're the most adorable couple in existence.

<center>
<div class="tjazzy">
<img src="http://24.media.tumblr.com/432cce76aa59d78f0eaf1004570cda14/tumblr_mh99utxiAC1rjb0zao1_500.gif" width="350px" />
<br />
<div align="left">
<div class="tslide">
&nbsp; </div>
</div>
<div style="margin-top: 18px;">
</div>
<div class="tdown" style="border-left: 50px solid #ddeedd; text-align: center;">
<div style="border-bottom: 1px dotted #ccaa77; color: #bbcccc; font: bold italic 45px times new roman; height: 35px; letter-spacing: -5px; line-height: 30px; margin: 0 0 4px 10px; text-shadow: 1px 1px 1px #113333;">
a whole new world</div>
<div style="font: 10px calibri; height: 216px; overflow: auto; padding-left: 10px; padding-right: 4px; text-align: justify;">
check it out it's jazzy, the princess of arabia. how cool is she? she's supercool, deal with it. so this little desert flower has lived a very sheltered life. like... [i]very[/i] sheltered. the only people she's ever met in her life are her father, jafar, raja, the palace staff, and a list of suitors that she's interacted with for an hour, at maximum. yeah, she needs to get out more. and she really wants to! she's just not allowed because everyone treats her like she's breakable. everything is already laid out for her, but that's not how jasmine wants to live her life. she wants to explore! she wants to see the world, instead of tying herself down in a palace. because she has learned over sixteen years that money can't bring happiness. she just wants to experience everything that life has to offer, and it's hard to do that from a throne. she loves her kingdom and is looking forward to being the queen... she would just rather be a different type of ruler than the kind that her father has in mind for her, and the world seems to expect from her. jasmine is probably one of the most stubborn little lassies you'll ever have the fortune of meeting, and tends to let her determination overrule her better judgment sometimes. but she has a very good heart, and she was raised with proper values. the idea of being tied down for her whole life, and not being able to make any decisions on her own is painful for her to consider, and she is currently attempting to come up with a plan to extend her freedom -- including setting raja on some of the suitors that her father is having come visit her. jasmine just needs to get out more, tbh.<br />
<br />
<b>friends:</b> these will be... nonexistent. she's never been outside the palace, so she's never met anyone other than those listed above. and the palace staff never look at her, jafar is a creepy bastard, and her father is... her father. so her only friend is raja. oops.<br />
<br />
<b>enemies:</b> she's the fracken princess! of course she'll have enemies. people jelly of her, suitors that have been attacked by her tiger, people that she accidentally angered because she doesn't know how the world works... there's really no end to it. and she won't take people's abuse lying down. nope.<br />
<br />
<b>lovers:</b> she has a very romantic idea of what she wants to happen. unfortunately, that's prolly not going to happen considering how she's gonna fall in love with a peasant. loljk aladdin and jasmine forever and they're the most adorable couple in existence.

</div>
</div>
</div>
</center>
<style>
.tjazzy { width: 350px; background-color: #fff; padding: 10px; -webkit-transition: all .8s ease-in; -moz-transition: all .8s ease-in; -o-transition: all .8s ease-in; height: 178px; overflow: hidden; }
.tslide { margin-top: -25px; width: 0; overflow: hidden; padding-right: 5px; background-color: #113333; height: 15px; font: 8px calibri; letter-spacing: 3px; text-transform: uppercase; -moz-border-radius: 0 30px 30px 0; -webkit-border-radius: 0 30px 30px 0; -o-border-radius: 0 30px 30px 0; -webkit-transition: all .8s ease-in; -moz-transition: all .8s ease-in; -o-transition: all .8s ease-in; color: #CCAA77; text-align: right; line-height: 15px; opacity: 0; }
.tslide:hover { width: 335px; opacity: .9; }
.tdown { opacity: 0; -webkit-transition: all .8s ease-in; -moz-transition: all .8s ease-in; -o-transition: all .8s ease-in; }
.tjazzy:hover .tdown { opacity: 1; }
.tjazzy:hover { font-style: normal; height: 440px; color: #000; }
.tjazzy:hover .tslide { width: 335px; opacity: .9; }
.tjazzy ::-webkit-scrollbar { width: 5px; background-color: #bbcccc;} .tjazzy ::-webkit-scrollbar-thumb { background: #ddeedd; } .tjazzy ::-webkit-scrollbar-corner { background: #ddeedd; } .tjazzy ::-webkit-scrollbar-track { background: #bbcccc; }
.tjazzy b { color: #ccaa77; font-weight: bold; }
</style>