Autor-Archiv : René A. Da Rin

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.

CSS Grid erlaubt es alleine mittels CSS zweidimensionale Layouts zu erstellen. Optisch erinnern diese Raster an Tabellen. Sie können einfach nur Zeilen oder Spalten erstellen, diese aber auch beliebig kombinieren.

Zeilen

Mit folgendem Beispiel erzeugen Sie einfache Zeilen. Alleine werden Sie das wohl kaum verwenden, weil das wenig Sinn macht.

.container{
   display: grid;
   grid-template-columns: 250px;
   grid-template-rows: 150px;
}

<div class="container">
   <div> Zeile 1 </div>
   <div> Zeile 2 </div>
   <div> Zeile 3 </div>
</div>

Dieses Beispiel erzeugt im <DIV> 3 Zeilen.

codepen.io/radarin/zeilen

Spalten

Mit folgendem Beispiel erzeugen Sie einfache Spalten. Das alleine können Sie durchaus mal brauchen.

.container{
   display: grid;
   grid-template-columns: 250px 250px 250px;
}

.spalte-1 {
   grid-row: 3/3;
}
.spalte-2 {
   grid-row: 3/3;
}

.spalte-3 {
   grid-row: 3/3;
}

<div class="container">
   <div class="spalte-1"> Zeile 1 </div>
   <div class="spalte-2"> Zeile 2 </div>
   <div class="spalte-3"> Zeile 3<br />mit Untertext </div>
</div>

z7

codepen.io/radarin/spalten

Layouts

Mit folgendem Beispiel erzeugen Sie ein einfaches Layout für eine Webseite.

codepen.io/radarin/Zeilen-Spalten

medium.com/…/css-grid-einführung

Weiterführende Informationen

medium.com/…/css-grid-einführung

Eine Zeitgemässe CSS-Formatierung der eigenen Webseite ist ein grosser Aufwand, insbesondere wenn man nicht der CSS Profi ist. Da gibt es viel zu tun:

• Schriftarten und -grössen für Überschriften und Absätze definieren
• Buttons und Textfelder gestalten
• Abstände definieren, Elemente possitionieren
• Ein einheitliches CI gestalten, das möglichst in allen Browsern gleich ausschaut
• Responsives Design, nur um einen Teil zu nennen.

Da sich diese Aufgaben immer wieder wiederholen, sind sogenannte Frameworks entstanden, die den Webdesignern die Arbeit erleichtern.

Das bekannteste Framwork wurde von Twitter entwickelt und heisst Bootstrap und wird teilweise von WordPress Themes verwendet. Sie erkennen das am ‘bootstrap.css’ im Quellcode der WP-Webseite. Mann muss also lediglich die entsprechenden Klassen im HTML anwenden. Es gibt aber auch die Möglichkeit es im eigenen Theme nachzurüsten.

Weiterführende Informationen

code.makery.ch/de/
Offizielle Dokumentation
Bootstrap nachträglich in WordPress einbinden

Textmarker Effekt

Einzelne oder auch mehrere Worte können mit einem ‘Textmarker’ markiert werden.

.highlight-yellow{
   background-color: #FEF04F;
   padding: 0px 2px;
   -webkit-border-top-left-radius: 15px;
   -webkit-border-bottom-right-radius: 5px;
   -moz-border-radius-topleft: 15px;
   -moz-border-radius-bottomright: 5px;
   border-top-left-radius: 15px;
   border-bottom-right-radius: 5px;
   opacity: 0.8;
   border-right-style: solid;
   border-right-width: 3px;
   border-right-color: #f8e400;
}

Das Wort oder die Wörter die so markiert werden sollen müssen im Quelltext in ein <span class=”highlight-yellow”>…</span> eingebunden werden.