Share
Den senaste byggnaden av Photoshop har några bra nya funktioner som säkert kommer att fånga uppmärksamheten hos webbdesigners. Du kan nu konvertera ett lagers form och stil till CSS med ett enda klick. I den här artikeln kommer vi att förklara hur det här fungerar. Låt oss ta en titt!
Den här nya Photoshop-funktionen som vi ska titta på är en som jag är ganska glad över. Möjligheten att konvertera Photoshop-lagstilar till CSS har funnits ett tag genom verktyg från tredje part, men aldrig inbyggt i rutan. Webbutvecklare har ständigt uppgift att konvertera Photoshop-bilder för att kunna leva CSS3-drivna mönster. Beroende på objektets komplexitet kan detta ta en seriös tid.
Skulle det inte vara trevligt om Photoshop bara kunde göra omvandlingen till dig? Goda nyheter: nu kan det. Låt oss se hur det fungerar.
Till att börja med, låt oss försöka konvertera en grundläggande knapp i Photoshop. Som du kan se började jag med en enkel rektangel med avrundade hörn, så lägger jag till några lagstilar. Först användes övergångsöverlagring. Därefter brukade jag använda en inre skugga som satts på överlägg för att få en bra markering överst. Slutligen skapade jag en subtil droppskugga.
Nu när vi har en anständig uppfattning om hur knappen är inbyggd i Photoshop, låt oss konvertera den till CSS. Det finns två sätt att göra om detta. Den första är att välja lagret och gå till Layer> Kopiera CSS i menyraden. Å andra sidan är att högerklicka på lagret och välj alternativet "Kopiera CSS" från menyn som visas. Detta kommer att kopiera CSS-koden till vårt urklipp så att vi kan infoga den i vår favorit kodredigerare.
Innan vi går kolla in det, notera att jag har namngett mitt lager "knapp" i helt små bokstäver. Detta är viktigt eftersom det kommer att konverteras till ett klassnamn i vår sista kod.
Om vi hoppar över till en kodredigerare kan vi prova vår knappkod för att se om den fungerade. Först ska jag skapa en div i min html och ge den en klass av "knapp". Nu hoppar jag över till CSS och klistra in den kod som Photoshop placerat i mitt urklipp.
.knapp
gränsstråle: 10px;
bakgrundsbild: -moz-linjär gradient (90deg, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
bakgrundsbild: -webkit-linjär gradient (90deg, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
boxskugga: 0px 5px 4px 0px rgb (0, 0, 0);
position: absolut;
vänster: 249px;
topp: 245px;
bredd: 300px;
höjd: 100px;
z-index: 2;
Som du kan se har en ganska stor bit av kod skrivits för oss. Det ser ut att formen och färgen är fläckig med vår Photoshop-version, men inte allt har kopierats framgångsrikt.
Till att börja med är droppskuggan vid full opacitet trots den minskade opaciteten i vår Photoshop-version. Jag skulle ha förväntat Photoshop att använda RGBa för att dra av den här effekten. Förutom droppskuggproblemen ignorerades vår inre skugga helt enkelt, så det finns ingen höjdpunkt överst.
Sammantaget har vi en stark start. Photoshop räddade oss ganska lite av kodning och till och med gick den extra milen för att inkludera några webbläsarprefix för att säkerställa maximal kompatibilitet.
Bara för jämförelsens skull, låt oss jämföra Photoshops nya inbyggda Copy CSS-funktion till ett gratis Photoshop-plugin som heter CSS3Ps, vilket i huvudsak lovar samma funktionalitet.
Återigen väljer jag mitt lager, bara den här gången kommer jag att slå CSS3P-plugin. Detta lanserar en webbsida där jag måste vänta en massa 20-tal för att se mina resultat. Det här är visserligen super irriterande, men när resultaten dyker upp är de faktiskt bättre än den inbyggda Photoshop-funktionen.
Som du kan se finns både den högsta höjdpunkten och den reducerade ogenomskinligheten i boxskuggan närvarande i den här versionen. För att ta saker ännu längre kan du få dina resultat i Sass, ett fantastiskt alternativ som jag skulle vilja se från Photoshop i framtiden.
För att få denna uppdatering kan kunderna följa följande instruktioner.
Används inte Creative Cloud? Du kan prenumerera på Creative Cloud och få tillgång till alla dessa uppdateringar, liksom resten av Creative Suite för bara 49,99 USD / månad.
Accentsconagua