Post-It Effekt
Autor: René A. Da Rin,   Artikel erstellt: am 24.04.2020



Diese CSS Vorlage platziert ein ‘Post-It’ auf der Webseite, schräg versetzt mit 3D Schatteneffekt. Fährt man mit der Maus drüber zoomt es etwas grösser hoch und richtet sich horizontal aus.

Eingebunden wird es im HTML in einem DIV.

<div class="info-panel">
<p>Hier der Text für das Post-It.</p>
</div>

Das dazugehörige CSS besteht aus 2 Definitionen für den Normalzustand und den Hoverzustand.

.info-panel{
   width: 75%;
   margin: 0px 0px 0px 80px;
   background: #fdc300;
   padding: 10px 10px 10px 20px;
   color: #000000;
   font-weight: bold;
   font-style: italic;
   -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
   -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
   box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
   transform: rotate(-4deg);
   -webkit-transform:rotate(-4deg);
   -o-transform:rotate(-4deg);
   -moz-transform:rotate(-4deg);
   transition: -moz-transform 1.0s linear;
   -moz-transition: -moz-transform 1.0s linear;
   -o-transition: -o-transform 1.0s linear;
   -webkit-transition: -webkit-transform 1.0s linear}

.info-panel:hover{
   -moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
   -webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
   box-shadow:3px 3px 10px rgba(0, 0, 0, .7);
   transform:scale(1.25);
   -webkit-transform:scale(1.25);
   -moz-transform:scale(1.25);
   -o-transform:scale(1.25);
   position:relative;
   z-index:5;
   transition: -moz-transform .0.5s linear;
   -moz-transition: -moz-transform 0.5s linear;
   -o-transition: -o-transform 0.5s linear;
   -webkit-transition: -webkit-transform 0.5s linear}

width: Breite innerhalb des Content, als relative oder absolute Angabe möglich.
margin: definiert die Abstände ausserhalb des DIV, also vom Post-It zur Umgebung.
background: Farbe des Post-It.
padding: Abstände innerhalb des DIV (Rand des Post-It) zum Text.
color: Textfarbe.
font-weight: Schrift fett.
font-style: Schrift kursiv.
box-shadow: Schatten, muss für unterschiedliche Browser mehrfach definiert werden.
transform: gibt an wie das DIV gedreht werden soll.
transition: gibt an in welcher Zeit zum ‘hover’ und zurück bewegt werden soll. Je kleiner die Zahl um so schneller.

So schaut das Post-It mit der vorligenden Code-Vorlage aus.

Weiterlesen

Schreibe eine Antwort

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

 

%d Bloggern gefällt das: