Bilderrahmen

Dank CSS ist es in weblica kinderleicht, Bilder mit Rahmen und Schatten zu versehen ohne hierfür ein Grafikrpogramm bemühen zu müssen. Der folgende Artikel zeigt, wie das geht.

Den CSS-Code hinterlegen Sie im CSS-Code für Ihr Projekt auf der Registerkarte "Global", siehe hierzu: Eigenen CSS-Code für ein Projekt hinterlegen.

Ab Version 3

Die hier beschriebenen Beispiele funktionieren erst ab Version 3 des weblica Desktop-CMS; bis und mit Version 2.5.2 haben Bilder einen Inline-Style gesetzt, der eine Anpassung per CSS-Regeln wie hier beschrieben verhindert.

Herkömmliche Darstellung

Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.

CSS zu Hilfe: ein feiner Rahmen, etwas Padding und eine Prise CSS3-Magie ist alles, was es braucht

Ein paar Zeilen CSS reichen, um unsere Bilder mit hübschen Rahmen zu versehen. Je nachdem, wie wir die Regel formulieren, können wir den Rahmen automatisch für alle Bilder sämtlicher Absätze verwenden oder wir formulieren die Regel so, dass nur Bilder ausgewählter Absätze den Rahmen erhalten.

Weisser Rahmen mit Schatten

Text-Absatz

Bild im Multimedia-Absatz

CSS-Code nur für bestimmte Absätze

In dieser Variante möchten Sie nur die Bilder ausgewählter Absätze mit dem gewünschten Rahmen versehen. Hierzu weisen Sie den Absätzen in den Absatz-Eigenschaften auf der Registerkarte CSS/HTML die CSS-Klasse whiteFrame zu.

.whiteFrame img {

  border: 1px solid #BBBBBB;

  padding: 5px;

  border-radius: 4px;

  box-shadow: 2px 2px 1px rgba(0,0,0,0.25);

}

CSS-Code für alle Bilder im Text-Absatz

.textParagraph img {

  border: 1px solid #BBBBBB;

  padding: 5px;

  border-radius: 4px;

  box-shadow: 2px 2px 1px rgba(0,0,0,0.25);

}

CSS-Code für alle Bilder im Multimedia-Absatz

.imageParagraph img {

  border: 1px solid #BBBBBB;

  padding: 5px;

  border-radius: 4px;

  box-shadow: 2px 2px 1px rgba(0,0,0,0.25);

}

Polaroid-Fotos

Warum Ihren Fotos nicht einen leicht nostalgischen Touch verleihen?

Text-Absatz

Bild im Multimedia-Absatz

CSS-Code nur für bestimmte Absätze

.polaroidFrame img {

  border: 1px solid #BBBBBB;

  padding: 5px 5px 30px 5px;

  border-radius: 4px;

  box-shadow: 2px 2px 1px rgba(0,0,0,0.25);

}

CSS-Code für alle Bilder im Text-Absatz

.textParagraph img {

  border: 1px solid #BBBBBB;

  padding: 5px 5px 30px 5px;

  border-radius: 4px;

  box-shadow: 2px 2px 1px rgba(0,0,0,0.25);

}

CSS-Code für alle Bilder im Multimedia-Absatz

.imageParagraph img {

  border: 1px solid #BBBBBB;

  padding: 5px 5px 30px 5px;

  border-radius: 4px;

  box-shadow: 2px 2px 1px rgba(0,0,0,0.25);

}

Ein bisschen mehr Platz für Absatz-Bilder im Text-Absatz

Durch den hinzugefügten Rahmen kann es passieren, dass ein Absatzbild zu nah am Text steht oder rechts sogar abgeschnitten wird. Mit der nachstehedne Regel geben wir den Absatz-Bildern im Text-Absatz einen Rand-Abstand und damit etwas mehr Platz:

CSS-Code

.textParagraph .sidepic-right,

.textParagraph .sidepic-left  {

    margin-right: 15px;

}

Bilder mit Drehung

Dank CSS3 ist es ein leichtes, Bilder mit einem Winkel zu versehen. Das funktioniert mit allen aktuellen Versionen von Firefox, Opera, Safari und Chrome. Und der InternetExplorer? Ein Schelm, der diese Frage stellt: Natürlich tanzt der IE wieder einmal aus der Reihe. Glücklicherweise ist das Fehlen dieses optischen Effekts zu verschmerzen, er gibt einer Seite den letzten Schliff, sein Fehlen beeinträchtigt aber die Funktion der Website in keiner Weise und die Darstellung ist auch ohne Effekt in Ordnung.

Bild geneigt nach rechts

Bild geneigt nach links

CSS-Code um Bilder mit einem Winkel darzustellen

/* nach rechts */

.rotate-right img {

    -moz-transform: rotate(2deg);

    -o-transform: rotate(2deg);

    -webkit-transform: rotate(2deg);

    transform: rotate(2deg);

}

/* nach links */

.rotate-left img {

    -moz-transform: rotate(-2deg);

    -o-transform: rotate(-2deg);

    -webkit-transform: rotate(-2deg);

    transform: rotate(-2deg);

}