2015. március 8., vasárnap

Szövegdobozok #10 / Menükód #1

Sziasztok! Szép délutánt mindenkinek! :)
Újabb menükódokkal és szövegdobozokkal érkeztem. Remélem hasznukat veszitek. :)

1.
MENü Cí­ME
MENü Cí­ME
MENü Cí­ME
MENü Cí­ME
MENü Cí­ME

Kód:
<div align="center">
<a class="vertical-menu" href="LINK">Menü címe</a><br />
<a class="vertical-menu" href="LINK">Menü címe</a><br />
<a class="vertical-menu" href="LINK">Menü címe</a><br />
<a class="vertical-menu" href="LINK">Menü címe</a><br />
<a class="vertical-menu" href="LINK">Menü címe</a></div>
<style type="text/css">
a.vertical-menu{
   font-family: Trebuchet MS !important;
   background-color: #F5F5F5;*#c0c0c0*
   color: #000000 !important;*#FFFFFF*
   font-size: 12px !important;
   text-transform: uppercase !important;
   letter-spacing: 1px;
   padding: 5px 0 3px 0;
   margin: 2px;
   text-align: center;
   width: 250px;
   height: 20px;
   border-left: 7px solid #000000; *FFFFFF*
   border-right: 7px solid #000000; *FFFFFF*
   text-decoration: none;
   margin-bottom: 1px;
   border-radius: 20px;
   display: inline-block;

</style>



Szövegdobozok:

1. - felugró szövegdoboz -


SZĂ–VEG HELY
CíM HELYE


Kód:

<style type="text/css">.dream { width: 300px; height: 185px; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; background-color: transparent; opacity: 0;  } .dream:hover { opacity: .8; width: 260px; height: 95px; padding: 20px; background: #FFFFFF; color: #FF00FF }  .my { width: 300px; padding-top: 50px; }</style> <link href="http://fonts.googleapis.com/css?family=Titillium+Web:700,700italic" rel="stylesheet" type="text/css"></link>        <br />
<center>
 <div style="background: #FF69B4; border: 1px dashed #F08080; padding: 3px; width: 300px;">
<div style="background: url(KÉP LINKJE); height: 185px; width: 300px;">
<div class="my">
<div class="dream">
<center>
<div style="font-family: tahoma; font-size: 9px; height: 75px; line-height: 90%; margin-top: 10px; overflow: auto; text-align: justify; width: 240px;">
SZÖVEG HELYE</div>
</center>
</div>
</div>
</div>
</div>
<div style="background: #FF69B4; border-bottom: 4px solid #F08080; color: #000000; font-family: Titillium web; font-size: 35px; font-weight: bold; letter-spacing: -2px; line-height: 100%; padding: 10px; text-align: center; text-shadow: 1px 1px white; text-transform: uppercase; width: 288px;">
CÍM HELYE </div>
<br /> </center>


2.


blablablablablablablablablablablablablablablablabla
Kód:
<center>
<table><tbody>
<tr><td><div style="border-left: 1px dashed #FFA07A; height: 250px; width: 1px;">
</div>
</td><td><div style="background-image: url(250 X 250 KÉP LINKJE); border-left: 50px solid #FFDEAD; border-right: 50px solid #FFDEAD; height: 250px; width: 250px;">
<div style="padding-top: 190px;">
<div style="-moz-border-radius: 5px; -moz-transform: skew(-20deg,0deg); -ms-transform: skew(-20deg,0deg); -o-transform: skew(-20deg,0deg); -webkit-transform: skew(-20deg,0deg); background-color: #EEE8AA; border-radius: 5px; color: #D3D3D3; font-family: orator std; font-size: 10px; font-style: normal; margin-left: -20px; padding: 5px; text-align: center; transform: skew(-20deg,0deg); width: 280px;">
<div style="-moz-transform: skew(20deg,0deg); -ms-transform: skew(20deg,0deg); -o-transform: skew(20deg,0deg); -webkit-transform: skew(20deg,0deg); transform: skew(20deg,0deg);">
blablablablablablablablablablablablablablablablabla</div>
</div>
</div>
</div>
</td><td><div style="border-left: 1px dashed #D3D3D3; height: 250px; width: 1px;">
</div>
</td></tr>
</tbody></table>
</center>

3.
IDE Jö–N A CĂíM
IDE IS íRJ VALAMIT
IDE Jö–N A SZöVEG

Kód:
<center>
<div style="background: #FFD700; border: 16px solid #FFA500; padding: 10px; width: 260px;">
<div style="background-color: #FFFF00; border-bottom: 10px solid #FF8C00; color: #FF7F50; font-family: oswald; font-size: 32px; letter-spacing: -2px; line-height: 100%; padding: 12px 2px 12px 2px; text-transform: uppercase; width: 256px;">
IDE JÖN A CÍM
</div>
<div style="background-color: #FFFF00; color: #000000; font-family: calibri; font-size: 6px; letter-spacing: 4px; line-height: 100%; margin-bottom: -6px; padding: 1px 0px 1px 0px; position: relative; text-transform: uppercase; top: -42px; width: 256px; z-index: 3;">
ide is írj valamit</div>
<div style="background-color: white; color: black; font-family: calibri; font-size: 10px; line-height: 116%; padding: 10px; text-align: justify; text-transform: uppercase; width: 240px;">
IDE JÖN A SZÖVEG
</div>
</div>
</center>



4. -ennek a teteje rózsaszínes             lesz!-

Cím
ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg.


kóD:

<div style="width: 200px; height: 30px; background: #F0AABD; border-top: 2px  #000000 solid; -moz-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;">
<div style="font-size:24px; font-family: Georgia; color: #000000; text-shadow: #EEBBBB 2px 2px 2px;">Cím</div>

<div style="width: 200px; background:#CDDCD5; border-top: 3px pink solid; border-bottom: 4px dark pink double;"><div style="font-size: 13px; font-family: georgia; color: #000000; text-align: justify;">ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. </div></div>
5.


Ide jöhet a cím.
Egy pár üdvözlő szó
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg éééééééés még több szöveg

Kód:

<link href='http://fonts.googleapis.com/css?family=Abril+Fatface' rel='stylesheet' type='text/css'><link href="http://avey.b1.jcink.com/uploads/avey/strawberryswing.css" rel="stylesheet" type="text/css"><style type="text/css">
.ssimg { background: #68228B; }
.sstext { font: 25px/25px abril fatface; text-shadow: 1px 1px 0px #AADDBB; text-transform: lowercase; }
.ssnotes { font: italic 9px/9px times; color: white; text-align: center; letter-spacing: 2px; }
.swing { font: 10px/11px times; }
.swing::-webkit-scrollbar-track { background: #68228B; }

.strawberryswing  { background: #68228B;
background: -moz-linear-gradient(top,  #AADDBB 0%, #68228B 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#68228B), color-stop(100%,#EEBBBB));
background: -webkit-linear-gradient(top,  #68228B 0%,#AADDBB 100%);
background: -o-linear-gradient(top,  #68228B 0%,#AADDBB 100%);
background: -ms-linear-gradient(top,  #68228B 0%,#AADDBB 100%);
background: linear-gradient(to bottom,  #68228B 0%,#AADDBB 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68228B', endColorstr='#AADDBB',GradientType=0 ); }

.swing::-webkit-scrollbar-thumb { background: #68228B;
background: -moz-linear-gradient(top,  #68228B 0%, #AADDBB 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#68228B), color-stop(100%,#AADDBB));
background: -webkit-linear-gradient(top,  #68228B 0%,#AADDBB 100%);
background: -o-linear-gradient(top,  #68228B 0%,#AADDBB 100%);
background: -ms-linear-gradient(top,  #68228B 0%,#AADDBB 100%);
background: linear-gradient(to bottom,  #68228B 0%,#AADDBB 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68228B', endColorstr='#AADDBB',GradientType=0 ); }
</style><center><div class="strawberryswing"><div class="ssline"></div><div class="ssimg">

<img src="http://placehold.it/100x100" />

</div><div class="sstext">

strawberry swing.

</div><div class="ssnotes">

notes go here!

</div><div class="strawberry"><div class="swing">

post goes here

</div></div></div><a href="http://shine.b1.jcink.com/index.php?showuser=55"><div style="text-align: center; font: 10px/11px calibri; text-transform: uppercase; letter-spacing: 2px; margin-top: 5px;;">&copy; avey</div></a>
</center>

6. - ugyan ez, csak más színben -



ide jöhet a cím.
ide is írj valamit
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg éééééééés még több szöveg

Kód:

<link href='http://fonts.googleapis.com/css?family=Abril+Fatface' rel='stylesheet' type='text/css'><link href="http://avey.b1.jcink.com/uploads/avey/strawberryswing.css" rel="stylesheet" type="text/css"><style type="text/css">
.ssimg { background: #FF0000; }
.sstext { font: 25px/25px abril fatface; text-shadow: 1px 1px 0px #EEBBBB; text-transform: lowercase; }
.ssnotes { font: italic 9px/9px times; color: white; text-align: center; letter-spacing: 2px; }
.swing { font: 10px/11px times; }
.swing::-webkit-scrollbar-track { background: #FFBBBB; }

.strawberryswing  { background: #FFBBBB;
background: -moz-linear-gradient(top,  #EEBBBB 0%, #FFBBBB 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFBBBB), color-stop(100%,#EEBBBB));
background: -webkit-linear-gradient(top,  #FFBBBB 0%,#EEBBBB 100%);
background: -o-linear-gradient(top,  #FFBBBB 0%,#EEBBBB 100%);
background: -ms-linear-gradient(top,  #FFBBBB 0%,#EEBBBB 100%);
background: linear-gradient(to bottom,  #FFBBBB 0%,#EEBBBB 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFBBBB', endColorstr='#EEBBBB',GradientType=0 ); }

.swing::-webkit-scrollbar-thumb { background: #FFBBBB;
background: -moz-linear-gradient(top,  #FFBBBB 0%, #EEBBBB 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFBBBB), color-stop(100%,#EEBBBB));
background: -webkit-linear-gradient(top,  #FFBBBB 0%,#EEBBBB 100%);
background: -o-linear-gradient(top,  #FFBBBB 0%,#EEBBBB 100%);
background: -ms-linear-gradient(top,  #FFBBBB 0%,#EEBBBB 100%);
background: linear-gradient(to bottom,  #FFBBBB 0%,#EEBBBB 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFBBBB', endColorstr='#EEBBBB',GradientType=0 ); }
</style><center><div class="strawberryswing"><div class="ssline"></div><div class="ssimg">

<img src="http://placehold.it/100x100" />

</div><div class="sstext">

strawberry swing.

</div><div class="ssnotes">

notes go here!

</div><div class="strawberry"><div class="swing">

post goes here

</div></div></div><a href="http://shine.b1.jcink.com/index.php?showuser=55"><div style="text-align: center; font: 10px/11px calibri; text-transform: uppercase; letter-spacing: 2px; margin-top: 5px;;">&copy; avey</div></a>
</center>

7. rózsaszín hátterű, zöldes keretű
Üdv!

Ide í­rhatsz be szöveget, csatolhatsz képet. Linket is bátran tehetsz bele.
A kódot alkalmas előszőr bejegyzésben kedvetekre alakí­tani, s az után kirakni a modulsávba illeszteni! 


Kód:
<br />
<center>
<div style="-moz-border-radius: 60px; background-image: url(ITT CSATOLHATOD A KÉPED URL-JÉT!); border-radius: 60px; padding-bottom: 70px; padding-top: 70px; width: 300px;">
<div style="background-color: #EEBBBB; border: 7px solid #AADDBB; padding: 10px;">
<div style="color: #AADDBB; font-family: lobster two; font-size: 40px; margin-bottom: 5px; margin-top: 4px; position: relative; text-align: center; text-shadow: 1px 1px 0px #EEBBBB; z-index: 1;">
Üdv!</div>
<br />
<div style="color: #68228B; font-family: tahoma; font-size: 9px; line-height: 90%; text-align: justify; width: 230px;">
Ide írhatsz be szöveget, csatolhatsz képet. <a href="http://wildcatsblogdesign.blogspot.hu/" target="_blank">Link</a>et is bátran tehetsz bele.<br />
A kódot alkalmas először bejegyzésben kedvetekre alakítani, s az után kirakni a modulsávba!&nbsp;</div>
</div>
</div>
</center>


8. - zöldes keret -


IDE ÍRD A CÍMET

IDE JÖN A TARTALOM

DÁTUM, IDÉZET VAGY ELKÖSZÖNŐ IS LEHET
Kód:

<center>
<div id="kep-helye">
<img src="IDE ILLESZD BE A KÉP URL-JÉT!" style="width: 300px; height: 214px;" /><br />
<div id="cim">
IDE ÍRD A CÍMET</div>
<br />
<div id="tartalom-helye">
IDE JÖN A TARTALOM</div>
<br />
<div id="altartalom">
DÁTUM, IDÉZET, VAGY ELKŐSZÖNŐ IS LEHET</div>
</div>
</center>
<style type="text/css">
#kep-helye {
   width: 300px;
   border: 10px solid #AADDBB;
   padding: 10px 0 0 0;
}
#cim {
   font-family: Times New Roman;
   font-size: 35px;
   color: #000000;
   width: 250px;
   padding-top: 10px;
}
#tartalom-helye {
   font-family: Times New Roman;
   color: #68228B;
   font-size: 14px;
   letter-spacing: 1px;
   line-height: 18px;
   text-align: justify;
   width: 280px;
   height: 200px;
   overflow: auto;
}
#altartalom {
   font-family: Times New Roman;
   font-size: 13px;
   color: #00217A;
   font-style: italic;
   text-align: center;
   border-top: 5px solid black;
   line-xolor: #51082A;
   padding: 5px;
   width: 280px;
   height: 20px;
}
</style>

9.
MODULOD, DOBOZOD CĂ­ME
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg

Kód:
<center>
<div id="modulcim">
Modulod, dobozod címe
</div>
<div id="tartalom-kerete">
<div id="tartalmi-resz">Szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg Szöveg szöveg szöveg szöveg szöveg Szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg Szöveg szöveg szöveg szöveg szöveg Szöveg szöveg szöveg szöveg szöveg szöveg Szöveg szöveg szöveg szöveg szöveg szöveg Szöveg szöveg szöveg szöveg szöveg szöveg szöveg Szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg Szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg  szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg 

</div></div>
</center>
<style type="text/css">
#modulcim {
   font-family: Times New Roman;
   color: #AADDBB;
   font-size: 20px;
   margin-bottom: 5px;
   text-transform: uppercase;
   width: 440px;
}
#tartalom-kerete {
   background-color: #AADDBB;
   border-bottom: 30px solid;
   border-image: url(/images/scripts/szovegdobozok/017/001.jpg) 10% repeat !important;
   padding: 20px;
   width: 400px;
}
#tartalmi-resz {
   font-family: Times New Roman;
   color: #FFBBBB;
   font-size: 14px;
   text-align: justify;
   line-height: 18px;
   background-color: #68228B;
   padding: 10px;
   border: 3px double #EEBBBB;
}
</style> 

10. - fekete kerettel - 
CíM
ALCíM, Dátum, vagy akármi
IDE JÖN A TARTALOM.

Kód:
<center><div id="border-1">
<div id="border-2">
CÍM</div>
<div id="mini-text">
ALCÍM, DÁTUM, VAGY AKÁRMI</div>
<div id="text-box">
IDE JÖN A TARTALOM.</div>
</div>
</center>
<style type="text/css">
#border-1 {
   background: #AADDBB;
   border-image: url(/images/scripts/szovegdobozok/018/001.gif) 5% repeat !important;
   border: 16px solid;
   padding: 10px;
   width: 350px;
}
#border-2 {
   font-family: Trebuchet MS;
   font-size: 32px;
   text-transform: uppercase;
   letter-spacing: -1px;
   line-height: 100%;
   background: #AADDBB;
   color: #68228B;
   border-bottom: 10px solid #FFBBBB;
   padding: 12px 2px 12px 2px;
   width: 346px;
}
#mini-text {
   font-family: Trebuchet MS;
   font-size: 7px;
   text-transform: uppercase;
   letter-spacing: 4px;
   line-height: 100%;
   background: #AADDBB;
   color: #ffffff;
   top: -42px;
   margin-bottom: -6px;
   padding: 1px 0px 1px 0px;
   width: 346px;
   position: relative;
   z-index: 3;
}
#text-box {
   font-family: Trebuchet MS;
   font-size: 12px;
   text-align: justify;
   line-height: 17px;
   background: #ffffff;
   color: #EEBBBB;
   padding: 10px;
   width: 330px;
}
</style>



By,
Roven ß. 


Bepötyögte: dátum:

Nincsenek megjegyzések:

Megjegyzés küldése

Feliratkozás: Megjegyzések küldése (Atom)