Realizzare un design da Photoshop sul Web con un clic non è nemmeno un'idea da remoto. Fino a quando ci sono stati? Web designer? c'è stato il sogno di un tale flusso di lavoro. Oggi esamineremo l'ennesimo strumento che rende questa promessa: CSS Hat.
CSS Hat è diverso dalle altre app che hai visto. Non è un WYSIWYG completo che mira a consentire la creazione di un intero sito senza scrivere codice, ma è un modo per liberare alcuni stili CSS3 su un singolo elemento utilizzando il processo che hai utilizzato negli ultimi dieci anni o più, proprio in Photoshop. Avviso spoiler: va bene. Veramente buono. Continua a leggere per vedere perché.
Scopri CSS Hat
Parliamo di ciò che CSS Hat è e non è. Prima di tutto, non è un'applicazione indipendente. Invece, è un plugin di Photoshop. E non intendo uno di quegli enormi plugin di Photoshop che sembra davvero un'app separata, intendo un pannello molto semplice che in realtà non ha molto altro oltre all'output testuale.
Ciò che questo significa per te è che la curva di apprendimento è notevolmente bassa. In realtà, è praticamente inesistente se sai orientarti su Photoshop.
Il trucco eseguito da CSS Hat è che ha la capacità di guardare un livello in Photoshop, analizzare le sue varie caratteristiche e quindi tentare di duplicare tali caratteristiche con puro CSS. Ovviamente, non è possibile replicare tutto, ma la gamma è abbastanza impressionante e si adatta alle tue esigenze per la maggior parte degli scopi. Ecco alcune delle cose che può gestire con successo:
- Stili di livello: Questo è il vero vantaggio. Molti degli stili di livello di Photoshop si adattano molto bene ai CSS (non tutti, ma molti). Alcuni esempi di stili supportati includono ombre, bagliori e sovrapposizioni di sfumature.
- Angoli arrotondati: Se si disegna una forma vettoriale con un raggio dell'angolo arrotondato, il CSS risultante utilizzerà un valore equivalente raggio-bordo.
- Colore di sfondo e opacità: Compila una forma con un colore e verrà applicata anche nel tuo CSS.
- Stili di tipografia: Non così in fretta. Apparentemente questa funzione è in arrivo, ma non è ancora stata implementata. Gli stili di livello, i riempimenti, ecc. Funzionano ancora, ma non le proprietà relative ai font.
Mancia: Per avere un'idea di cosa sarebbe come usare Photoshop per generare CSS, controlla gli Stili di livello dell'applicazione gratuita. Non è neanche lontanamente elegante come CSS Hat, ma è una piccola alternativa divertente.
Ma odio i WYSIWYG!
Lo so, lo so, tu odi Dreamweaver e qualsiasi altra app che cerca di minimizzare l'aspetto della codifica nella costruzione di siti web. Sono proprio qui con te. Codigo i siti a mano e mi diverto a farlo in questo modo in modo da poter stare sicuro che non ti sto conducendo in un percorso che attenuerà i tuoi tagli di codifica e produrrà risultati orrendi.
CSS Hat non è un modo per i non-programmatori di imbrogliare e costruire un sito Web di bell'aspetto con una base di codice scadente. In effetti, è ovvio che CSS Hat è in realtà un'utilità per i programmatori, non per i non-programmatori. Se hai intenzione di usarlo in modo efficace, devi avere una forte conoscenza dei CSS: cosa è possibile, come è implementato e come vengono applicate le diverse proprietà attraverso i browser.
Certo, CSS Hat farà un sacco di lavoro per te con la generazione del codice, ma ti fornisce solo un piccolo pezzo del puzzle enorme che è un sito web e spetta a te integrare correttamente quel pezzo.
Allora perché preoccuparsi? È una domanda valida Credo che la risposta risieda nel fatto innegabile che il CSS3, per tutte le sue incredibili abilità, è ingombrante da morire. Ci vuole un sacco di codice per ottenere risultati anche semplici e se puoi usare uno strumento che ridurrà il tuo investimento in termini di tempo generando codice praticamente identico a quello che scriverei a mano, perché non usarlo?
Proviamolo!
Sono sempre molto scettico nei confronti di strumenti come questo, ma dopo aver visto alcuni dei campioni che CSS Hat è stato in grado di dare risalto, ero impaziente di provarlo io stesso. Per iniziare, costruiamo un pulsante di base in Photoshop e vediamo come CSS Hat gestisce l'attività.
Il processo qui è sostanzialmente identico a quello che avresti sempre voluto creare per creare un pulsante in Photoshop. Inizierò disegnando una scatola con un raggio d'angolo di 10px.
Successivamente, aggiungeremo un overlay del gradiente, a partire da # 009ced e terminando con # 0065bd.
Ora guarderemo a un'ombra interiore per fornire un punto culminante sottile in alto.
Acceleriamo le cose qui e saltiamo in avanti fino al pulsante finito. Fondamentalmente, da qui ho aggiunto un bagliore interno oscurato (funziona più come un'ombra interiore), un singolo tratto di pixel e un'ombra esterna. Tieni presente che anche se questo richiede un po 'di tempo per spiegare, in realtà è solo un minuto o meno del lavoro di Photoshop.
Go Go Gadget CSS Hat!
Ora che abbiamo il pulsante nel modo in cui lo vogliamo, tutto ciò che dobbiamo fare è aprire il pannello CSS Hat e troveremo una grande porzione di codice in attesa di essere copiata.
Prima di procedere a vedere come appare nel browser, rendiamo l'output ancora migliore. Lungo il fondo, vedrai cinque pulsanti. Il primo copia il codice negli appunti e gli altri quattro sono opzioni che è possibile disattivare e attivare:
- Aggiungi commenti per spiegare da dove proviene quella particolare linea.
- Generare CSS con prefissi specifici del fornitore ove necessario.
- Aggiungi la larghezza e l'altezza del livello selezionato al CSS.
- Avvolgi il CSS in una regola chiamata dopo il livello.
Per comodità, vado a controllare tutti e quattro opzioni e nominare il mio layer? .button ?. Ora andrò a un editor di codice e incollo il codice risultante nel mio CSS:
Ha funzionato?
Ora arriva il momento della verità, come appare la demo dal vivo rispetto alla versione di Photoshop. Ecco la tua risposta:
Come puoi vedere, certamente non sono perfettamente identici. Detto questo, sono abbastanza vicini e in molti modi la versione CSS è in realtà più liscia e dall'aspetto migliore. A mio avviso, è un miglioramento nel mio concetto di Photoshop!
Ci sono alcuni avvertimenti di cui devi essere a conoscenza. Alcuni aspetti degli stili di Photoshop semplicemente non possono essere tradotti in CSS in questo momento. Ad esempio, Photoshop aggiunge un metodo di fusione di? Moltiplica? per eliminare le ombre di default, ma questo non può essere trasferito al tuo CSS.
Detto questo, ci sono un sacco di possibilità avanzate qui, e puoi facilmente aggiungere al tuo lavoro con una buona vecchia codifica manuale. Il sito Web CSS Hat mostra alcuni demo davvero impressionanti che sono stati creati con l'aiuto di questo fantastico strumento, come quello di MusHo.
Così tanto codice!
So già cosa ne pensate di voi a questo punto, quindi lasciate che vi prenda prima di lasciare un brutto commento. Il chiaro lato negativo degli esempi che vediamo sopra è che prendono così tanto codice di pericolo. Tuttavia, questo non è colpa di CSS Hat in meno. Il codice che produce è in realtà ben organizzato e il più conciso possibile.
La verità è che se vuoi usare le immagini per creare questi tipi di effetti, allora puoi facilmente seguire questa strada. In questi giorni però, in un mondo in cui tutto ha bisogno di ridimensionarsi su diversi dispositivi (alcuni dei quali hanno una straordinaria risoluzione dello schermo), ci piace costruire cose con codice puro, quindi le dimensioni e la pixelazione non sono mai un problema.
Per fare questo, ci rivolgiamo al nostro amico CSS3, che è ancora molto in uno stato di flusso e quindi richiede che usiamo questi enormi blocchi di codice ridondante riempiti con prefissi del browser per realizzare qualcosa che valga la pena discutere. Quando vedi gli enormi blocchi di codice sopra, se hai una reazione avversa, stai reagendo allo stato del web design, non a questo specifico strumento.
L'unica cosa che si potrebbe dire contro strumenti come CSS Hat è che rendono molto facile dimenticare che stai davvero lavorando con il codice. Quando scrivi il codice a mano, sei molto più consapevole dell'output e quindi sei più propenso a essere conciso, sia per correttezza che per pigrizia. Assicurati che quando stai usando un generatore di codice lo esamini da vicino e ti chiedi se l'effetto vale la pena.
Cosa ne pensi di CSS Hat?
Dopo avergli dato un test drive approfondito, sono stupefatto dalla facilità con cui CSS Hat riesce a generare CSS validi e ben codificati con Photoshop. È un sogno che si avvera per molti designer e penso che meriti pienamente tutto il clamore che sta ottenendo e altro ancora.
Se codifichi molti stili CSS3 e ti piaccia Photoshop, dovresti sicuramente pensare a ritirare la tua copia. Adesso sono $ 20, il che sembra molto. Ma sai se Photoshop ha rilasciato queste funzionalità domani, ti piacerebbe sborsare centinaia di dollari per l'aggiornamento.
Ora che hai letto il mio discorso, mi piacerebbe sentire cosa ne pensi. Si tratta di un nuovo fantastico strumento per designer e programmatori o solo un giocattolo stupido da non prendere sul serio? Rant on!