YARADESIGN' ♥ -

Designtutorial # 3

videon är gammal, så det är min förra blogg på videon.

Koden:
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

Hope u like it :)

2011-01-09 @ 01:22:58 Permalink Designtutorial Kommentarer (4) Trackbacks ()

Designtutorial # 2

ljudet kommer efter bilden, förlåt!

Koden:

<LINK REL="SHORTCUT ICON"

HREF="https://cdn1.cdnme.se/cdn/6-1/2403657/images/2011/min_125032799.jpg">

<LINK REL="SHORTCUT ICON"

HREF="http://bildadressenhär">

En blogg med ikoner:
http://sannasrum.blogg.se/pixels/

Hoppas ni gillar guiden!

ps. tävlingen där jag lottar ut en fin lila design avslutas om några dagar, så passa på att delta.

tävlingen hittar ni längre ner på bloggen!

2011-01-02 @ 21:47:57 Permalink Designtutorial Kommentarer (2) Trackbacks ()

Designtutorial # 1

ljudet kommer lite efter, förlåt

Första koden:

#navbar {

margin: 0;

padding: 0;

height: 1em; }

#navbar li {

list-style: none;

float: left; } /* Ändra till right om du vill ha menyn till höger istället*/

#navbar li a {

display: block;

padding: 3px 8px;

background-color: #cccccc; /*Ändra färgen på menyflikarna här*/

color: #fff; /*Ändra färgen på texten här*/

text-decoration: none;

font-family: verdana; /*Ändra typsnittet här*/

font-size: 10px; } /*Ändra storleken på texten här*/

#navbar li ul {

display: none;

width: 10em; /* Ändra bredden på undermenyn här */

background-color: #69f;}

#navbar li:hover ul, #navbar li.hover ul {

display: block;

position: absolute;

margin: 0;

padding: 0;

z-index: 1; }

#navbar li:hover li, #navbar li.hover li {

float: none; }

#navbar li:hover li a, #navbar li.hover li a {

background-color: #cccccc; /*Ändra färgen på undermenyn*/

border-bottom: 1px solid #fff;

color: #ffffff; } /*ändra textfärgen på undermenyn här*/

#navbar li li a:hover {

background-color: #000000; } /*Ändra färgen när man håller musen över undermenyn*/

#navbar {
    margin: 0;
    padding: 0;
    height: 1em; }
#navbar li {
    list-style: none;
    float: left; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
    display: block;
    padding: 3px 8px;
    background-color: #cccccc; /*Ändra färgen på menyflikarna här*/
    color: #fff; /*Ändra färgen på texten här*/
    text-decoration: none;
        font-family: verdana; /*Ändra typsnittet här*/
        font-size: 10px; } /*Ändra storleken på texten här*/
#navbar li ul {
    display: none;
    width: 10em; /* Ändra bredden på undermenyn här */
    background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
        z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
    float: none; }
#navbar li:hover li a, #navbar li.hover li a {
    background-color: #cccccc; /*Ändra färgen på undermenyn*/
    border-bottom: 1px solid #fff;
    color: #ffffff; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
    background-color: #000000; } /*Ändra färgen när man håller musen över undermenyn*/

Andra koden:

<ul id="navbar">
<li><a href="#">Startsida</a></li>
  <li><a href="#">Kategorier</a>
    <ul>
      <li><a href="#">Länk 1</a></li>
      <li><a href="#">Länk 2</a></li>
      <li><a href="#">Länk 3</a></li>
    </ul>
</li>
<li><a href="#">Senaste inläggen</a>
   <ul>
       <tag:recentlist limit="10">
         <li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
       </tag:recentlist>
   </ul>
</li>
<li><a href="#">Arkiv</a>
   <ul>
      <li><a href="#">Länk 6</a></li>
      <li><a href="#">Länk 7</a></li>
      <li><a href="#">Länk 8</a></li>
      <li><a href="#">Länk 9</a></li>
   </ul>
</li>
</ul>

Hoppas ni gillar guiden!

2010-12-31 @ 16:23:54 Permalink Designtutorial Kommentarer (5) Trackbacks ()