Lördagsprojekt: Cynatic WP Gallery – ett enkelt WordPress Galleri plugin

Länge sedan ett lördagsprojekt kördes igång, nu vart det dags igen. Sambo som jobbade, fem öl, lite havssaltad choklad och dåligt utbud på TV ledde till att jag knackade ihop ett snabbt bildgalleri vilket senare utvecklade sig till ett plugin vilket jag tänkte dela med mig av.

Så, varför bygga ännu ett galleritillägg till WordPress när det redan existerar 1000-tals? Jo, ingenting passar mig och 99% har något slags fel och passar inte alls mina behov på avskalad enkelhet. Läs hela inlägget →

Fredagsbild: Fågel i kartong

Tänkte köra ett segment på bloggen varje fredag för att trigga mig och tvinga fram skapande. Fredagsbilden är född! Bilderna kommer handla om allt mellan himmel och jord och allt mellan bildmanipulering till fotograferande. Dagens bild är: Fågel i kartong gjord i Photoshop med en triangel och lite finlir på ett överliggande lager.

Läs hela inlägget →

Box-shadow ger problem med transparenta bilder

På bloggen har jag aktiverat en del CSS3-egenskaper, bland annat box-shadow och text-shadow, vilket ger bra effekter när de används rätt och subtilt.

Idag upptäckte jag något som kommer gäcka och irritera många när CSS3 blir mer allmänt använt. Box-shadow och transparenta bilder går inte ihop.

sok-grafik
Önskad effekt i exemplet ovan är att använda rundade hörn med en subtil skuggning runt. Men eftersom box-shadow enbart sätter skugga runt boxen och inte under så kommer den transparenta bilden tappa i effekt om den används.

Notera att padding är satt på 3px runt bilden i exemplet.

Exempel på hur du använder box-shadow

box-shadow: <horisontal offsett> <vertikal offsett> <blur> <färg>;

För att använda box-shadow redan nu så använd -moz-box-shadow samt -webkit-box-shadow.

Lösningen involverar mer CSS3

Hur man löser problemet är egentligen lika briljant som enkelt. Du använder ett annan CSS3 metod: border-radius.

På bilden i mitt exempel så sätter jag border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; för att följa mitt rundade hörn.

sok-grafik-efter

Kommer följa upp denna bloggpost med mer ingående analys av både box-shadow och border-radius.

Iconfinder.net i ny version

iconfinderv2Tipsade för ett tag sedan om iconfinder.net om en sida man inte kan klara sig utan som webbdesigner. Nu verkar det som att sidan har fått nytt liv och uppdaterats med ny design, massor med nya ikoner (8684 stycken visar mätaren) och ett användarbaserat tagg-system.

Sidan, och uppdateringen, verkar klart bättre och är personligen redan på gång att leta nya ikoner till en del webbprojekt jag har.