lille-web webdesign

CSS

Responsive webdesign med CSS - når webdesignet skal virke i alle browser typer, størrelser og på alle medie platforme.

I dag efterspørger flere og flere webløsninger, der er kompatible med alle former for platforme. Webdesignet skal virke både på kontorets store faldskærme, Ipad's lidt mindre skærm og helt ned til Iphone og de andre smartphones små skærme.

De sidste års trend har været at lave såkaldte mobil-site, som var designet og programmeret til netop små skærme og lille bånd hastighed. Rent praktisk lavede/laver man to næsten identiske hjemmesider. En til de almindelige computere og en til alle de håndholdte. Det store problem med denne løsning er, at vi for fremtiden kun kan forstille os at få flere og flere forskellige medier, som vi går på internetten med.
Skal kunderne så også betale mig for at lave Ipad-hjemmesider, TV-hjemmesider, spille-konsol-hjemmesider og alle fremtidens internet-devices-hjemmesider? Svaret er heldigvis nej.

Responsive webdesign

Det store nye inde for webdesign og CSS er Resposive webdesign, hvor målet er, at lave én løsning der virker på alle platforme og i alle skærmstørrelser. Ideen bag Resonsive webdesign er, at hjemmesiden selv "find ud af" på hvilket medie den nu vises, og samtidig tilpasser sig netop dissse specielle vilkår. Er det en lille smartphone med Androyde eller en stor 40 tommer fladskærm på en Mac computer. Ud over at tilpasse desigent til mediet kan hjemmesiden kodes til at fra- eller til-vælge elementer. Eksempelvis kan man kode hjemmesiden, så reklame-spot og bannere ikke vises på den lille smartphone men kun på den store fladskærm. Her skal nøje gennemtænkes hvilke elementer og informationer, der altid skal vises, for at siden giver mening, og hvilke elementer der kan undværes når skærmstørrelsen er lille og internet hastigheden lav.

CSS3

Hele denne udvælgelse af data og ændring af design kan i dag laves med CSS. Sammenholdt med de mange nye muligheder i CSS3 er det med til at "genopfinde" CSS'en og gøre CSS programmøren til en meget vigtig og central rolle i programmeringen af en hjemmeside - fra design til funktion.

CSS Sandbox

CSS legeplads

Overskuelig opstilling med CSS

  • Her er en lang tekst 50 stk.
  • kort tekst 25 stk.
  • Hvor er det sjovt at lege med CSS YEP

HTML koden

<ul>
<li><span>Her er en lang tekst</span> <b>50 stk.</b></li>
<li><span>kort tekst</span> <b>25 stk.</b></li>
<li><span>Hvor er det sjovt at lege med CSS</span> <b>YEP</b></li>
</ul>

CSS koden

ul {
width: 500px;
margin: 0;
padding: 0;
}

ul li {
border-bottom: 1px dotted #000000;
overflow: hidden;
margin: 0;
padding: 0;
}

ul li span {
background: #ffffff;
margin: 5px 0 0 0;
position: absolute;
padding-right: 4px;
}

ul li b {
width: 100px;
background: #ffffff;
margin: 5px 0 0 400px;
position: absolute;
font-weight: normal;
}
ul li b:before {
content: ":";
padding: 0 4px;
}

  • Chrome
  • FireFox
  • Opera
  • Safari
  • Internet Explorer

Gennemsigtig CSS box med ugennemsigtig tekst

Her er min tekst som ikke ændre opacitet. Baggrunden benytter RGBA

HTML koden

<div class="baggrund"> </div>
<div class="gennemsigtig">Her er min tekst som ikke ændre opacitet. Baggrunden benytter RGBA</div>

CSS koden

div.gennemsigtig {
background: rgba(243, 192, 3, 0.3);
color: #000000;
...
}

Skal det virker i alle versioner af IE, kan denne metode ikke benyttes. Her bruges en transparent PNG fil på 1 x 1 px. som gentager sig selv, og nu er alle browsere med!

  • Chrome
  • FireFox
  • Opera
  • Safari
  • Internet Explorer

Liste med specielt indryk

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

HTML koden

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

CSS koden:

ul li {
list-style-type: none;
border: none;
padding: none;
width: 150px;
height: 20px;
border: 1px solid #cccccc;
margin: 0 0 5px 155px;
padding: 0;
}

ul li:nth-child(3) {
margin: 0 0 5px 0;
float: left;
}

  • Chrome
  • FireFox
  • Opera
  • Safari
  • Internet Explorer