Rundade hörn med CSS – Utan bilder

Mitt Photoshop Action för rundade hörn i Photoshop har kommit till stor användning för mig och många andra. Idag var jag på jakt efter en metod att skapa rundade hörn utan i bilder i CSS. Detta har varit möjligt i FireFox sedan lång tid tillbaks, men på alla forum och bloggar stor det samma sak; ”There is no way to do it in Internet Explorer”.

Efter en stunds letande hittade jag dock sidan curved-corner med ett CSS-skript är helt cross-browser. Det går nu alltså få runda hörn helt utan bilder i FF, Chrome, Safari, IE6, IE7 och IE8!

Tanka hem border-radius-demo.zip och lek med runda hörn!

Fyra gratis ikonpack till din hemsida!

Snygga ikoner är fint att ha till hands när du vill göra din hemsida lite extra gemytlig! Det finns massor av gratis ikonpack på nätet, men de flesta är väldigt nischade och innehåller bara ett fåtal ikoner.

De pack som jag valt ut här är mer generella och innehåller väldigt många ikoner, vilket gör att de lämpar sig som utsmyckning för alla typer av webbplatser.

• Farm-Fresh Web Icons – 1000 ikoner fräscha ”web 2.0″- ikoner
• Fugue Icons – Över 2000 snygga och moderna ikoner
• Famfamfam – Klassiskt och trevligt ikonpack med 1000 ikoner
• LED Icon Set – 500 fina ikoner med behagligt dämpad färgskala

Samtliga ikoner är gratis att använda för privat så väl som kommersiellt bruk, dock brukar skaparen kräva en tillbakalänk.

Jag kan dessutom varmt rekommendera Iconfinder, en riktigt trevlig sökmotor endast för ikoner!

Fler gratis ikoner för webbutveckling hittar du här och här.

Rundade hörn i Photoshop

Att få till snygga rundade hörn i Photoshop kan vara ganska bökigt och onödigt tidskrävande. Därför skapade jag för en tid sedan ett Action som automatiskt fixar runda hörn med en enda knapptryckning.

Instruktioner

1. Ladda hem och installera rounded-corners.atn
2. Skapa ett nytt Photoshop-dokument och ange samma dimensioner som den bild du vill ge rundade hörn.
3. Klistra in bilden som ett nytt lager i dokumentet.
4. Välj sedan den rundning du vill ha från Action-paletten.

Tips!
Genom att välja ”Save for Web & Devices…” och spara bilden som PNG-24 med transparent bakgrund får man en bild med mjuka rundade hörn som kan användas på ljusa så väl som mörka bakgrunder.