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: CSS All-in-one Toolbox

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

Det finns ett projekt i Japan som heter Famicase, där formgivare och konstnärer formger egna Famicom-kassetter (Famicom = den tidigare och japanska versionen av NES) utifrån spel de har hittat på i sina sinnen. Allt visas sedan upp på en årlig utställning som hålls av den japanska spelbutiken Meteor i Tokyo. My Famicase Exhibition som utställningen heter har rönt stor uppmärksam i retrokretsar. En del av dessa bidrag har till och med fått riktiga spel baserat på vad som är på kassetten.

Då endast inbjudna artister i Japan kan skicka in bidrag så tänkte jag ändå att lägga upp lite av mina egna saker här. Som bonus lägger jag med en Adobe Photoshop-mall så ni själva kan skapa Famicom-kassetter samt NES-kassetter (som kanske är mer passande i Sverige). Skicka gärna in dem till christopher@deluxive.se så skall vi se om vi inte kan göra en egen variant på My Famicase Exhibition, först på webben, sedan kanske ha en fysisk utställning på t.ex. Gamex.

1. Ninja Clone Factory för Famicom

Du styr en fabrik som tillverkar ninja-kloner. Ditt uppdrag är att vägleda dessa ninjas under deras första tid. Se till så att de inte ramlar ner för stup och att de äter sin mat. Lär dem kasta kaststjärnor och olika kamparter. Avvärj attacker från den konkurrerande Ninja klonfabriken. Upptäck hemligheten bakom Ninja-klonerna.

2. Fuglesang för Famicom

Ditt namn är Fuglesang, svensk astronaut och hyllad rymdhjälte. Du har fått i uppdrag av NASA att undersöka ett underligt fenomen utanför månen. När du kommer dit så slungas du in i ett maskhål, och blir medvetslös. När du väl vaknar så är du många ljusår från jorden och är samtidigt under attack av vad som ser ut att vara humanoider som liknar Uri Geller. Du måste skjuta dig fram genom fienden och komma på ett sätt att ta dig hem.

3. Fuglesang Space Hero för NES

Ditt namn är Fuglesang, svensk astronaut och hyllad rymdhjälte. Jorden är under attack från humanoider som liknar Uri Geller. Ditt uppdrag som hyllad rymdhjälte är att med ditt skepp ”Assi” avvärja hotet mot jorden.

4. Anne Rice’s Angel Time: The Songs of the Seraphim för Famicom – Special Edition

Ditt namn är Toby O’Dare, en yrkesmördare som under ett av sina uppdrag möter en underlig främling, en seraf, som erbjuder dig att rädda liv snarare än förstöra. Du måste nu åka mellan olika tidsperioder och rädda oskyldiga människor från ondska. För att hjälpa dig på ditt uppdrag så har du utrustats med olika typer av magier som t.ex. PSI-stöt, summons, sleep spell, smell spell och magisk strupsång.

Ladda ner

Ladda ner Photoshop mallar för Famicom- och NES-kassetter genom att klicka på bilden ovan.

• Paketformat: ZIP, 4.1 MB
• Innehåll: 1 st Famicom-kasett mall för Photoshop. 1 st NES-kassett mall för Photsohop. Läs mig/Read me-fil.
• Licens: Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

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