Leichter Schatten mit CSS3
<div class="blueBox"></div>Unsere CSS besteht aus lediglich einer Klasse, gefolgt von einem :before-Selector:
.blueBox { width: 400px; height: 300px; margin: auto; position: relative; background-color: #1E8CBE; } .blueBox:before{ -webkit-transform: skew(0deg, 4deg); box-shadow: 7px 7px 7px #000; -moz-box-shadow: 7px 7px 7px #000; -webkit-box-shadow: 7px 7px 7px #000; position: absolute; background-color: #000; bottom: 2px; right: 12px; content: ''; z-index: -1; width: 280px; height: 25px; }Zur Erklärung:
- Mit der Klasse .blueBox erstellen wir eine klassische Box mit der Position relative. Die Position ist für unseren nächsten Schritt besonders wichtig.
- Mit dem Selektor :before erstellen wir eine weitere Box. Dieser hat die Besonderheit sich mit der Hilfe von box-shadow und –webkit-transform zu schattieren und zu transformieren. Damit unsere Haupt-Box, also die Klasse blueBox, unseren Selektor (oder zumindest nur ein Teil davon) als Schatten verwenden kann, setzen wir hierfür die z-index: -1 und ändern dabei die Position. Somit wird der Selektor hinter unserer Klasse platziert und das was zu sehen bleibt, ist lediglich ein leichter Schatten für unsere blueBox.
Demo
Eine Demo des Effekts ist hier verfügbar: http://css3shadow.reza.cubelab.ch/Mehr Artikel wie dieser
Welche WordPress Version habe ich? So findest Du es heraus!
WordPress ist das beliebteste CMS der Welt, mit welchem sich neben Blogs auch ganze Webseiten erstellen lassen. Da WordPress regelmässig und fleissig verbessert wird, kann…
Weiterlesen WordPress 6.1 – Alle Neuerungen mit webP und dem neuen Twenty Twenty-Three Standard-Theme im Überblick
Das dritte grosse WordPress Update in diesem Jahr steht vor der Türe. Mit WordPress 6.1 kommen am 1. November 2022 wieder zahlreiche Neuerungen auf uns…
Weiterlesen Wie wir ACF Blocks mit Handlebars Templating einsetzen
Mittels Handlebars Templating trennen wir Logik sauber vom Inhalt. Auf diese Weise können wir übersichtliche, einfache und performante Templates für WordPress Editor Blocks erstellen, welche…
Weiterlesen iPhone Bildschirmgrössen – (k)ein Hexenwerk für Webdesigner?
iPhone-Bildschirm Messgrössen iPhone Bildschirmgrösse in Zoll (Display Size, Inches) Dies ist die Bildschirmgrösse in Zoll, gemessen von einer Ecke zur anderen. Genau so, wie auch Bildschirmgrössen von…
Weiterlesen Vorstellung von WordPress 6.0 – Neue Blöcke und mehr Performance
Seit dem 24. Mai 2022 ist mit WordPress 6.0 die zweite Hauptversion in diesem Jahr veröffentlicht worden. Benannt wurde die Version nach Jazzmusiker Arturo O’Farrill.…
Weiterlesen So kombinieren wir Nested Pages, SEO Framework & Polylang in WordPress
Bei vielen Kundenwebseiten setzen wir auf das Plugin Nested Pages, um Seitenstruktur besser sehen (und verwalten) zu können. Ohne dieses Plugin sieht die Anzeige von…
Weiterlesen WordPress Login – so bekommst Du Zugang zu Deinem Dashboard
Gerade für WordPress Anfänger, aber auch bei fortgeschrittenen Benutzern, kann es oft schwierig sein, sich bei seinem Konto anzumelden. Im folgenden Beitrag werde ich Dir…
Weiterlesen WordPress 6.0: Entwicklerteam gibt Zeitplan der neuen Version bekannt
Update: WordPress 6.0 wurde am 24. Mai 2022 veröffentlicht Wie Matias Ventura Ende Januar schrieb, soll WordPress 6.0 ein Abschluss der Phase 2 des Gutenberg-Projekts…
Weiterlesen WordPress 5.9 – Was ist neu und kommt mit dem Update
Ursprünglich sollte WordPress 5.9 (Josephine) bereits am 14. Dezember 2021 veröffentlicht werden, wurde jedoch wegen offenen Problemen nach mehrfachen Verschieben nun am 25. Januar 2022…
Weiterlesen WordPress Bilder und Medien: Alles was du wissen musst
Bilder sind ein grosser und wichtiger Bestandteil einer modernen Webseite. Sie helfen dem Besucher und Leser, Dinge zu visualisieren und lockern auch gerne lange Beiträge…
Weiterlesen Warum unsere Kunden ihre Webseite kaputt layouten können
Einleitung / Basics Bereits seit einiger Zeit haben wir unseren neuen cubetech Core im Einsatz. Intern nennen wir das Ding liebevoll „gutenbase“ – eine Mischung…
Weiterlesen Tech Talk – „Advanced Custom Fields“ Plugin
Bereits seit langer Zeit setzen wir bei unseren WordPress-Installationen auf das populäre Plugin «Advanced Custom Fields» (nachfolgend ACF). Dieser Beitrag zeigt, wie wir unsere Webseiten…
Weiterlesen