2014. szeptember 8., hétfő

HTML §10. | Különlegsebb szövegdobozok

Sziasztok!

Elena kérte chaten, hogy hozzunk még néhány különlegesebb html kódot, így most ezen kérés teljesítésével érkeztem! A kódok forrása a SHINE oldal, kik szerkesztőinek ezúton is köszönöm!
Itt szeretném felhívni a figyelmeteket arra, hogy bár többen is kértétek az oldalon levő 'welcome' és 'infos' modul kódját, nem áll módom továbbadni senkinek, így a jövőben ne is kérjétek! Köszönöm a megértést!

Szép napot,
Diana H.



Képes szövegdoboz

USERNAME • ONLINE
instant message goes here doll face. it can be as long or as short as you want.

<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"></link><link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css"></link>
<style type="text/css">
 .razzi {width: 360px; height: 160px; background-color: #caecae; border: 15px solid #eee;}
 .boii {font-family: 'Oswald', sans-serif; padding: 10px;}
 .druunk {width: 185px;letter-spacing: 1px; font-family: 'Arvo', serif;line-height: 90%;text-align: justify;overflow: auto; font-size: 10px; padding: 5px; background-color: #fff; height: 100px; margin-right: 5px; float: right; }
</style>
<br />
<center>
<div class="razzi">
<div style="float: left; padding: 5px; width: 150px;">
<img src="http://placehold.it/150" style="height: 150px; width: 150px;" /></div>
<div class="boii">
USERNAME • ONLINE</div>
<div class="druunk">
instant message goes here doll face. it can be as long or as short as you want. </div>
</div>
<a href="http://shine.b1.jcink.com/index.php?showuser=4262">▼</a>
</center>


Kerekített sarkú, egyszerűbb szövegdoboz


Rules
Don't steal. Leave the credit on. All that good stuff. Change whatever colors you wish; change anything you like, really. If you want wish to use this as a base code, that's fine as long as my credit stays on. Link me to where you're using this because I'm vain and like to see my stuff.

#AADEAD #BBDEAD #CCDEAD #DDDEAD #EEDEAD


<link href="//fonts.googleapis.com/css?family=Crete+Round:400|Advent+Pro:400" rel="stylesheet" type="text/css">

<div style="width:350px; height:220px; background-color:#B7CBBF;padding-top:2px; padding:10px; border-radius:50px 0px 50px 0px; border-bottom:5px solid #F9A799; border-top:5px solid #F4BFAD;">
     <div style="color:#8C886F; border-bottom: 3px double #8C886F; text-align:center; font: 34px 'Crete Round'; ">Rules</div>
    <p style="color:#8C886F; margin:30px; font: 14px
              'advent pro'; ">Don't steal. Leave the credit on. All that good stuff. Change whatever colors you wish; change anything you like, really. If you want wish to use this as a base code, that's fine as long as my credit stays on. Link me to where you're using this because I'm vain and like to see my stuff.  <span style="color:#f9a799; text-shadow: 3px 3px 3px #444;">♥</span>
  <br><br><span style="background-color:white"><span style="color:#AADEAD; ">#AADEAD</span> <span style="color:#BBDEAD; ">#BBDEAD</span> <span style="color:#CCDEAD; ">#CCDEAD</span> <span style="color:#DDDEAD; ">#DDDEAD</span> <span style="color:#EEDEAD; ">#EEDEAD</span></span>
  </div>
</div>

Dupla keretes, görgetősávos, gifes szövegdoboz

Mivel a kód itt egy kicsit furcsán jelent meg, és így nem látszott rendesen miként is néz ki a szövegdoboz, berakom nektek fényképbe, de ne aggódjatok, a kód működik, hiszen én is felhasználtam már!



<style>
.mindcontrol { height: 230px; overflow: auto; padding-right: 4px; }
.mindcontrol b {  color:#556677 }
.mindcontrol::-webkit-scrollbar { width: 5px; height: 5px; }
.mindcontrol::-webkit-scrollbar-track { width: 5px; background-color: #ffeedd; }
.mindcontrol::-webkit-scrollbar-thumb { background-color: #ddbbbb; }
.friiday:hover { position: relative; left: -220px; transition: 1.3s; -webkit-transition: all 1.3s ease; -moz-transition: all 1.3s ease; -ms-transition: all 1.3s ease; -o-transition: all 1.3s ease; }
.friiday { position: relative; left: 2px; transition: 1.3s; text-align; center; -webkit-transition: all 1.3s ease; -moz-transition: all 1.3s ease; -ms-transition: all 1.3s ease; -o-transition: all 1.3s ease; }
</style>
<center>
<div style="background-color:#ddbbbb; width: 250px; height: 400px; padding: 15px; ">
<div style="background-color:#fff; border: solid 5px #ffeedd;padding: 20px; font-family: arial; font-size: 9px; color: #000; text-align: justify; width: 200px; height: 350px; opacity: 0.95; overflow: hidden;">
<div class="mindcontrol">

POST GOES HERE.

</div>
<div class="friiday"><table><td><div style="font-family: times; font-size: 24px; color: #ddbbbb; text-shadow: 1px 1px #556677; font-weight: bold; line-height: 20px; width: 210px;"><i>how is this friday?</i></div></td><td>
<div style="color: #556677; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; text-align: center; width: 200px;  ">tag - notes</div></td></table></div>
<a href="http://shine.b1.jcink.com/index.php?showuser=3389" title="thanks joei"><img src="https://placehold.it/200x150" width="200"></a>
</div>
</div>
</center>

7 megjegyzés:

  1. Nagyon szépen köszönöm, hálás vagyok, hogy teljesítettétek kérésemet:)
    xxElena

    VálaszTörlés
  2. Kedves Diana!
    Nagyon megtetszett a harmadik szövegdoboz. És alkalmaztam is a blogomon - remélem nem gond.
    De sehogy se tudok rájönni, hogy lehet megváltoztatni a szöveg méretét?! Tudnál ebben segíteni kérlek?
    Előre is köszönöm xx Maya

    VálaszTörlés
  3. Felhasználom a második, nagyon megtetszett. Köszönöm a kódot. :)

    VálaszTörlés
  4. Sziasztok!

    Elvittem az utolsó kódot :) Köszönöm! :D

    Love Ya,
    Mace

    VálaszTörlés
  5. Szép napot!
    Vittem az elsőt. :)

    VálaszTörlés
  6. Ezt a megjegyzést eltávolította a szerző.

    VálaszTörlés