Lucy Design : Nyári Design Bejegyzés

Salut les gens! (ez azt jelenti, hogy sziasztok emberek, csak gondoltam jópofa lenne franciául köszönni. És igen, mindenki megnyugodhat, szedem a pszichés gyógyszereimet! :D)

Nagyon sajnálom, hogy már majdnem két hete nem jelentkeztem. Kereshetnék kifogásokat, de nincs nagyon értelme, egyszerűen azért tűntem el, mert elkezdtem egy történetet, és még a szüleim sem tudtak felvakarni a gép elől. Bezzeg mások témazárókat írtak, én meg a gép előtt punnyadtam. No mindegy. Szóval akkor:

Nyár van!!! De gondolom erre mindenki rájött. So...gondoltam hozok nektek egy kis bejegyzést png-kel, elvihető fejlécekkel és még sok minden mással. Ha bármit visztek, kérlek írjátok meg hozzászólásba! Akkor nem is nagyon hadoválnék tovább, kezdjük is!

Png-k:

(nem sajátok, minden jog a készítőé)

Inspiráló képek:

Gif-ek:

Kódok:

(nem sajátok, minden jog a készítőé)

Menü kód #1:

<ul>
<li><a href="IDE ÍRD BE A LINKET" tabindex="1">IDE PEDIG A CÍMÉT</a></li>
<li><a href="IDE ÍRD BE A LINKET" tabindex="2">IDE PEDIG A CÍMÉT</a></li>
<li><a href="IDE ÍRD BE A LINKET" tabindex="3">IDE PEDIG A CÍMÉT</a></li>
<li><a href="IDE ÍRD BE A LINKET" tabindex="4">IDE PEDIG A CÍMÉT</a></li>
<li><a href="IDE ÍRD BE A LINKET" tabindex="5">IDE PEDIG A CÍMÉT</a></li>
<li><a href="IDE ÍRD BE A LINKET" tabindex="6">IDE PEDIG A CÍMÉT</a></li>
</ul>
</div>
<style type="text/css">

#vertmenu { /* a menü szélessége, betűtípusa, stb */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    width: 200px;
    padding: 0px;
    margin: 0px;
}

#vertmenu h1 { /* a menü link címe, háttere, stb */
    display: block;
    background-color: #A0CFEC;
    font-size: 11px;
    padding: 3px 0 5px 3px;
    border: 0px solid #000000;
    color: #5CB3FF;
    margin: 0px;
    width: 161px;
    text-align: center;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a { /* a link színe, stílusa, stb */
font-size: 80%;
display: block;
border-bottom: 1px dashed #BDEDFF;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #38ACEC;
width:160px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus { /* ha ráviszed az egeret a linkre */
color: #000000;
background-color: #eeeeee;
}

</style>">

Menü kód #2:

<a href="LINK" target="_top" class="link2">CÍM</a> (ezt a részt annyiszor másold be, ahány menüt szeretnél)

</td>
        </tr>
</tbody>
</table>
<p>
<style type="text/css">
a.link2 {
   background-color: háttér színkódja;
   border-bottom: 0px dotted #7E7E7E;
   letter-spacing: 1px;
   color: betű színkódja;
   width:190px;
   height:12px;
   text-decoration: none;
   cursor:crosshair;
   font-weight:normal;
   font-size: 9px;
   text-align:left;
   padding: 3px;
   margin:2px;
   display:block;}

a.link2:hover {
   background-color: kijelölésnél a háttér színkódja;
   letter-spacing: 3px;
   color: kijelölésnél a betű színkódja;
   width:190px;
   height:12px;
   font-size: 9px;
   font-weight:normal;
   text-decoration: none;
   cursor:crosshair;
   text-align:right;
   margin:2px;
   padding: 3px;
   display:block;}
-->
</style>
</p>
</div>
">

Menü kód #3:

<a href="LINK1">CÍM1</a> /*ezt annyiszor másold be, ahány menüpontot szeretnél*/
</div>
<style type="text/css">
#cssmenu a  {
   font-family: Tahoma; /* betűtípus */
   display: block;
   clear: both;
   width: 200px; /* menü szélessége */
   font-size: 12px; /* betű mérete */
   line-height: 30px;
   padding: 0 10px 0 20px;
   color: #F43989; /* betű színe */
   text-decoration: none;
   margin: 0.5em;
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1270481519_06.gif); /* menü háttere - nem fontos beraknod képet*/
   -moz-box-shadow: 2px 2px 2px #B1B1B1; /* doboz árnyéka */
   -webkit-box-shadow: 2px 2px 2px #B1B1B1; /* doboz árnyéka */
   box-shadow: 2px 2px 2px #B1B1B1; /* keret árnyéka */
   -moz-border-radius: 0 9px 0 9px;
   -webkit-border-radius: 0 9px 0 9px;
   border-radius: 0 9px 0 9px;
   text-shadow: 1px 1px 1px #B1B1B1; /* szöveg árnyéka */
}
#cssmenu a:hover { /* betű színe, ha ráviszed az egeret */
   color: #000000;}
#cssmenu.noscript a:hover { /* háttér, ha ráviszed az egeret - nem fontos beraknod képet*/
   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1261824073_45.gif);} </style>
</center>
">

Menü kód #4:

<table width="100%">
    <tbody>
<tr>
            <td align="center" class="tartalom">
<a href="LINK1" target="_top" class="link2">CÍM1</a> 
/*ezt annyiszor másold be, ahány menüpontot szeretnél*/
  </td>
   </tr>
</tbody>
</table>
<p>
<style type="text/css">
a.link2 {
   background-color:#f9efe5; /* háttérszín */ 
    border-bottom: 0px dotted #7E7E7E;
   letter-spacing: 1px;
   color: #79807F; /* betűszín */    
width:190px; /* szélesség */  
height:12px; /* magasság */    
text-decoration: none;
   cursor:crosshair;
   font-weight:normal;
   font-size: 9px; /* betű nagyság */    
text-align:left;
   padding: 3px;
   margin:2px;
   display:block;}

a.link2:hover {
   background-color:#f9efe5; /* háttér, ha ráviszed az egeret */ 
     letter-spacing: 3px;
   color:#A24670; /* betűszín, ha ráviszed az egeret */    
width:190px; /* szélesség, ha ráviszed az egeret */    
height:12px; /* magasság, ha ráviszed az egeret */    
font-size: 9px;
   font-weight:normal;
   text-decoration: none;
   cursor:crosshair;
   text-align:right;
   margin:2px;
   padding: 3px;
   display:block;}
-->
</style>
</div>
">

Kerek szövegdoboz: Idézetes szövegdoboz: Gif-es szövegdoboz:

<img src="http://24.media.tumblr.com/432cce76aa59d78f0eaf1004570cda14/tumblr_mh99utxiAC1rjb0zao1_500.gif" width="350px" />
<br />
<div align="left">
<div class="tslide">
  </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>">

Árnyékos, lekerekített végű szövegdoboz: Szövegdoboz ( ha ráviszed az egeret, megjelenik a szöveg)

<div style="font: 10px/95% arial;" id="skdjhfasdfbr">
<div class="sdjfkh24jkhrv">
 <img src="http://37.media.tumblr.com/abd3e88c01de56a221451966a24408bb/tumblr_n986r2DXMb1qap2x6o8_250.gif" width="180" /> </div>
<div class="iurth54i3ufne">
blah blah.blah blah.blah blah.
blah blah.blah blah.blah blah.
blah blah.blah blah.blah blah.
blah blah.blah blah.blah blah.
blah blah.blah blah.blah blah.
blah blah.blah blah.blah blah.
blah blah.blah blah.blah blah.
blah blah.blah blah.blah blah.
blah blah.blah blah.blah.blah 
blah.blah blah.blah blah.blah 
blah.blah blahblah.blah blah.
blah blah.blah blah.blah blah.
blah blahblah.blah blah.blah 
blah.blah blah.blah blah.blah 
blahblah.blah blah.blah blah.
blah blah.blah blah.blah 
</div>
<div class="djkfhaksf2346">
<hr />
<b>Üdvözöllek a blogomon!</b></div>
</div>
</div>
<a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=5382" style="display: block; font: 6px arial; letter-spacing: 1px; line-height: 90%; text-align: right; text-decoration: none; text-transform: uppercase; width: 180px;"></a></center>
<style type="text/css">
pwnmu { color: #a42626; font-weight: bold; }
#skdjhfasdfbr .djkfhaksf2346 { margin-top: 130px; }
#skdjhfasdfbr { height: 147px; overflow: hidden; position: relative; }
#skdjhfasdfbr .sdjfkh24jkhrv { left: 0px; position: absolute; top: 0px; -ms-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-duration: 1s; }
#skdjhfasdfbr:hover .sdjfkh24jkhrv { left: -250px; -ms-transition-duration: 1s;  -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-duration: 1s; }
#skdjhfasdfbr .iurth54i3ufne { border: 10px solid #FEFEFE; height: 105px; left: 180px; overflow: auto; padding-right: 3px; position: absolute; text-align: justify; top: 0px; width: 230px; -ms-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-duration: 1s; }
#skdjhfasdfbr:hover .iurth54i3ufne { left: 0px; -ms-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-duration: 1s; }
.iurth54i3ufne::-webkit-scrollbar { width: 6px; }
.iurth54i3ufne::-webkit-scrollbar-thumb { background: #a42626; }
</style>
">

Szövegdoboz ( ha ráviszed az egeret, megjelenik a szöveg #2)

.mainie { width: 250x; height: 250px; background-color: #f8f8f8; border: 25px solid #f8f8f8; box-shadow: 0px 0px 2px #ccc; overflow: hidden;
}.mainie1 { width: 250px; height: 250px;

background-image:url(http://placehold.it/250x250);

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

background-image:url(http://placehold.it/150x150);

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: 150px; border: 20px solid #f8f8f8;padding: 5px; height: 140px; background-color: #f8f8f8; opacity: 0;box-shadow: 1px 1px 2px #ccc; text-align: justify; line-height: 125%; overflow: auto;letter-spacing: 1px;font-family: helvetica; font-size: 9px; color: #333;-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: #6C86A2; }.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: #6C86A2; }</style><center>
<div class="mainie">
 <div class="mainie1">
<div class="iconie">
</div>
<div class="boxy1">

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!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!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!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!IDE JÖN A SZÖVEG!

</div>
</div>
</div>
<a href="http://shine.b1.jcink.com/index.php?showuser=7361"><div style="float: right: font-family: helvetica; font-size: 8px; text-transform: uppercase;">
</div>
</a></center>
">

Menü kód #5:

<tbody>
<tr>
<td width="100%">
<a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 1</a></td>
</tr>
<tr>
<td width="100%">
<a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 2</a></td>
</tr>
<tr>
<td width="100%">
<a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 3</a></td>
</tr>
<tr>
<td width="100%">
<a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 4</a></td>
</tr>
</tbody>
</table>
<style type="text/css">
A.menulink {
display: block;
background-color:#BC8F8F;
width: 198px;
text-align: center;
text-decoration: none;
font-family:georgia;
font-size:16px;
color: #ffffff;
BORDER: none;
border: solid 0px #FFFFFF;
-webkit-border-top-left-radius: 80px;
-webkit-border-top-right-radius: 70px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-topright: 70px;
-moz-border-radius-bottomleft: 40px;
border-top-left-radius: 80px;
border-top-right-radius: 70px;
border-bottom-left-radius: 40px;
-webkit-transition-duration: .50s
}
A.menulink:hover {
font-family:georgia;
border: solid 0px #00BFFF;
color: #ffffff;
background-color:#E9967A;
-webkit-border-top-left-radius: 80px;
-webkit-border-top-right-radius: 70px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-topright: 70px;
-moz-border-radius-bottomleft: 40px;
border-top-left-radius: 80px;
border-top-right-radius: 70px;
border-bottom-left-radius: 40px;
-webkit-transition-duration: .50s
} </style>
">

Textúrák: