Responsiv webdesign – definere media queries i CSS3

Responsiv webdesign med HTML5 og CSS3. Logo.
image-551
Jeg har tidligere skrevet om media typer i CSS for å for eksempel kunne skille mellom layout/formatering på skjerm og utskrift. I CSS3 har vi imidlertid fått et nytt valg som gjør det enda enklere å tilpasse en side, ikke til media-typer, men til skjermoppløsning og portrett/landskapsmodus m.m. Dette kalles Media Queries og er nøkkelen til responsiv webdesign (klikk her for en oversikt over våre kurs innen HTML5, CSS3 og responsiv webdesign).

Med media queries har vi mulighet til å lage CSS som retter seg inn mot f.eks en minimum eller maksimum skjermoppløsning. På denne måten kan vi spesifikt gjøre endringer på CSS avhengig av skjermoppløsningen. Det er altså media queries som er selve nøkkelen til responsiv webdesign.

Hvordan definere media queries, nøkkelen til responsiv webdesign?

Fortsett å lese Responsiv webdesign – definere media queries i CSS3

Kurs i Adobe CC 2015

Adobe CC 2015
image-3220
Er du på jakt etter å lære deg noen av Adobe-programmene? Før ferien lanserte Adobe CC 2015. Dette innebærer nye og oppdaterte versjoner av alle de populære programmene i Creative Cloud: InDesign, Photoshop, Illustrator, Dreamweaver, Edge Animate, Flash, After Effects, Premiere Pro m.m.

Som Norges største Adobe-sertifiserte kurssenter tilbyr vi i høst kurs i alle disse programmene i oppdaterte versjoner. Du finner et bredt kurstilbud med alt fra nybegynner kurs til videregående kurs i alle programmene. Kursene holdes med våre Adobe-sertifiserte instruktører. Fortsett å lese Kurs i Adobe CC 2015

Responsive bilder med picture i HTML5

På en responsiv nettside i dag er det utfordringer knyttet til bilder hva gjelder størrelse. Et bilde som skal vises i stor versjon på desktop passer ikke nødvendigvis like godt på mobil, og det er utfordringer knyttet til filstørrelse. Den mest vanlige løsningen på en responsiv nettside i dag er å skalere bilder i prosent:

Fortsett å lese Responsive bilder med picture i HTML5

Hva er CSS object-fit og hvordan bruke det?

object-fit: cover, eksempel.
image-2788
Jeg har tidligere skrevet om bruk av background-size: cover for å lage et heldekkende skalerbart bakgrunnsbilde på en nettside (spørsmålet kom opp på vårt kurs i HTML5 og CSS3).

object-fit: cover fungerer på tilsvarende måte, men brukes for å formatere bilder og video, og bestemme hvordan et bilde eller en video skal skaleres/plasseres innenfor et avgrenset område.

Fortsett å lese Hva er CSS object-fit og hvordan bruke det?