Gatsby test – Refreshed

This is just a test entry, that I need for Gatsby to fetch.

Hakker dine animation på mobilen? Det kan fikses!

Bruger du jQuery eller andre aldrende JS libraries til at lave dine animationer med, så er der stor sandsynlighed for at de ikke kører særlig godt på alle smartphones. Det kan i de fleste tilfældes godt fikses, men det kræver lidt kendskab til hvordan de forskellige CSS properties opfører sig når de skal animeres, og så kræves der lidt kendskab til browser debugging.

Brug af sprites i CSS

Sprites i CSS er en gammel teknik, faktisk helt tilbage fra CSS 1, men selvom vi i dag har icon-fonts og SVG’er så er der stadig situationer hvor et raster billede (PNG/JPG) måske er den bedste løsning og så er det med at finde denne gamle klassiker frem og holde sine HTTP requests nede på et fornuftigt antal.

Et kig på ripple effekten fra googles material design

Blandt mange af de ting som google præsenterede i forbindelse med deres material design, er den lille, men meget iøjenfaldende, ripple effekt – en dråbe lignende animation, der dukker frem på deres knapper og menuer når man klikker på dem.

Polymer projektet har implementeret den, men du behøver ikke et helt framework for at få den på din hjemmeside. Her er bud på hvordan den kan laves med plain ol’ vanilla Javascript og CSS.

Få mere ud af Sublime Text med f.eks. CSS og Javascript autocompletion.

Af alle de text editors jeg har arbejdet med er min favorit endt med at være Sublime Text. Det er en meget lightweight editor, starter op på et splitsekund, bliver ikke langsom med mange projekter åbne, har en sublim (høhø) søge function, en nifty multiselection, og skift mellem filer er en leg (⌘ + P).

Out-of-the-box er Sublime Text ganske fin, men der er et hav er plugins til editoren der gør den endnu federe. Jeg bruger primært Sublime Text til HTML, CSS og JavaScript, og her er lille liste over de plugins jeg synes gør editoren endnu bedre.

Centrering af elementer

Centrering i CSS, og især lodret/vertikal centrering, er ikke specielt ituitivt, for der findes nemlig ingen center property man lige kan smide på sin firkant ^*. Så hvordan får man centreret en firkant i midten af en anden firkant?

Her er et par eksempler på hvordan man kan centrere sine elementer i forskellige scenarier.
^* Og så løj jeg, der findes faktisk en center property i CSS3, som der også kommer et eksempel på :)

3D Flip effekt med CSS3

Ok, så man har lavet en fin firkant. Hvordan får man den så flippet 180 grader rundt, så man kan se indholdet på bagsiden af den firkant – Ja fordi firkanter på hjemmesider har jo indhold på bagsiden, det ved de fleste bare ikke :)

Spøg til side, vi kigger på hvordan man kan lave en fin lille 3d effekt i CSS.

Lav et CSS juletræ

Nu er det jo Jul, og hvorfor ikke bruge sin sparsomme tid på at lave et CSS juletræ – ok, det er sikkert ikke Jul når du læser det her, så jeg har fjernet julestjernen, så det er i bund og grund bare et grantræ – tag det som det er :)

Hvordan laver du en firkant med CSS?

Her er lige en lille fiks julegodte jeg stødte på da jeg forsøgte at lave en menu bestående af firkanter – eller rettere fluid firkanter!

Fordi hvordan laver man egentlig en fluid firkant? Altså en firkant der skalerer udfra hvilken container den befinder sig i. Og når jeg skriver firkant, så mener jeg egentlig kvadrant.

Lav linned texture i Photoshop og GIMP

Apple har det med at starte trends, og et af dem er det grå/blå sengelinned lignende tekstur, som blandt andet kan ses i IOS på iPhone og iPad, samt på OSX login skærmen. Det bliver brugt i flæng nu på diverse sider, og lad os se på hvordan det kan laves i både Photoshop og GIMP, det er nemlig ret nemt!