Wenn Sie Bilder verbessern, können Sie dies mit Photoshop tun und dann auf der Webseite einbinden, oder wir können auch Option B auswählen: Tun Sie dies mit den verfügbaren HTML-, CSS- und Javascript-Techniken.
Nach dem Sprung gibt es viele Techniken, um die Bilder zu verbessern, fast alle mit jQuery als Hauptbasis oder mit CSS3 Nutzen Sie die neuesten Webstandards, obwohl ich Sie daran erinnere, dass wir in diesem Fall die Kompatibilität mit einigen Browsern verlieren.
Sie sind auf Englisch, aber sie werden sofort gefangen, versprochen :)
Quelle | 1.WD
Abgerundetes CSS3-Bild mit jQuery
Erfahren Sie, wie Sie ein span-Tag um das Bildelement wickeln, um abgerundete Bilder zu erhalten, die in allen modernen Browsern direkt angezeigt werden.
2.
Mehrere Hintergründe und Grenzen mit CSS 2.1
Erfahren Sie, wie Sie mit CSS 2.1-Pseudoelementen bis zu 3 Hintergrundbilder, 2 Präsentationsbilder mit fester Größe und mehrere komplexe Rahmen für ein einzelnes HTML-Element bereitstellen.
3.
Kurztipp: Mehrere Rahmen mit einfachem CSS
Schneller Screencast, der Ihnen zeigt, wie Sie mit einfachem CSS mehrere Rahmen erreichen, um Ihren Designs mehr Tiefe zu verleihen. Viel einfachere Version des vorherigen Tutorials.
4.
Mehrere Rahmen für dynamisch dimensionierte Elemente mit CSS2
Dritte Version von Nikolaus Gallagher zeigt Ihnen, was zu tun ist, wenn Sie nicht die Größe des Elements haben.
5.
Viel Spaß mit Grenzen - abgeschrägt, gedrückt und mehr!
Erfahren Sie, wie Sie mit CSS einen gedrückten Effekt erzielen und einige einfache Tricks im Rahmenstil, um verschiedene Effekte zu erzielen.
6.
Polaroids mit CSS3
Erfahren Sie, wie Sie mit fantastischem CSS2 und CSS3 eine ansonsten unscheinbare Liste von Bildern in einen vollständigen Satz von Polaroid-Bildern verwandeln.
7.
Perfektes ganzseitiges Hintergrundbild
Erfahren Sie, wie Sie mit CSS Hintergrundbilder hinzufügen, die die gesamte Seite mit Bildern füllen, keinen Leerraum, das Bild nach Bedarf skalieren, keine Bildlaufleisten verursachen und vieles mehr.
8.
CSS3 Box Shadow- und Image Hover-Effekte
Entdecken Sie eine neue Möglichkeit, Schlagschatteneffekte hinzuzufügen, indem Sie einfach ein Stylesheet bearbeiten.
9.
Fancy Thumbnail Hover-Effekt mit jQuery
Erzielen Sie mit CSS und jQuery einen ordentlichen Flash-Effekt.
10
So erstellen Sie einen einfachen CSS-Bild-Rollover-Effekt
In diesem Tutorial erfahren Sie, wie Sie einen einfachen CSS-Bild-Rollover-Effekt mit grundlegendem HTML- und CSS-Stil erstellen.
11
Floating-Tutorial
Floatutorial führt Sie durch die Grundlagen schwebender Elemente wie Bilder, Drop Caps, Schaltflächen "Weiter" und "Zurück", Bildergalerien, Inline-Listen und mehrspaltige Layouts. Schauen Sie sich 4 Tutorials an, die sich dem Floating von Bildern widmen.
12
Snazzy Hover-Effekte mit CSS
In diesem Lernprogramm werden Sie die Erstellung flexibler erweiterter Schwebetechniken mithilfe von CSS2.1-Eigenschaften erläutern.
13
Schnelle Überschläge ohne
Vorspannung
Bei Verwendung von CSS-Bild-Rollovers müssen zwei, drei oder mehr Bilder geladen werden (und häufig vorinstalliert werden, um die besten Ergebnisse zu erzielen). Erfahren Sie, wie Sie alle Status in einem Bild zusammenfassen, um dynamische Änderungen zu beschleunigen und keine Vorladung erforderlich zu machen.
14
jQuery abgerundete Ecken
Viele jQuery-Effekte für abgerundete Ecken und viel mehr Muster.
15
Einfachste QuickInfo und Bildvorschau mit jQuery
Siehe 3 Beispiele für die Verwendung des jQuery-Rollover-Vorschau-Skripts. Dieses einfache Skript kann für verschiedene Zwecke angewendet werden.
16
Supersized - Vollbildhintergrund /
Slideshow
jQuery-Plugin
Superzided ist ein jQuery-Plugin, das die Größe von Bildern ändert, um den Browser zu füllen, während das Bildabmessungsverhältnis beibehalten wird, und Bilder / Hintergründe über eine Diashow mit Übergängen und Vorladen zyklisiert.
17
PNG-Überlagerung
Haben Sie jemals das Problem gehabt, eine Website mit vom Kunden bereitgestellten Bildern zu erstellen, um später nach der Aktualisierung der Fotografie festzustellen, dass das ursprüngliche Erscheinungsbild nicht erhalten bleibt? Bei dieser Lösung wird ein transparentes PNG-Overlay erstellt, das als Maske / Rahmen um normales JPEG oder GIF verwendet werden kann. Auf diese Weise kann eine typische CMS-Installation so konfiguriert werden, dass Benutzer Fotos hochladen können, ohne sich Gedanken über die Verwendung eines Grafikprogramms zum Anwenden von Filtern machen zu müssen.
18
BeZoom
Leichtgewicht
JQuery
Zoom-Plugin
BeZoom ist eine einfache und leichte Alternative für JQZoom. Es ist leichter und einfacher zu bedienen.
19
Verwenden von jQuery für Hintergrundbildanimationen
Spielen Sie mit jQuery und ändern Sie die Position des Hintergrundbilds, um den gewünschten Effekt zu erzielen. Es gibt einen neuen Artikel mit der Frage "Wie gehe ich mit aktiven Zuständen um?" - - Behandeln des aktiven Status für jQuery-animierte Hintergründe.
20
5 Möglichkeiten, Ihre Bilder mit CSS aufzupeppen
Hier sind ein paar einfache Tricks, um Ihren typischen langweiligen Bildern etwas Geschmack zu verleihen. Die Verwendung von Photoshop zum Stylen jedes Bildes kann langwierig und auf lange Sicht schwierig zu pflegen sein. Diese folgenden CSS-Techniken helfen Ihnen, diesen Schmerz zu lindern.
21
Wie man:
Größenanpassbar
Hintergrundbild
Erfahren Sie, wie Sie mit CSS ein anpassbares Hintergrundbild einrichten. Sie haben 3 Möglichkeiten zur Auswahl.
22
Gestalten Sie Ihre Bildlinks
Wenn Sie den Benutzern mitteilen, dass auf einen bestimmten Abschnitt unserer Website geklickt werden soll, wird dies am besten durch einen Mouse-Over-Effekt erreicht. Diese "anklickbaren" Abschnitte enthalten sicherlich Inhaltsbilder. Image Link ist ein Skript, mit dem Sie Ihren Bildlinks zusätzliches Styling zuweisen können.
23
Mehrere Hintergrundbilder mit CSS
Manchmal ist es sinnvoller, Hintergrundbilder zu verwenden, als sie direkt in die Seite einzufügen. Und während jedes Element - wie Ihr Body-Tag - nur ein Hintergrundbild enthalten kann, können sie auf mehrere Elemente angewendet werden.
24
Bildränder mit CSS
Wirklich einfaches Tutorial, das Ihnen zeigt, wie Sie Bildern mithilfe von CSS einen festen Rand hinzufügen.
25
CSS-Sprites ohne Verwendung von Hintergrundbildern
Erfahren Sie, wie Sie den Hover-Effekt anwenden, ohne viel über CSS-Sprites zu wissen.
