4 BlickWinkel

Guten Morgen Deutschland...

  • fensterregen
  • fensterregen0
  • fensterregen1
  • fensterregen2

CSS3 & JAVA Bildgestaltung

 

Bilder werden oft für grafische Effekte innerhalb von Beiträgen benutzt. Dazu ist es notwendig die Bilder vorher in das richtige Format zu bringen. Doch manches mal fehlt der richtige Effekt, um den Beitrag aufzupeppen.

Dabei widmen wir der Bildgestaltung oft viel Zeit. Bei der Wiederholung von Abläufen kann man sich oft sehr schnell helfen. Gerade wenn man viele Bilder bearbeiten möchte. In unserem Beispiel machen wir das mit etwas CSS und Java.


Dazu kreieren wir eine neue Klasse für CSS. Dadurch brauchen wir nicht jedes Bild einzeln bearbeiten. Bei der Klasse legen wir entweder die Höhe oder die Breite fest. Der andere Wert wird auf "auto" gestellt. Ich lege die Breite fest (da meine Seite eh kein responsives Verhalten hat). Gleichzeitig sollen die Bilder alle in der Mitte platziert sein.

  


Ich gestalte diesen Effekt mit zwei verschiedenen Bildgrößen und könnte das jetzt beliebig wiederholen, ohne ein einzelnes Bild formatieren zu müssen. Zwei große Bilder untereinander und zwei kleinere Bilder nebeneinander.
In meiner Index-Datei würde dann der Script-Zusatz so aussehen:

<script type="text/javascript">
  $(function() {
   $('.lazy').lazy();
 });
</script>

Die CSS-Datei wird mit folgenden Zusatz vervollständigt:

img.lazy {width: 600px; height: auto; display: block;}

Wenn wir weitere Unterschied bei den Bildern haben möchten, brauchen wir nur einen zusätzlichen Eintrag in der CSS-Datei hinzufügen. Ich habe einfach auf "lazy1" ergänzt. Einmal mit 600px und einmal mit 300px in der Breite. Der einzufügende HTML-Code sieht dann so aus:

<img class="lazy" data-src="dein-weg-zum-bild/bildname0.jpg" alt="Bildname" />
<img class="lazy" data-src="dein-weg-zum-bild/bildname1.jpg" alt="Bildname" />
<img class="lazy" data-src="dein-weg-zum-bild/bildname2.jpg" alt="Bildname" />

Die Anweisung mit dem horizontalem Verhalten der kleinen Bilder wir mit dem Style-Zusatz "text-align: center" in der CSS-Datei angegeben.
















zur Hauptseite