Att ta en design från Photoshop till webben i ett klick är inte ens en helt ny idé. Så länge som det har funnits? Webbdesigners? det har varit drömmen om ett sådant arbetsflöde. Idag ska vi titta på ännu ett verktyg som gör detta löfte: CSS Hat.
CSS-hatten är annorlunda än andra appar som du har sett. Det är inte en fullblåst WYSIWYG som syftar till att du kan bygga en hel webbplats utan att skriva kod, men det är ett sätt att byta ut några snabba CSS3-stilar på ett enda element med den process som du har använt det senaste decenniet eller mer, rätt i Photoshop. Spoiler alert: det är bra. Riktigt bra. Läs vidare för att se varför.
Möt CSS Hat
Låt oss prata om vad CSS Hat är och inte. Först och främst är det inte en fristående ansökan. Istället är det ett Photoshop-plugin. Och jag menar inte en av de stora Photoshop-pluginsna som verkligen känns som en separat app, menar jag en väldigt enkel panel som verkligen inte har mycket för den bortom den textbaserade utgåvan.
Vad det här betyder för dig är att inlärningskurvan är anmärkningsvärt låg. Det är faktiskt praktiskt taget obefintligt om du känner din väg runt Photoshop.
Tricket som utförs av CSS Hat är att det har möjlighet att titta på ett lager i Photoshop, analysera dess olika egenskaper och försök att duplicera dessa egenskaper med ren CSS. Självklart kan det inte replikera allt, men intervallet är ganska imponerande och passar dina behov för de flesta ändamål. Här är några av de saker som den lyckas hantera:
- Lagstilar: Det är här fördelen verkligen ligger. Många av Photoshops lagerformat översätter anmärkningsvärt bra till CSS (inte alla, men många). Några exempel på stödda stilar inkluderar skuggor, glödor och gradientöverlagringar.
- Rundade hörn: Om du ritar en vektorform med en rundad hörnradie, kommer den resulterande CSS-enheten att använda ett motsvarande gränsvärdevärde.
- Bakgrundsfärg och opacitet: Fyll i en form med en färg och den kommer också att användas i din CSS.
- Typografi Styles: Inte så snabbt. Tydligen kommer denna funktion att komma, men har inte implementerats än. Lagstilar, fyllningar, etc. fungerar fortfarande men inte några teckensnittsrelaterade egenskaper.
Tips: För att få en känsla för hur det skulle vara att använda Photoshop för att generera CSS, kolla in de gratis webbappslagsstilarna. Det är inte så nära så smidigt som CSS Hat, men det är ett roligt litet alternativ.
Men jag hatar WYSIWYG!
Jag vet, jag hatar Dreamweaver och någon annan app som försöker att nedlösa den kodande aspekten av att bygga webbplatser. Jag är precis där med dig. Jag kodar webbplatser för hand och tycker om att göra det så att du kan vara säker på att jag inte leder dig ner en väg som kommer att matta dina kodningskurvor och producera fasansfull produktion.
CSS Hat är inte ett sätt för icke-kodare att fuska och bygga en bra webbsida med en crappy kodbas. Faktum är att det är uppenbart att CSS-hatten är ett verktyg för kodare, inte icke-kodare. Om du ska använda det effektivt måste du ha en stark förståelse för CSS: vad är möjligt, hur det implementeras och hur olika egenskaper tillämpas på webbläsare.
Visst, CSS Hat kommer att göra mycket av arbetet för dig med kodgenerering, men det ger dig bara en liten bit av det massiva pusslet som är en webbplats och det är upp till dig att integrera det här stycket ordentligt.
Så varför stör? Det är en giltig fråga. Jag tror att svaret ligger i det obestridliga faktum att CSS3, för alla sina fantastiska förmågor, är skrymmande som helvete. Det tar mycket kod för att uppnå jämna enkla resultat och om du kan använda ett verktyg som kommer att minska din tidsinvestering samtidigt som du skapar kod som är nästan identisk med vad du skulle skriva för hand, varför inte använda det?
Vi provar det!
Jag är alltid super skeptisk till verktyg så här, men efter att ha sett några av de prover som CSS Hat kunde räkna ut var jag ivrig att prova mig själv. För att börja, låt oss bygga en grundläggande knapp i Photoshop och se hur CSS Hat hanterar uppgiften.
Processen här är i grunden exakt den som du alltid skulle ta för att bygga en knapp i Photoshop. Jag börjar med att rita en låda med en 10 px hörnradie.
Därefter lägger vi till ett överlängningsöverlägg, från # 009ced och slutar vid # 0065bd.
Nu ser vi till en inre skugga för att ge en subtil markering överst.
Låt oss snabba saker längs här och hoppa framåt till färdig knappen. I grunden härifrån tillsatte jag en mörk inre glöd (fungerar mer som en inre skugga), en enda pixelslag och en droppskugga. Tänk på att även om det här tar lite tid att förklara, är det bara en minut eller mindre av Photoshop-arbetet.
Gå Go Gadget CSS Hat!
Nu när vi har knappen så vi vill ha det, behöver vi bara öppna vår CSS Hat-panel och vi hittar en stor bit kod som väntar på att kopieras över.
Innan vi fortsätter att se hur det ser ut i webbläsaren, låt oss göra utdata ännu bättre. Längst ner kan du se fem knappar. Den första kopierar koden till ditt urklipp och de andra fyra är alternativ som du kan stänga av och på:
- Lägg till kommentarer för att förklara var den specifika raden kommer ifrån.
- Generera CSS med leverantörsspecifika prefix vid behov.
- Lägg bredden och höjden på det valda lagret till CSS.
- Vik CSS i en regel som heter efter lagret.
För enkelhets skyld kommer jag att kolla alla fyra alternativ och namnge mitt lager?. knapp ?. Nu ska jag gå över till en kodredigerare och klistra in den resulterande koden i min CSS:
Fungerade det?
Nu kommer sanningen, hur ser den levande demoen ut jämfört med Photoshop-versionen. Här är ditt svar:
Som du kan se är de verkligen inte helt identiska. Med detta sagt, de är ganska dang nära och på många sätt är CSS-versionen faktiskt mjukare och snyggare. Enligt min mening är det en förbättring på mitt Photoshop-koncept!
Det finns några försiktighetsåtgärder som du måste vara medveten om. Vissa aspekter av Photoshop-stilar kan helt enkelt inte översättas till CSS vid denna tidpunkt. Till exempel lägger Photoshop ett blandningsläge av? Multiplicera? att släppa skuggor som standard, men det här kan inte överföras till din CSS.
Det sägs att det finns gott om avancerade möjligheter här, och du kan enkelt lägga till ditt arbete med bra gammaldags handkodning. CSS Hat-hemsidan visar några riktigt imponerande demos som byggdes med hjälp av det här fantastiska verktyget, som den nedan av musHo.
Så mycket kod!
Jag vet redan vad några av er tänker på den här tiden, så låt mig fånga dig innan du lämnar en otäck kommentar. Den tydliga nackdelen med de exempel vi ser ovan är att de tar så mycket dang-kod. Detta är dock inte felet hos CSS Hat i det minsta. Koden som den producerar är faktiskt snyggt organiserad och så kortfattad som möjligt.
Sanningen är att om du vill använda bilder för att skapa dessa typer av effekter, kan du enkelt gå den vägen. Men i dessa dagar, i en värld där allt måste ändras till olika enheter (av vilka vissa har fantastiska skärmupplösningar), gillar vi att bygga saker med ren kod, så storlek och pixelering är aldrig ett problem.
För att göra detta vänder vi oss till vår vän CSS3, som fortfarande är mycket i ett flussläge och kräver därför att vi använder dessa enorma block av redundant kod fylld med webbläsarprefix för att uppnå någonting värt att diskutera. När du ser de stora bitarna av koden ovan, om du har en biverkning, reagerar du på webbdesign, inte till det här specifika verktyget.
Den enda sak som kan sägas mot verktyg som CSS Hat är att de gör det väldigt lätt att glömma att du verkligen arbetar med kod. När du skriver kod för hand, är du mycket mer medveten om resultatet och är därför mer benägna att vara koncis, både ur korrekthet och latskap. Se till när du använder någon kodgenerator att du alltid undersöker produktionen noggrant och fråga dig själv om effekten är värt uppblåst.
Vad tycker du om CSS Hat?
Efter att ha fått en grundlig provkörning, är jag bortblåst av hur lätt CSS Hat gör det för att generera en giltig, snyggkodad CSS med Photoshop. Det är en dröm som kommer i uppfyllelse för många designers och jag tror att den fullt ut förtjänar all hype som den får och mer.
Om du kodar många CSS3-stilar och råkar älska Photoshop, bör du definitivt tänka på att hämta din kopia. Det är $ 20 just nu, vilket verkar som mycket. Men du vet om Photoshop släppte ut de här funktionerna i morgon, du skulle gärna gaffla ut hundratals dollar för uppgraderingen.
Nu när du har läst mitt spiel, skulle jag gärna höra vad du tycker. Är detta ett fantastiskt nytt verktyg för designers och coders eller bara en dumt leksak som inte ska tas på allvar? Rant på!