Nyhetsbrev

Få artiklar, råd och tips om:

Smashing Magazine CSS Grid Challenge

Silver i
Smashing Magazine’s programmeringstävling

av Frida Nyvall

Vi är stolta och glada över att ha kommit på andra plats i en internationell tävling för att skapa en inspirerande och kreativ layout med hjälp av CSS Grid.

Tävlingen anordnades av den branschledande webdesign-, UI/UX- och front-end tidningen Smashing Magazine.

CSS Grid är en relativt ny teknik för att skapa layouts på webben. Den stödjs för närvarande bara av de allra senaste webbrowsers.

Se vårt bidrag här, and läs mer om tävlingen.

Om vårt tävlingsbidrag

Jag skapade framsidan från The Daily Telegraph, en påhittad tidning från J.K Rowlings böcker om Harry Potter. Den här typen av äldre print-orienterade layouts har generellt sett varit utmanande att återskapa digitalt, men CSS Grid erbjuder nya möjligheter. Jag skulle gärna ha ersatt bilderna med videos eller gifs, för att komma ännu närmare hur tidningen beskrivs i böckerna, men använder istället bilder utan copyright regler.

Förutom CSS Grid, använder jag också CSS Shapes för att få texten att följa kanten av en rund bild, och en mindre CSS animation för att få ugglan att flyga ner med logotypen. Jag la till ett externt JS plugin för att få rubrikerna att fylla ut sina rader, samt modernizr.js tillsammans med en tidig version av jquery för att hantera bakåtkompabilitet med äldre versioner av Internet Explorer.

Tags

Fler inlägg

img

Red Onion gästar Boagworld Show - om att gå från idé till app

img

Den mörka sidan av webbdesign - confirmshaming

img

Från idé till app: ta fram projektbeskrivning