Jag är lite av en typsnittsknarkare. Jag är ständigt på jakt efter nya fonter för framtida projekt. I min fontarsenal har jag många köpta fonter, men det är inte alltid man har budget eller kan motivera sig att köpa 20-30 fonter (då en font ligger på runt 300-800 kr st) på måfå. Då kan man kika igenom webbsajterna som har gratis fonter. Licensvillkoren kan variera, så det kan vara en bra sak att titta på först.

Först brukar jag gå in på klassikerna Dafont.com eller Urbanfonts där finns det ett stort utbud gratis fonter. Det finns givetvis också mycket skräp, men det gör det hos de komersiella typsnittsbolagen också. Sedan går jag in på Lost Type och ser om det har kommit något nytt. Lost Type är en underbar webbplats med retrodoftande fonter. Priset sätter man själv (ja, man kan ”betala” 0$ om man vill).

Jag brukar också göra en sökning på t.ex. Behance.net efter ”free font”, och ofta så dyker det upp en del trevligt som man inte hittar någon annanstans. Det kan också vara värt att gå in på sajter som Smashing Magazine och titta efter gratis fonter.

Sammanställning

Dafont.com
Urbanfonts
Lost type
Behance.net
Smashing Magazine

Deluxive State AB | Creative Services Stockholm - Fullservice byrå i Stockholm

Denna lilla ”snippet” kommer från början från http://markdotto.com/playground/3d-text/ som visar hur man gör 3D-text med hjälp av text-shadow attributet. När jag satt och arbetade med vår webbshop som släpps i februari så ville jag göra något extra med produktbilderna. Först så var det en klassisk vit ram och en subtil box-shadow, vilket såg bra ut. Men rastlös som man är ville jag göra något mer av det hela.

Jag tog värdena från 3D-texten och applicerade dem på bilderna med box-shadow attributet istället för text-shadow. Modifierade det lite tills det blev en upphöjd effekt. Eftersom jag åt pizza denna dag (äter pizza väldigt sällan bör påpekas), så fick det mig att tänka på att effekten påminde lite om just en pizzakartong. Så jag kallar effekten för ”Pizza Box CSS”

Med det som grund kan man också göra en del roliga ”hover” effekter, t.ex. att kartongen/ramen öppnas, eller sjunker ner. Bara att leka på!

Kompatibilitet: Safari, Chrome, Firefox, Opera, IE10DEV (men inte IE9).

Exempel 1

Exempel 2

CSS

Exempel 1:

box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.25), 0 3px 1px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.15); -webkit-box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.25), 0 3px 1px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.15); -moz-box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.25), 0 3px 1px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.15);

Exempel 2:

 box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); -webkit-box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); -moz-box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Credits: http://www.markdotto.com/

Deluxive State AB | Creative Services Stockholm - Fullservice byrå i Stockholm

Deluxive Autumn Wallpaper

Version: 1.0
Year/år: 2012
Graphic Designer: Christopher Anderton – Deluxive State
Donation Link / Donationslänk: http://bit.ly/zAiXCP (Paypal)
Resolutions / Upplösningar: 2560×1600, 1920×1200, 1920×1080, 1440×900, 1280×800, iPhone 4, iPhone, iPad

Deluxive State AB | Creative Services Stockholm - Fullservice byrå i Stockholm

Very Simple E-Commerce Card Icons

What? 56 E-Commerce related card icons and ”Make your own” templates (PSD & PNG)
Vad? 56 st e-handels relaterade ikoner samt ”Gör en egen”-mallar (PSD och PNG)

Deluxive State AB | Creative Services Stockholm - Fullservice byrå i Stockholm

Deluxive Winter Patterns

What? Winter themed pattern pack with Photsohop .pat files and image packs.
Vad? Mönster med vintertema. Med .pat fil för Photoshop och bildfiler.

Deluxive State AB | Creative Services Stockholm - Fullservice byrå i Stockholm

Deluxive State AB | Creative Services Stockholm - Fullservice byrå i Stockholm

Deluxive PSD Error Pages

What? 5 Editable Photoshop templates in 5 colours.
Vad? 5 redigerbara Photoshop-mallar i 5 olika färger.

Screenshots/Skärmdumpar

Deluxive State AB | Creative Services Stockholm - Fullservice byrå i Stockholm

Vad: Del av installationen Guten Touch för redbullmusicacademy.com
Koncept, Design och kod: multitouch-barcelona.com

Deluxive State AB | Creative Services Stockholm - Fullservice byrå i Stockholm

För ett tag sedan så satt jag och arbetade med en egenhostad WordPress-blogg. Allt fungerade bra, och vi sjösatte det hela utan några problem. Vi har en checklista med punkter som gås igenom när vi levererar en sajt. Allt för att säkerställa att det fungerar bra. En av punkterna är att kontrollera att kontaktformulär (om det finns ett sådant) fungerar som väntat. I detta fall så fungerade allt som väntat.

Det jag däremot inte kollade upp var att mejlet från kontaktformuläret hade kommit fram. Innan och efter leverans så testar vi genom att ange ett testkonto som mottagare för kontaktformuläret. Mejlet kom fram, och det var inga konstigheter med det.

Efter två veckor så kontaktade kunden oss och var lite konfunderad. Han beskrev att folk hade använt kontaktformuläret vid ett flertal gånger, men det hade inte kommit fram något till honom. Jag gick in och kollade vad som kunde vara fel. Det var inte webbhotellet (Binero) som krånglade och inte heller kontaktformuläret (Gravity Forms).

Googlade lite och hittade mest referenser där folk hade problem med en närmast antik version av WordPress (själv har jag arbetat med WordPress sedan det hette b2 cafelog). Till slut efter ha slitit mig i håret så hittade jag en forumtråd där någon hade samma problem. I den tråden framgick det efter ett par sidor att problemet handlade om att mottagarmejlen var en Gmail-adress. Eftersom man måste logga in på Googles SMTP server för att kunna skicka mejl så var det inte undra på att det inte gick.

Vår kund hade också flyttat över sin mejl till Google Apps (vilket vi också använder) dagen efter vi hade installerat allt. Lösningen på problemet var enkelt. Jag installerade WordPress-tillägget ”Configure SMTP” som i princip sköter allt själv. Det man behöver göra är att autentisera sig mot Gmail med sin epostadress och lösenord (se skärmdump). Man kan skicka iväg ett testmejl för att se att det fungerar.

Läxa lärd, och konstigt nog så hade jag aldrig råkat på detta innan. Givetvis lite pinsamt för oss. Nu så har fler och fler lagt över sin mejlhantering på Google Apps och Gmail, så nu är ”Configure SMTP” något som vi i de flesta fall installerar som standard.

Deluxive State AB | Creative Services Stockholm - Fullservice byrå i Stockholm

Lite rörlig infografik om hur galna vi är i Facebook. Lite matnyttig (eller inte) info till kaffet.

Motion designer: Alex Trimpe
Musik: RJD2
Datakälla: onlineschools.org/blog/facebook-obsession
Program: Adobe After Effects

Deluxive State AB | Creative Services Stockholm - Fullservice byrå i Stockholm