Ogni tanto vado alla ricerca di qualche codice base CSS e cerco di affinare qualche tecnica nuova che mi consenta, con poco, di fare tanto.
In questo caso avevo in mente di realizzare un titolo accattivante che cogliesse l’attenzione dell’utente all’interno di un sito web, come per esempio uno store, dove dobbiamo enfatizzare una promozione, oppure di un Hotel che vuole enfatizzare le proprie offerte. 🚀
E cosa può attrarre di più di un ben titolo, grande, grosso ed animato?
Ottima idea, ma ora vediamo di metterla in pratica e nel modo più semplice possibile.
Ebbene, dopo vari test, ho creato degli esempi di codice, che usano come tecnica, l’accoppiata SVG (Scalable Vector Graphics) e le proprietà CSS border-image.
SVG
Le SVG sono immagini come altre e sono molto compatibili con IE fin dalle prime versioni, venivano usate nei primi anni del web e oggi sono largamente usate, questo perché se scalate in piccolo o in grande, mantengono la loro proporzione senza sgranare di pixel.
Oltretutto a volte sono meno pesanti delle comuni immagini e per la stampa sono essenziali!
border-image
Una proprietà CSS purtroppo poco usata, ma che può rivelarsi, come vedrete, molto interessante in tanti ambiti!
Esempi di codice CSS
See the Pen Awesome SVG border animation Responsive by Christian Pucci (@minimamente) on CodePen.
Come ho realizzato tutto questo
Per prima cosa dovete avere un programma che vi permetta di creare e modificare SVG, io ormai da anni uso Figma, ve lo consiglio caldamente! E’ una Web App ormai famosissima, ma potete comunque usare Adobe XD o Sketch, insomma, il vostro preferito!
In pratica ho creato un quadrato diviso in 9 parti uguali, e per questi esempi ho adottato una dimensione di 20 px come base per il progetto, esattamente 9 quadrati da 20 px X 20 px che vanno a formare una unica SVG di dimensione 60 px X 60 px
Se notate la prima immagine da sinistra è più grande (120 px), e la trovate nel secondo esempio! Questo per darvi una idea che è possibile utilizzare la proprietà CSS border-image-repeat: round; per ripete il bordo superiore ed inferiore per tutta la sua lunghezza e mettere per esempio molte più icone diverse.
Potete anche utilizzare solo le immagini laterali di sinistra e destra, come ho fatto nel terzo esempio, o anche solo 1 parte e potete sempre regolare il tutto tramite la proprietà CSS border-image-slice: 20;
Il mio consiglio è quello di fare delle prove con il vostro Browser e la vostra console preferita, direttamente live sull’elemento per omogenizzare il tutto.
Nel primo esempio sfrutto la tecnica del quadrato e rendo i bordi inclinati nel verso giusto.
Ho creato appositamente questa immagine per farvi capire al meglio anche la spaziatura laterale e come disegnare la vostra SVG in modo che sia corretta!
