Tag Archive for CSS

Multiple backgrounds med CSS3

21-01-2011 CSS, CSS3 No comments

Med CSS3 har du mulighed for at lave det der bliver kaldt “Multiple backgrounds” det er også en mulighed i CSS2 i nogle browser som Firefox, Safarie, Chrome og Oprea men ikke IE8 og ældre.

Det første du gør er at lave 3 billedere med følge info.

Top: multiple-background-top.gif ( 100x10px )
Midt: multiple-background-middle.gif ( 100x1px )
Bund: multiple-background-top.gif ( 100x10px )

bemærk at bund og top billedet ikke må have transaperant i sig, da billedet i midten vil være baggrunden.

Prøv at skriv et div tag hvor i du angiver en class med navnet multiple-backgrounds som dette

1
2
3
4
5

<div class="multiple-backgrounds">
<div class="box-content">
Dit indhold her i boxen.
</div>
</div>

Næst tilføjer du nu dette til din CSS fil.

1
2
3
4
5
6
7
8
9
10
11
12
13

.multiple-backgrounds
{
background: url(multiple-background-top.gif) top left no-repeat,
url(multiple-background-bottom.gif) bottom left no-repeat,
url(multiple-background-middle.gif)  center left;
width: 100px;
min-height: 250px;
}
 
.box-content
{
padding: 15px;
}

Grunden til jeg ligger en padding 15px inden i er fordi at top og bund billederen er hver 10px høj så for ikke at gå i disse top billeder vælger jeg at lave lidt luft og naturligvis også give lidt luft i højer og venstre side.

hvordan du til passe netop din box er nået du selv vælger ;)

Hvis du har evt. kommentar tips/tricks til denne metode høre jeg gerne hvad du har på hjertet.

LESSCSS på OSX

02-09-2009 Apple, Blog, Programering No comments

CSS har tit være en hår kamp at lave hvis man laver kæmpe store filer, det største problem er at man ik kan genbruge sine koder ornligt i CSS som standart.

2 af mine gode venner som også er udvikler bruger LESSCSS til at omgå dette problem, var lidt skeptisk i starten, men som de begge siger “Man skal bruge det før man ser det fede i LESS” så for et pr dage siden tog jeg mig sammen og læse om det, det var ufaligt let at gå til jeg troede det var meget svære, så allerede der gjore det mig opmærksom på at dette måske var remlige fedt.

Jeg gik igang med at skrive mit CSS ind i LESSCSS format som objekter og blev positiv overrasket over hvor let det enligt var at gå til, min LESSCSS fil kan se sådan her ud

[code]
@color: blue;
@hover: green;

body {
margin: 0px;
padding: 0px;
}

a {
color: @color;
:hover{
color: @hover;
}
}
[/code]

det LESS så returnere når jeg kompilere det ved hjælp af min terminal er følge kode.

[code]
body {
margin: 0px;
padding: 0px;
}
a { color: blue; }
a:hover { color: green; }
[/code]

Hvis du syndes det ser fedt ud syndes jeg du skal læse nået mere på LESSCSS’s hjemmeside som du kan
besøge på LESSCSS og se mere på deres koncept.

Page 1 of 11