HTML-Fotoeffekte

Bilder spielen eine große Rolle in Web-Design. Bilder sind in einem Webdokument übernommen, als Hintergrund verwendet und für die Navigation verbessert. Ohne Skriptsprachen wie JavaScript oder interaktive Programme wie Adobe Flash sind Ihre Auswirkungen Möglichkeiten begrenzt. Sie können einige einfachen Stil-Effekte mit dem Gebrauch anwenden HTML und CSS.

HTML und CSS

Hyper Text Markup Language (HTML) ist eine gemeinsame Dokumenterstellung Sprache von Web-Programmierern verwendet, um einfache Webseiten zu erstellen. Er sieht die Struktur einer Webseite. Während HTML gut auf die Schaffung Drahtmodell für Ihr Internet-Projekt ist, ist es nicht gut für Stil oder Effekte hinzufügen. Cascading Style Sheet (CSS) Seiten HTML ergänzen und Benutzern erlaubt, Grafik und Stil-Elemente auf einer Webseite hinzufügen. Als Beispiel wenn Sie, um den Header-Text fett auf jeder Seite in Ihrer Website möchten, konnte Sie mit CSS dazu.

Bild-Deckkraft

Ist eines der häufigsten Grafikeffekte Deckkraft. Die Deckkraft bestimmt, wie transparent ist ein Bild in Ihrem Dokument. Wenn Sie ein Hintergrundbild auf Ihrer Webseite platzieren wollte, aber reduzieren die Deckkraft, um einen Effekt mehr sehen-durch Erstellen musste, konnte Sie mit CSS dazu. Platzieren Sie den entsprechenden CSS-Code, in dem < Img > HTML-Tag:

< Img Width = "150" Height = "113" Alt = "Yourpicture" style="opacity:0.5;filter:alpha(opacity=50)" / >

In diesem Beispiel haben Sie die Deckkraft auf "50", definiert, die die Sichtbarkeit der Bilder auf der Webseite um die Hälfte reduziert hat.

Maus über

Sie können die Deckkraft-Effekt in einem Schritt weiter und die Deckkraft eines Fotos ändern, wenn der Benutzer Cursor darüber bewegt. Dies ist ein Mouseover-Effekt. Der Code ist ähnlich wie eine einfache Deckkraft ändern und es ist auch innerhalb des < Img > HTML-Tags platziert. Dies ist eine gute Wirkung für Navigations-Schaltflächen verwenden.

< Img style="opacity:0.5;filter:alpha(opacity=50)"

onmouseover="this.Style.Opacity=1;this.Filters.alpha.Opacity=100"

onmouseout="this.Style.Opacity=0.5;this.Filters.alpha.Opacity=50" / >

Sie können die Befehle "Onmouseover" und "Onmouseout" sehen. Dieser Code wird die Deckkraft des Bildes um 50 Prozent reduzieren, wenn die Seite ersten Lasten, Willen es auf 100 Prozent, erhöhen wenn die Maus über das Bild dann wieder auf 50 Prozent reduzieren, wenn der Cursor das Bild verlässt.

Schwimmen

Float ist eine weitere einfache HTML- und CSS-Foto-Effekt. Float definiert, wo ein Bild in einer Tabelle, Zelle oder Dokument angezeigt wird. Der Float-Befehl verwendet die Eigenschaften Links, rechts und Center. Sie können dies entweder ein Bild im Text positionieren oder zum Erstellen einer Reihe von richtig platzierte Bilder in einer Galerie. Sie würde dies innerhalb der < Head > HTML-Tags wie folgt definieren:

< Head >

< Typ style = "Text/Css" >

IMG

{

Float: Left;

}

< / style >

< / head >

Im obigen Beispiel haben Sie angegeben, dass Sie alle HTML-Elemente mit dem Tag < Img > schweben auf der linken Seite im Dokument haben möchten.