Mobirise Tutorials

Vignette und Slider

Vignette Hintergrund Vignette mit Animation Slider Bild-Position Bild im Kreis Navi Transparent Drehendes Bild Translate



Vignette
Background Image

Hier verwende ich die gleiche CSS wie im Container unten, nur mit Dunkelblau.
Das Overlay muss die gleiche Größe wie der Inhalt haben.

Als "Vignette" oder "Vignettierung" bezeichnet man bei einem Bild ein Overlay, das aus einem inliegenden Rahmen besteht und somit das Objekt einfasst, um den wichtigen Inhalt hervorgehoben darzustellen. Dazu verwendet man meist eine "Randabschattung" zur Betonung der Bildmitte.

Dies ist die hier angewendete CSS - auch im Hintergrundbild oben.

.vignette::after {
  box-shadow: inset 0px 0px 85px rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
}

Polarfuchs

Polarfuchs

Vignette nur am Bild

Siehe auch hier für Sound-Tutorial 

Animation & Sound mit Hover & Klick über Bild

Hover Bild Animation, CSS in diesem Popup 

Unten die CSS-Class ohne Animation, diese muss in einen Container außerhalb vom Bild angebracht sein, siehe Screenshot unten.

.vignette {
  position: relative;
  display: inline-block;
}
.vignette img {
  display: block;
  border-radius: 20px;
}
.vignette::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-shadow: inset 0px 0px 100px rgba(1, 1, 122, 1);
}

Quellcode

Quellcode Vignette am Bild im Code Editor

CSS Slider

Der jeweilige Text erhält dann die class="slide-in-left" (von links einfliegen), bzw. die class="slide-in-right" (von rechts einfliegen).

@keyframes slideFromLeft {
    0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideFromRight {
    0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}
.slide-in-left {
  animation: slideFromLeft 1s forwards;
  animation-delay: 1s;
}
.slide-in-right {
  animation: slideFromRight 1s forwards;
  animation-delay: 1s;
}

Bild

Bild wird am Smartphone nur links beschnitten

Bild an Position beschneiden

Dieses Bild hat bis zu einer Media-Breite von 767px eine fixe Höhe von 300px und wird entsprechend am Smartphone nur links beschnitten:

img {
  width: 100%;
}
@media (max-width: 767px) {
  img {
    height: 300px;
    object-fit: cover;
    object-position: 100% 0;
  }
}

Bei Hover wird das Bild unscharf:

img:hover {
  filter: blur(2px);
  transition: all 0.5s linear;
}

Bild an Kreis angepasst

Klicke auf das Bild

Girl

CSS Bild rund im Kreis

Guckt auch hier für mein endgültiges Tutorial , inklusive der CSS für die Animation und dem Sound.

Hier das Original-Bild . Es muss also freigestellt auf transparentem Hintergrund sein, damit der CSS-Hintergrund zu sehen ist.

Unten habe ich das gleiche Bild nochmals über zwei Blöcke  als Test gelegt.

Hier die CSS für den Kreis. Die @media Anweisung stellt die Größe vom Kreis am Smartphone auf 80% der Display-Breite. Das Bild selbst habe ich auch mit der Anweisung "border-radius: 50%;" rund gestaltet:

.kreis {
  width: 50%;
  height: auto;
  margin: 0px auto 0px auto;
  border-radius: 50%;
  border: 10px solid #fff;
  box-shadow: 5px 5px 5px #232323, -3px -3px #24548b;
  background-image: linear-gradient(blue, yellow);
}
@media (max-width: 767px) {
  .kreis {
    width: 80%;
  }
}
.bild-rund {
  border-radius: 50%;
}


Hier die Anzeige vom Bild im Kreis mit den oben erstellten CSS Klassen. Durch die Anweisung "border-radius: 50%;" passt sich die Kontur des Bildes an den Kreis an. Wenn das Bild nicht quadratisch ist, also zum Beispiel höher als breit, würde der Kreis zu einem Oval werden. Die Animation habe ich so wie mit dem Bild vom Polarfuchs oben erstellt. 

<div class="kreis">
  <img class="bild-rund" src="https://www.mobirise-tutorials.com/Test-Temp/images/woman.png" alt="Girl">
</div>

Bild verwendet zwei Blöcke

Hier liegt das Bild in der Mobirise class="image-wrapper" und es wurde das gleiche Bild mit einem negativen Abstand in Form von einem "margin-top: -110px;" über zwei Blöcke verschoben. Ich habe die Blöcke mit einer roten Linie getrennt ...

Girl

... wobei das nur vom unteren in den oberen Block funktioniert.

Verschiebe ich das Bild nach unten mit z.B. einem "margin-bottom: -450px;", schiebt es sich hinter den unteren Block und wird verdeckt. Es geht erst dann, wenn ich dem <section> Tag diese Inline-Anweisung gebe:

<section style="z-index: 1;" ..... >

CSS rotierendes Farbspektrum unten

.image {
  width: 150px;
  height: 150px;
  animation: spin 4s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.image:hover {
 animation-play-state: paused;
}


Die class="image" schreibt ihr dann lediglich an das <img> Tag mit dran. Wollt ihr, dass sich die Grafik entgegengesetzt dreht, dann vertauscht einfach die Gradzahl from / to, so wie ich es hier getan habe.

Rotierendes Farbspektrum

Weiteres Beispiel
Pause Mouseover

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren