HTML5 CSS reset!

juni 8, 2012 § Lämna en kommentar

Jag har hittat ett en bra css reset.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video

{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

{ display: block; } body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ”; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

CSS3 selector :not – En enkel slidedown

juni 7, 2012 § Lämna en kommentar

CSS3 har en ny selector som används för att välja ut det som inte är aktivt på sidan t.ex: a:not(dennaClass) <—- Det används för att välja ut alla anchors som inte har classen dennaClass. För att göra en enkel dropdown med den här stilen:

HTML (index.html):

<!DOCTYPE html>
<head>
<title>For fun</title>
<link rel=”stylesheet” type=”text/css” media=”all” href=”stil.css”>
</head>
<body>
<dl>
<dt><a href=”#Section1″>definition term 1</a></dt>
<dd id=”Section1″><p>definition data 1</p></dd>
<dt><a href=”#Section2″>definition term 2</a></dt>
<dd id=”Section2″><p>definition term 2</p></dd>
</dl>
</body>

CSS (stil.css):

dl{padding: 10px; width:20%;}
dl dt{-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #cccccc;}
dl dt a {color: #777; padding: 10px; display: block;}
dl dd{color: #cccccc;margin: 0; overflow: hidden; -webkit-transition: height 1s ease; -moz-transition: height 1s ease; -o-transition: height 1s ease;}
dl dd p{padding: 10px; margin: 0;}
dl dd:not(:target) {height: 0; }
dl dd:target {height: 2.667em; }

CSS för Internet explorer (IE)

juni 6, 2012 § Lämna en kommentar

I skrivande stund så använder 18% av alla användare Internet explorer (källa: w3schools). Med CSS3 och HTML5 så skapar det lite svårigheter för webbdesigners. Här kommer det vanligaste och enklaste tipsen:

  • Modernizr – har varit ett vanligt sätt att få HTML5 kompatibilitet med IE.
  • Google har släppt html5 shiv som gör samma sak med mindre kod. Du hittar det här: HTML5 shiv
  • För att det ska gälla i Internet explorer som är äldre än version 9 skriv: <!–[if lt IE 9]&gt;–>
  • För att ha en specifik CSS fil för alla internet explorer: <!–[if IE]–>
  • Genom att byta ut raden: <!–[if lt IE 9]–> så kan vi påverka vilka webbläsare (IE versioner) som avläser den raden.
  • <!–[if gte IE 6]–> Versioner som är IE 6.0 eller större
  • <!–[if lt IE 9]–> Versioner som är IE 8 eller mindre
  • <!–[if IE 9]–> Byt ut 9 till den version du vill ska gälla

Responsive design en snabb resumé/förklaring

juni 6, 2012 § Lämna en kommentar

Responsive design är ett relativt nytt uttryck. Det innebär att skapa en design som är tillgänglig för alla skärm-upplösningar och alla ”devices” (t.ex tabloids och smartphones). Det viktigaste att tänka på är:

  • Använd ”em” istället för ”px” för all text på hemsidan
  • Definera width, padding och margin med %
  • För att dina bilder ska anpassa sig efter skärmen skriv:
    img {
    max-width: 50%;
    height: auto;}
  • Använd CSS3 media queries för att anpassa hemsidan till tabloids och smartphones. Exempel:
    @media screen and (max-width: 980px) {// skriv allt som du vill ska gälla mellan upplösningen 980px ner till 700px}
    @media screen and (max-width: 700px) {// skriv allt som du vill ska gälla mellan 700px ner till 480px}
    @media screen and (max-width: 480px) {// skriv allt som du vill ska gälla mellan 480px och neråt}
    Tänk på att media ärver all css som du definerade i den tidigare upplösningen.

Fortsätt designa!

text-shadow är ingen CSS3 specifikation.

april 30, 2012 § Lämna en kommentar

Det är en relativt ny funktion men den kom inte med CSS3. Safari var först med att införa den. För att enkelt kunna skapa en text skugga (som tidigare gjordes med hjälp av photoshop) så kan ni skriva:
text-shadow: 3px 4px 5px #ccc;
Det första värdet ”3px” definerar hur långt till höger skuggan ska gå. Om du vill att texten ska gå till vänster så kan du fylla i ett minus värde t.ex: ”-3px”.
”4px” definerar hur långt nere skuggan ska vara i förhållande till texten. Den accepterar ett minus värde.
Det sista pixel värdet ‘5px’ definerar hur mycket ‘blur’ textskuggan ska ha.
Det absolut sista innehåller en hexkod där det skrivs vilken färg skuggan ska ha.

Ändra bakgrund på markerad text

april 30, 2012 § Lämna en kommentar

Med hjälp av CSS är det mycket enkelt att ändra bakgrund med CSS. Det enda du behöver skriva är:
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

Hur > (greater than sign) fungerar. Aka Child selector

april 27, 2012 § Lämna en kommentar

I det här inlägget vill jag förklara för alla hur > (greater than sign) fungerar i CSS.
T.ex: div > em
Betyder att alla ‘em’ som är en direkt child av ‘div’ ska markeras. Om vi tänker oss att det hade sett ut såhär:div em I det fallet så hade alla em efter div blivit utpekade. Även om ‘em’ hade haft sin position mellan p taggar.
Här finns en förklarande bild:
greater than sign tree
Det som ska tilläggas är att det finns stöd i alla webbläsare från och med Internet explorer 7 och uppåt.

Var befinner jag mig?

Du bläddrar för närvarande i kategorin CSSTobiasboman's Blog.

%d bloggare gillar detta: