Szövegdobozok, menükódok

Kedves Olvasók!

 

Még régebben készítettem pár szövegdobozt, aminek a kódját meg is osztom veletek. Emellett hoztam még szuper kódokat, amit felhasználhattok. Ha valmit visztek, kérlek jelezzétek!

                                                                  Saját készítésű szövegdoboz:

SZÖVEGDOBOZKA

Ide írhatsz bármit amit szeretnél!:)

xx Angel S.

Érdemes 150x150-es képet tenni a körbe, a téglalapba pedig 250x250-est hogy az egész kép látszódjon. Ha cboxot tesztek bele, akkor a méreteket állítsátok át!

A kódja:

<style type="text/css">.mainie { width: 250x; height: 250px;  border: 25px box-shadow: 0px 0px 2px #ccc; overflow: hidden;
}.mainie1 { width: 250px; height: 250px;

overflow: hidden; }.mainie .iconie {width: 150px; height: 150px; border-radius: 50%;margin-top: 50px;

background-image:url(KÖRNEK A LINKJE);

box-shadow: 1px 1px 12px; #ccc;
transition:width 1s, height 1s, transform 1s;
-webkit-transition:width 1s, height 1s, -webkit-transform 1s;
}.mainie:hover .iconie {width: 0px;height: 0px;transform:rotate(360deg);-webkit-transform:rotate(360deg);
}.mainie .boxy1 { margin-left: -250px; margin-top: -20px;position: relative; width: 200px; border: 8px solid #000000 ;padding: 8px; height: 140px; background-image: url(TÉGLALAPNAK A LINKJE); opacity: 0;box-shadow: 1px 1px 2px #000; text-align: justify; line-height: 125%; overflow: auto;letter-spacing: 1px;font-family: helvetica; font-size: 15px; color: #ff0000;-webkit-transition:width 1s, height 1s, -webkit-transform 1s;   -webkit-transition: all 1s ease-in-out;  -moz-transition: all 1s ease-in-out;  -o-transition: all 1s ease-in-out;  transition: all 1s ease-in-out;}.mainie:hover .boxy1 { margin-left: 0px;margin-top: -20px;opacity: 1;  -webkit-transition: all 1s ease-in-out;  -moz-transition: all 1s ease-in-out;  -o-transition: all 1s ease-in-out;  transition: all 1s ease-in-out;}.boxy1 b {color: #000; }.boxy1 i {color: #6C86A2; }.boxy1 s {color: #6C86A2; }.boxy1::-webkit-scrollbar { width: 3px; height: 5px; }.boxy1::-webkit-scrollbar-track { background-color: #f8f8f8; -webkit-border-radius: 0px; border-radius: 0px; }.boxy1::-webkit-scrollbar-thumb { -webkit-border-radius: 0px; border-radius: 0px; background-color: #000; }</style><center><div class="mainie"> <div class="mainie1"><div class="iconie"></div><div class= boxy1>

<span style="font-weight:bold;">CÍM</span>
<br />
<br />

<span style="font-style:italic;"> Ide írhatsz bármit amit szeretnél!:) </span>
<br />
<br />
VÉGE

</div></div></div><a href=""><div style="float: right: Times New Roman: Times New Roman; font-size: 200px; text-transform: uppercase;"></div></a></center>

Többi szövegdoboz:
A kódok a Shine nevű oldlaról származnak
1.

Ide írhatsz bármit! Ide írhatsz bármit!Ide írhatsz bármit!Ide írhatsz bármit!Ide írhatsz bármit!Ide írhatsz bármit!Ide írhatsz bármit!Ide írhatsz bármit!
Ide is írhatsz! Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!

  A körbe 120x120-as képet érdemes használni, hogy az egész látszódjon.   A kódja: <center>
<style>
.eyekiss { background-image:url(HÁTTÉR KÉP LINKJE); width: 250px; height: 230px; padding: 20px 20px 20px 180px; line-height: 110%; }
.eyekiss b1 { font-weight: normal; letter-spacing: 1px; font-family: verdana; font-size: 8px; color: #fff;}
.jcredit { text-align: right; width: 330px; font-size: 7px; text-transform: uppercase; font-family: verdana; letter-spacing: 1.5px;}
p::first-letter { font-size: 260%; color: #ae76ee; font-weight: bolded; text-shadow: 1px 1px 0px #f1f1f1, 2px 2px 0px #5c5f72; letter-spacing: 1px; margin-left: 18px;}
.pixie { height: 200px; overflow: auto; }
.pixie::first-letter { font-size: 260%; color: #ee767a; font-weight: bolded; text-shadow: 1px 1px 0px #f1f1f1, 2px 2px 0px #5c5f72; letter-spacing: 1px; margin-left: 18px;}
.pixie::-webkit-scrollbar { width: 4px;background-color:#fff; padding: 3px; }
.pixie::-webkit-scrollbar-thumb:vertical { background: -webkit-linear-gradient(#ee767a, #ae76ee) }
</style>
<center>
<div class="eyekiss"><div style="background-color: #fff; opacity: 0.92; padding: 15px; font-size: 9px; font-family: arial; width: 220px; height: 200px; text-align: justify;"><div class="pixie">

Ide írhatsz bármit! Ide írhatsz bármit!Ide írhatsz bármit!Ide írhatsz bármit!Ide írhatsz bármit!Ide írhatsz bármit!Ide írhatsz bármit!Ide írhatsz bármit!
<p>
Ide is írhatsz! Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!Ide is írhatsz!
</div></div>
<div style="position: relative; top: -230px; left: -210px;">
<img src="KÖR LINKJE" style="border-radius: 50%; height: 120px;padding: 5px; border: 1px solid #fff;"></div>
<div style="color: #fff; position: relative; top: -200px; left: -210px;  width: 120px; font-family: arial; font-size: 9px; text-align: justify;">



</div>
</div>
<div class="jcredit"><a href="http://shine.jcink.net/index.php?showuser=3389" style="color: #000; text-decoration: none;"></a></div>
</center>

2.

Szövegdobozka

IDE ÍRJ IDE ÍRJ IDE ÍRJ IDE ÍRJ IDE ÍRJ IDE ÍRJ

A kódja: 
<center><div style="width: 245px; background: #647886;"><div style="width: 220px; background-image: url(GIF, KÉP); margin-left: 2px; padding: 5px;">
<a href="http://shine.b1.jcink.com/index.php?showuser=3048"><div style="width: 210px; height: 10px; background: #fff; padding: 5px; margin-bottom: 2px;"></div></a>

<div style="width: 200px; height: 120px; margin-bottom: 2px; background: url(200x120 GIF HERE); border: 10px solid #fff;">

</div><div style="width: 210px; height: 10px; background: #fff; padding: 5px; margin-bottom: 2px; font-family: calibri; font-size: 8px; text-align: center; line-height: 100%; color: #000; text-transform: uppercase;">CÍM</div><div style="width: 200px; font-family: calibri; background: #fff; margin-bottom: 2px;  font-size: 10px; text-align: justify; line-height: 100%; color: #000; padding: 10px;">
IDE ÍRJ IDE ÍRJ IDE ÍRJ IDE ÍRJ IDE ÍRJ IDE ÍRJ

</div><div style="width: 210px; height: 10px; background: #fff; padding: 5px;"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="10">
   <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
   <param name="wmode" value="transparent" />
   <param name="FlashVars" value="mp3=http://a.tumblr.com/tumblr_lo53afEGbH1qbd1pvo1.mp3&buttoncolor=000000 "/>
</object></div></div></div>


3. 

i'm on top of the world waiting on this for a while now

IDE ÍRJ!

320x200-as méretű kép ajánlott!     A kódja:

<center><link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'><div style="width: 360px; height: 415px; padding: 20px; background: #fff;"><div style="width: 320px; height: 370px; padding: 15px; background: url(HÁTTÉR KÉP LINKJE); border: 5px solid #000;"><div style="font-family: iceland; font-size: 10px; text-transform: uppercase; margin-top: 2px; letter-spacing: 1px; text-align: center; color: #000;">FELSŐ SZÖVEG</div>

<div style="width: 320px; height: 200px; background: url(FELNYITÓ KÉP LINKJE);">

<div style="width: 319px; height: 10px; position: relative; left: 0px; top: 0px; background: #b9cdd8; position: relative; top: 190px;"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="99" height="10">
   <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
   <param name="bgcolor" value="#b9cdd8" />
   <param name="FlashVars" value="mp3=http://a.tumblr.com/tumblr_m6ex6jxs9I1r3u1bgo1.mp3" /></object><div id="imagine"><div class="dragons"><div style="width: 300px; height: 170px; padding: 10px; background-color: #fff; color: #000;"><div style="width: 284px; height: 154px; padding: 8px; font-family: arial; font-size: 9px; background-color: #fff; color: #000; overflow: auto; text-align: justify; line-height: 110%;" class="world">

IDE ÍRJ!

</div></div></div></div></div></div></div><a href="http://shine.b1.jcink.com/index.php?showuser=3048"><div style="width: 360px; color: #000; font-size: 10px; text-align: right;"></div></a></center><style>#imagine { width: 320px; height: 190px; position: absolute; top: -190px; left: 0px; overflow: hidden;}
#imagine .dragons { -webkit-transition-duration: 0.9s; -moz-transition-duration: 0.9s; -o-transition-duration: 0.9s; position: absolute; bottom: -190px; opacity: 1 }
#imagine:hover .dragons { -webkit-transition-duration: 0.9s; -moz-transition-duration: 0.9s; -o-transition-duration: 0.9s; bottom: 0px; }
.world::-webkit-scrollbar { width: 2px; }
.world::-webkit-scrollbar-track { background: #fff; }
.world::-webkit-scrollbar-thumb { background: #b9cdd8; }</style>

Menükódok:

1.

M E N Ü

CÍM 1 - CÍM2 - CÍM 3

A kódja:
<center> <style>.thisisit { color: #000; font-size: 24px; text-shadow: 1px 1px #f31234; font-style: italic; }.whatthequan { background-image:url(HÁTTÉR KÉP LINK); height: 130px; width: 300px; border-bottom: solid 10px #000; }.whatthequan:hover .trustme { opacity: 1; transition: 1s; top: 5px; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; }.trustme { opacity: 0; font-family: arial; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; color: #f31234; text-shadow: none; font-style: regular; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; position: relative; top: -70px;}.trustme a {color: #f31234; }.trustme a:hover { border-bottom: dotted 1px #000; }</style><div class="whatthequan"><div style="background-color: #fff; width: 200px; padding: 25px; height: 30px; position: relative; top: 25px;"><div class="thisisit">M E N Ü<div class="trustme"><a href="" target="_blank">CÍM 1</a> - <a href="LINK 1" target="_blank">CÍM2</a> - <a href="LINK2" target="_blank">CÍM 3</a></div></div></div></div> </center>