CSS Grids

Vad är en CSS Grid-layout?

Det finns väl ingen idag som inte har använt ett rutat A-4papper i skolan. Vid subtraktion (minus) ställs talet upp från vänster till höger (radvis), ruta för ruta och rad för rad. Men när vi räknar ut talet gör vi det uppifrån och ned (kolumnvis). En grid är alltså en yta som har delats in till ett rutnät där ett antal linjer korsar ytan såväl horisontellt som vertikalt. Utrymmet mellan linjerna där de korsar varandra är en ruta. Rutorna ligger horisontellt (rader) eller vertikalt (kolumner). Flera rutor på en rad utgör ett område. Fortsätt ”CSS Grids”

Om CSS Grid från WordCamp 17 juni 2017

Vad är CSS Grid? Hur använder man det? Vilka fördelar får vi med CSS Grid? Morten Rand-Hendriksen höll ett föredrag om CSS Grid på WordCamp i Paris den 17/6-2017.

“CSS Grid stöds nu av alla större webbläsare och allt vi vet om webbdesign kommer att förändras! Tänk dig att du kan rita ett rutnät i webbläsaren och placera innehåll i ett eller ett antal celler utan att behöva ändra HTML- eller källordningen. Föreställ dig sedan att du kan ändra det rutnätet med hjälp av media queries eller JavaScript, samtidigt som din HTML är ren och tillgänglig. Det är vad CSS Grid gör, och det är därför du borde använda det idag. Fortsätt ”Om CSS Grid från WordCamp 17 juni 2017”

CSS4-selektorer

När, eller mer om, CSS4 kommer så är det en del nya selektorer som vi får bekanta oss med. Vissa används delvis som CSS3. Med CSS4 får de fler och logiska funktioner. Vissa menar att CSS4 bara är CSS 3.2. Vad tycker du? Fortsätt ”CSS4-selektorer”

Text-shadow – mer än att bara skugga texten med

Sedan CSS3 slog igenom med buller och bång använder många egenskapen text-shadow för att lägga en snygg skugga på texten, men det man inte tänker på är att text-shadow också ett ypperligt redskap för att snygga till pixliga typsnitt med. När vi kommer upp på rubriknivå blir inte alltid typsnittet så snyggt. Jag ser ofta rubriker där typsnittet är gråsvart och bakgrunden vit. Fonten spretar, inte sällan om den är kursiv, och ibland är den så pixlig att det knappt går att urskilja bokstäverna. Har ni inte också sett det? Fortsätt ”Text-shadow – mer än att bara skugga texten med”

CSS3 text shadow på IE och fonter

Med CSS3 så öppnar sig en helt ny arena med visuella effekter. Tyvärr så har äldre Internet Explorer 5.5 – 7 inte samma stöd för CSS3 men jag tänker i alla fall tipsa om hur man snyggast och enklast kan skapa CSS3 text shadow på IE. Genom att använda IE:s eget filter kan vi få samma, om än liknande, effekt som text shadow på fonten, men det fungerar bara på IE8. IE 10 och senare har stöd för CSS3. Fortsätt ”CSS3 text shadow på IE och fonter”

Att validera CSS 3

Låt webben blomstra – använd CSS 3

Uppdaterat 2013-12-19


Idag är CSS3 standardvalet för The W3C Validator – CSS 3. Använder du CSS nivå 2.1 ska du klicka på länken fler val och i rullgardinslistan för Profil göra ditt val. Jag rekommenderar dock validatorn W3 Unicorn som validerar både din HTML som CSS på en och samma gång, och den känner automatiskt av vilken profil du använder.

CSS 3 – del 4 – Borders

Att använda borders är ett lätt sätt att förhöja valda delar på sin hemsida. Med CSS3 kan man verkligen skapa många finesser! Vad sägs om rundade hörn, gradient borders och border-images? Ja ni läste faktiskt rätt, det går att använda bilder till sin border. De som för länge sedan kanske använde nästlade tabell-layouter minns säkert att man åtminstone använde 2 eller rent av 3 tabeller förutom själva content i syfte att skapa borders med bilder. Nu fixar CSS3 den saken! Fortsätt ”CSS 3 – del 4 – Borders”

CSS 3 – del 3 – Bakgrunder

Med CSS3 medges större kontroll över egenskaperna för background vilket innebär att det öppnas nya möjligheter att designa sin sida. CSS3 tillåter nämligen multipla bakgrundsbilder på ett element. Det spelar ingen roll om det handlar om ett block, box, eller en paragraf så länge man kan lägga till en bakgrund till selektorn (html-elementet). Fortsätt ”CSS 3 – del 3 – Bakgrunder”

CSS 3 – del 2 – Texteffekter

Text shadow

Det huvudsakliga målet för denna egenskap var att ge designers och css-kodare ett redskap för att kunna göra texteffekter, vilket tidigare bara kunde bli möjligt genom att man renderade texten som en bild, med alla sideffekter detta gav. Texter som renderar likt bilder är inte sökbara och är av den anledningen väldigt svåra för sökmotorerna att indexera. Fortsätt ”CSS 3 – del 2 – Texteffekter”