- - Aggiungi effetto ombra alle immagini con CSS3 Auto Code Generator

Aggiungi effetto ombra alle immagini con CSS3 Auto Code Generator

Il CSS ti consente di modellare le tue pagine web in modo semplice, moltofacilmente. Puoi definire più di cento stili di testo in una pagina (ovviamente la tua pagina apparirà come una tenda da circo) ma si tratta della facilità e flessibilità che deriva dall'uso dei CSS nelle pagine web.ThemeShock ha un generatore di codificatore CSS che ti aiuterà ad aggiungerediversi effetti di ombreggiatura alle tue immagini in pochi semplici clic. Scegli l'effetto e scrive il codice; gli effetti possono essere aggiunti in basso, ai lati, in alto e in basso, in basso a sinistra, in basso a destra, in alto a destra e in basso a sinistra o negli angoli diagonali.

css-ombra-generator_HQ

Prima di iniziare; controlla la dimensione del tuoimmagine (quella a cui si desidera aggiungere l'effetto). Il generatore di codice ha un limite superiore e inferiore predefinito di 130 - 347 px per la larghezza e l'altezza dell'immagine. Se le dimensioni dell'immagine superano questa, puoi sempre modificare la larghezza e l'altezza in un secondo momento. Il codice consente anche di determinare l'opacità e la sfocatura dell'ombra. Non è possibile caricare l'immagine nel generatore di codice, verrà utilizzata un'immagine predefinita in modo da poter visualizzare in anteprima l'effetto.

Dal menu a discesa, scegli quale ombraeffetto che ti piace, ogni volta che cambi uno dei selettori viene generato un nuovo codice, quindi assicurati di utilizzare l'ultimo. Dopo aver selezionato l'effetto che ti piace, imposta la larghezza e l'altezza dell'immagine usando la barra di scorrimento orizzontale. Utilizzare i tasti freccia destra e sinistra quando si desidera spostare leggermente il pulsante. Impostare la sfocatura e l'opacità e il codice verranno generati. L'aumento o la riduzione di uno di questi parametri creerà un nuovo codice.

Css3 Drop Shadow

Una volta impostato tutto, copia il codice CSS in aFile CSS e denominalo per la tua pagina web (o tema). Viene inoltre generato il codice HTML che viene inserito nella tua pagina web (è unico per ogni effetto che scegli dal menu a discesa), copialo e posiziona il codice immagine (img src = "") dove dice "il tuo codice qui".

La cosa migliore di questo generatore di codice è quellafunziona ed è gratuito. Ha vincoli di dimensione per le immagini, ma possono essere modificati dal codice. Se si utilizza un'immagine trasparente (come quella sopra), si otterrà uno sfondo grigio opaco. È possibile modificare il colore di sfondo in un secondo momento dal codice. (Modifica sfondo riga di codice: #ccc). Il codice fornisce anche una cornice 5px a tutte le immagini, puoi anche modificare la cornice, ma aumentando e diminuendo la larghezza nasconderai o rivelerai l'ombra più del necessario, quindi è meglio lasciarlo solo.

Visita ThemeShock CSS Drop Shadow Generator

Commenti