Dare effetti alle foto con HTML

HTML e CSS

Hyper Text Markup Language (HTML o in spagnolo "lingua dei segni ipertestuali") è un linguaggio di autore comune utilizzato dagli sviluppatori Web per creare siti Web statici. La struttura di una pagina Web è stabilita con HTML. Anche se è buono a creare lo scheletro del tuo progetto web, non è così buono per usarlo come stile o per effetti. Per questo, i fogli di stile CSS (CSS) vengono utilizzati e integrati con il tuo HTML, ti consente di aggiungere elementi grafici e stili alla tua pagina web. Ad esempio, se vuoi che il testo appaia in grassetto in tutti i titoli di ciascuna pagina, puoi farlo con i CSS

Opacità dell'immagine

Uno degli effetti grafici più comuni è l'opacità. Opacity determina il grado di trasparenza di un'immagine trovata sul sito. Se vuoi mettere un'immagine di sfondo sulla tua pagina web e devi ridurre l'opacità per creare un effetto più trasparente, puoi farlo con i CSS. Inserisci il codice CSS corrispondente nel tag HTML :

In questo esempio, è stata definita l'opacità a "50", riducendo di conseguenza la visibilità delle immagini della pagina Web.

Effetto "Mouse sopra"

Puoi fare in modo che l'effetto opacità compia un ulteriore passo e modificare l'opacità di una foto quando il cursore dell'utente passa sopra di essa. Questo è un effetto "mouse-over". Il codice è simile a una semplice modifica dell'opacità e viene inserito anche all'interno del tag HTML . Questo è un buon effetto dell'uso dei pulsanti di navigazione.

Puoi vedere i comandi "onmouseout" e "onmouseover". Quando si carica la pagina, questo codice riduce l'opacità dell'immagine di% 50, quando si passa il cursore su di esso aumenta a% 100, quando si riprendono i corsi l'immagine viene ridotta nuovamente a% 50.

Galleggiante (galleggiante)

"Float" è un altro semplice effetto HTML e CSS per una foto. Il "float" definisce dove apparirà un'immagine all'interno di una tabella, cella o documento. Il comando "float" usa le proprietà di sinistra, destra e centro. Puoi usarlo per posizionare un'immagine all'interno del testo o per creare una serie di immagini posizionate correttamente in una galleria. È possibile definire questo all'interno del tag head HTML come segue:

Nell'esempio precedente, è stato indicato che tutti gli elementi HTML con il tag fluttuare a sinistra nel documento.