CSS Tricks für die Webseite - Tutorials und Ideen – revilodesign.de

Die besten CSS Buttons – mit hover Animationen

Oliver Götze — Thu, 29 Apr 2021 12:02:12 +0000

In dieser Sammlung möchte ich euch die schönsten CSS Buttons mit Animationen vorstellen. Buttons, egal ob groß oder klein, unauffällig oder „voll in die Fr***“, sind elementar wichtig für eine Webseite, denn sie sind in der Regel der Call to Action (CTA) für eine Interaktion des Besuchers. In den meisten Fällen der Kauf eines Produktes oder die Anmeldung oder oder. Es gibt unzählige Funktionen, aber meiner Erfahrung nach ziehen gut platzierte und coole CSS Buttons besser als lieblos platzierte CTA.

Wie jeder Webdesigner muss man das Rad nicht neu erfinden. Es reicht manchmal ein Blick nach rechts und links auf die Arbeit anderer Webdesigner, um sich Inspirationen zu holen. Daher finde ich es auch nicht verwerflich, wenn man ab und an auf die Arbeit anderer zurückgreift (auch auf meine 😉 ) und diese seinem Design oder Code anpasst. Im Laufe der Zeit habe ich mir eine kleine Sammlung animierter Buttons angelegt und diese möchte ich gerne mit euch teilen, denn darunter sind echt geile arbeiten.

Die meisten der Buttons in meiner Liste sind mit der MIT Lizenz versehen.

Da die MIT-Lizenz selbst nicht mit einem Copyright versehen ist, steht es jedem frei, die MIT-Lizenz für den eigenen Gebrauch zu modifizieren.

Mehr Informationen findet ihr hier.

CSS Sliced Button

Autor: Sarah

See the Pen
CSS Sliced Button by Sarah (@saraharaya)
on CodePen.

Sehr coole Slice Animation, der den Text halbiert.

Simple CSS Button Hover Effects

Autor: Dronca Raul

See the Pen
Simple CSS Button Hover Effects by Dronca Raul (@rauldronca)
on CodePen.

Gerade der Hovereffekt beim zweiten Button gefällt mir sehr gut.

Menu button to Hamburger – styled & animated with pure CSS

Autor: Yinxi Chen

See the Pen
Menu button to Hamburger – styled & animated with pure CSS by Yinxi Chen (@kaylolo)
on CodePen.

Eine Sammlung wirklich gelungener Menus, oder wie man auch so schön sagt – Hamburger Menus 🙂

CSS button hover

Autor: Danil Goncharenko

See the Pen
CSS button hover by Danil Goncharenko (@Danil89)
on CodePen.

Dezente Animation beim Hover

Flush button

Autor: Kamil

See the Pen
Flush button by Kamil (@KamilDyrek)
on CodePen.

Für mich ein wenig zu verspielt, aber man kann den Button bisschen modifizieren, dann wirkt die Animation sehr elegant und nicht mehr so aufdringlich.

Six Pure CSS Button Hover Animations

Autor: Christian

See the Pen
Six Pure CSS Button Hover Animations by Christian (@CTNieves)
on CodePen.

Hier gefällt mir vor allem der IDLE Button und die Rotation.

CSS Fizzy Button

Autor: Jamie Coulter

See the Pen
CSS Fizzy Button by Jamie Coulter (@jcoulterdesign)
on CodePen.

Schöne, sprudelnde und fröhliche Button Animation mit Bubbles.

CSS BUTTON HOVER

Autor: Imran Pardes

See the Pen
CSS BUTTON HOVER by Imran Pardes (@folaad)
on CodePen.

Moderner Button in Form eines Parallelogramms.

Candy Color Button Animation

Autor: Yuhomyan

See the Pen
Candy Color Button Animation by Yuhomyan (@yuhomyan)
on CodePen.

Eine wirklich schöne umfangreiche Sammlung dezenter animierter Buttons.

Welcher Button hat euch am besten gefallen? Oder habt ihr einen anderen Favoriten, der in meiner Liste fehlt? Dann lasst mir doch ein „Drunter-Kommi“ da. Auf jeden Fall werde ich die Sammlung suggestive erweitern. Ich freue mich über euren Input.

Der Beitrag Die besten CSS Buttons – mit hover Animationen erschien zuerst auf revilodesign.

Individuelles List Styling für ul li / ol li

Oliver Götze — Tue, 27 Nov 2018 15:06:13 +0000

In diesem Beitrag möchte ich Euch zeigen, wie Ihr ganz einfach individuelle Styles für Auflistungen mit CSS erstellen könnt, denn oft kommt es vor, dass man aus Designtechnischen Gründen die Zahlen vor der Aufzählung individuell designen oder in einem anderen Beispiel Icons davor setzen möchte ohne dabei das HTML zu ändern.

Das schöne: Mit counter-increment funktioniert dies kinderleicht

Auflistungen individuell stylen – so geht’s

Im folgenden möchte ich euch einige Beispiele zeigen, wie Ihr die Auflistungsnummern mit CSS Stylen könnt:

Beispiel 1:

HTML
CSS

HTML

									
	Lorem ipsum dolor sit amet, consectetuer elit.
	Aenean commodo ligula eget dolor.
	um sociis natoque penatibus et magnis.
	Integer tincidunt. Cras dapibus

CSS

									ol.first {
	list-style: none;
	counter-reset: my-first-counter;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 16px;
}
ol.first li {
	counter-increment: my-first-counter;
	display: flex;
	width: 50%;
	font-size: 16px;
	line-height: 20px;
	padding: 5px 0;
}
ol.first li::before {
	content: '0' counter(my-first-counter);
	font-weight: bold;
	font-size: 40px;
	margin-right: 10px;
	line-height: 40px;
	color: #5dd39e;
}

Lorem ipsum dolor sit amet, consectetuer elit.
Aenean commodo ligula eget dolor.
um sociis natoque penatibus et magnis.
Integer tincidunt. Cras dapibus

Beispiel 2:

HTML
CSS

HTML

									
	Lorem ipsum dolor sit amet, consectetuer elit.
	Aenean commodo ligula eget dolor.
	um sociis natoque penatibus et magnis.
	Integer tincidunt. Cras dapibus

CSS

									ol.second {
	counter-reset: my-second-counter;
	margin: 0;
	padding: 24px;
	list-style: none;
}
ol.second li {
	counter-increment: my-second-counter;
	font-size: 14px;
	line-height: 40px;
	padding: 5px 0;
	width: 100%;
	list-style: none;
	display: inline-block;
}
ol.second li::before {
	content: counter(my-second-counter) '.)';
	display: inline-block;
	float: left;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	background: #5dd39e;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin: 0 10px 0 0;
}

Lorem ipsum dolor sit amet, consectetuer elit.
Aenean commodo ligula eget dolor.
um sociis natoque penatibus et magnis.
Integer tincidunt. Cras dapibus

Beispiel 3:

HTML
CSS

HTML

									
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
	Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
	Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
	Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

CSS

									ul.third {
	margin: 0;
	padding: 24px;
	list-style: none;
}
ul.third li {
	font-size: 14px;
	line-height: 26px;
	padding: 5px 0;
	width: 100%;
	list-style: none;
	display: inline-block;
}
ul.third li::before {
	content: '';
	display: inline-block;
	float: left;
	width: 26px;
	height: 26px;
	background-image: url('https://www.revilodesign.de/media/play-button.svg');
	background-repeat: no-repeat;
	background-size: 26px 26px;
	margin: 0 10px 0 0;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

Beispiel 4: Element überspringen / auslassen

HTML
CSS

HTML

									
	Headline 1
	Lorem ipsum dolor sit amet, consectetuer elit.
	Aenean commodo ligula eget dolor.
	Headline 2
	Integer tincidunt. Cras dapibus

CSS

									ol.fourth {
	counter-reset: my-second-counter;
	margin: 0;
	padding: 24px;
	list-style: none;
}
ol.fourth li {
	font-size: 14px;
	line-height: 40px;
	padding: 5px 0;
	width: 100%;
	list-style: none;
	display: inline-block;
}
ol.fourth li.list {
	counter-increment: my-second-counter;
}
ol.fourth li.subheadline {
	font-weight: bold;
	padding: 0 0 0 50px;
}
ol.fourth li.list::before {
	content: counter(my-second-counter);
	display: inline-block;
	float: left;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	background: #5dd39e;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin: 0 10px 0 0;
}

Headline 1
Lorem ipsum dolor sit amet, consectetuer elit.
Aenean commodo ligula eget dolor.
Headline 2
Integer tincidunt. Cras dapibus

Ich hoffe meine Beispiele zeigen wie man die Auflistung mit Styles individuell gestalten kann. Solltet Ihr noch Fragen, Anregungen oder Umsetzungswünsche haben, dann lasst es mich wissen und schreibt Sie in die Kommentare. Ich versuche Sie so schnell wie möglich zu beantworten bzw. oder umzusetzen.

Der Beitrag Individuelles List Styling für ul li / ol li erschien zuerst auf revilodesign.

3D Würfel mit CSS erstellen – so geht’s

Oliver Götze — Tue, 09 Oct 2018 13:44:06 +0000

HTML
CSS

HTML

									
	Front
	Back
	Right
	Left
	Top
	Bottom

CSS

									div#cube {
	width: 300px;
	height: 300px;	
	margin: 100px auto 0 auto;
	perspective: 5000px;
	-moz-perspective: 5000px;
	-webkit-perspective: 5000px;
	transform-style: preserve-3d;	
	-moz-transform-style: preserve-3d;	
	-webkit-transform-style: preserve-3d;
	transform: rotate3d(-4, -6, 1.65, 54deg);
	-moz-transform: rotate3d(-4, -6, 1.65, 54deg);
	-webkit-transform: rotate3d(-4, -6, 1.65, 54deg);	
	position: relative;
}
div#cube div.cube-face {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	font-size: 60px;
	line-height: 300px;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	color: rgba(0,0,0,0.5);
	font-size: 20px;
}
div#cube div.cube-face.front {
	transform: rotateY(0deg) translateZ(150px);
	-o-transform: rotateY(0deg) translateZ(150px);
	-moz-transform: rotateY(0deg) translateZ(150px);
	-webkit-transform: rotateY(0deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(238, 234, 196 , 0.5);
}
div#cube div.cube-face.back {
	transform: rotateY(180deg) translateZ(150px);
	-o-transform: rotateY(180deg) translateZ(150px);
	-moz-transform: rotateY(180deg) translateZ(150px);
	-webkit-transform: rotateY(180deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(235, 211, 187 , 0.5);
}
div#cube div.cube-face.right {
	transform: rotateY(90deg) translateZ(150px);
	-o-transform: rotateY(90deg) translateZ(150px);
	-moz-transform: rotateY(90deg) translateZ(150px);
	-webkit-transform: rotateY(90deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(238, 234, 196, 0.5);
}
div#cube div.cube-face.left {
	transform: rotateY(-90deg) translateZ(150px);
	-o-transform: rotateY(-90deg) translateZ(150px);
	-moz-transform: rotateY(-90deg) translateZ(150px);
	-webkit-transform: rotateY(-90deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(224, 230, 216 , 0.5);
}
div#cube div.cube-face.top {
	transform: rotateX(90deg) translateZ(150px);
	-o-transform: rotateX(90deg) translateZ(150px);
	-moz-transform: rotateX(90deg) translateZ(150px);
	-webkit-transform: rotateX(90deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(169, 197, 196 , 0.5);
}
div#cube div.cube-face.bottom {
	transform: rotateX(-90deg) translateZ(150px);
	-o-transform: rotateX(-90deg) translateZ(150px);
	-moz-transform: rotateX(-90deg) translateZ(150px);
	-webkit-transform: rotateX(-90deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(199, 215, 205 , 0.5);
}

Front

Back

Right

Left

Top

Bottom

Würfel eignen sich hervorragend um mit 3D Transformationen zu arbeiten und zu lernen. Um einen 3D Würfel mit CSS zu erstellen benötigen wir zunächst einen Rahmen mit 6 Child-Elementen für alle Seiten des 3D Würfels.

Das Grundgerüst des 3D Würfels

Zunächst erstellen wir die Grundstruktur für unseren Würfel.

html

				
	Front
	Back
	Right
	Left
	Top
	Bottom

Mittels CSS den 3D Effekt erstellen

Nun geben wir den Rahmen eine Breite und Höhe. Diese sollte identisch sein. Die 6 Seitenelemente des Würfels positionieren wir absolut. Anschließend erhält das Elternelement mit der ID Cube die transform-style. Damit lässt sich eine 3D Grafik erstellen und der Würfel anschließend auf allen 3 Achsen (X-, Y- und Z-Achse) drehen, neigen und rotieren. Ebenso können wir die Perspektive auf den Würfel angeben.

css

				transform-style: preserve-3d;	
-moz-transform-style: preserve-3d;	
-webkit-transform-style: preserve-3d;

perspective: 5000px;
-moz-perspective: 5000px;
-webkit-perspective: 5000px;

Zu guter Letzt werden alle Seiten anhand der X-, Y- oder Z-Achse ausgerichtet. Zu beachten ist, dass der Wert in translateZ die Hälfte der Breite/Höhe betragen soll. In meinem Fall ist der 3D Würfel 300px breit und hoch. Daher der Wert 150.

css

				div#cube div.cube-face.front {
	transform: rotateY(0deg) translateZ(150px);
}
div#cube div.cube-face.back {
	transform: rotateY(180deg) translateZ(150px);
}
div#cube div.cube-face.right {
	transform: rotateY(90deg) translateZ(150px);
}
div#cube div.cube-face.left {
	transform: rotateY(-90deg) translateZ(150px);
}
div#cube div.cube-face.top {
	transform: rotateX(90deg) translateZ(150px);
}
div#cube div.cube-face.bottom {
	transform: rotateX(-90deg) translateZ(150px);
}

Der Beitrag 3D Würfel mit CSS erstellen – so geht’s erschien zuerst auf revilodesign.

CSS Table Header Fixed – thead einer Tabelle fixieren

Oliver Götze — Wed, 07 Feb 2018 16:50:45 +0000

In diesem Blogeintrag zeige ich Euch wie Ihr nur mit CSS den Header einer HTML Tabelle fixieren könnt ohne dass sich dieser beim scrollen mitbewegt. Dies macht gerade dann Sinn, wenn man Tabellen mit vielen Einträgen übersichtlich darstellen möchte ohne die Webseite unnötig in die Länge zu ziehen.

Beispiel einer Tabelle mit fixierten thead ohne Javascript

HTML
CSS

HTML

									
	
		
			
				Name
				Vorname
				Beruf
				Alter
			
		
		
			
				Müller
				Marie
				Künstlerin
				26
			
			
				Meier
				Stefan
				Chemiker
				52
			
			
				Schmidt
				Sabrine
				Studentin
				38
			
			
				Mustermann
				Max
				Lehrer
				41
			
			
				Müller
				Marie
				Künstlerin
				26
			
			
				Meier
				Stefan
				Chemiker
				52
			
			
				Schmidt
				Sabrine
				Studentin
				38
			
			
				Mustermann
				Max
				Lehrer
				41
			
			
				Müller
				Marie
				Künstlerin
				26
			
			
				Meier
				Stefan
				Chemiker
				52
			
			
				Schmidt
				Sabrine
				Studentin
				38
			
			
				Mustermann
				Max
				Lehrer
				41

CSS

									div.wrapper {
	padding: 20px;
	display: block;
	overflow: auto;
}
table.scroll {
	width: 100%;
	background-color: #fff;
}
table.scroll thead {
	width: 100%;
	background: #5dd39e;
}
table.scroll thead tr:after {
	content: '';
	overflow-y: scroll;
	visibility: hidden;
}
table.scroll thead th {
	flex: 1 auto;
	display: block;
	color: #fff;
}
table.scroll tbody {
	display: block;
	width: 100%;
	overflow-y: auto;
	height: auto;
	max-height: 200px;
}
table.scroll thead tr,
table.scroll tbody tr {
	display: flex;
}
table.scroll tbody tr td {
	flex: 1 auto;
	word-wrap: break;
}
table.scroll thead tr th,
table.scroll tbody tr td {
	width: 25%;
	padding: 5px;
	text-align-left;
	border-bottom: 1px solid #eee;
}

Name	Vorname	Beruf	Alter
Müller	Marie	Künstlerin	26
Meier	Stefan	Chemiker	52
Schmidt	Sabrine	Studentin	38
Mustermann	Max	Lehrer	41
Müller	Marie	Künstlerin	26
Meier	Stefan	Chemiker	52
Schmidt	Sabrine	Studentin	38
Mustermann	Max	Lehrer	41
Müller	Marie	Künstlerin	26
Meier	Stefan	Chemiker	52
Schmidt	Sabrine	Studentin	38
Mustermann	Max	Lehrer	41

Sicherlich gibt es noch andere Möglichkeiten den thead optisch zu fixieren. Aber die meisten sind HTML-Technisch gesehen nicht das gelbe vom Ei. Daher habe ich mit ein wenig Recherche und Eigengrips diese paar Zeilen CSS zusammengefasst.

So erstellt Ihr eine Tabelle mit einem festen Header

Eigentlich müsst Ihr nichts anderes tun, als eine Tabelle mit thead und tbody und den entsprechenden Rows zu erstellen. Anschließend kopiert Ihr den folgenden Code in Eure stylesheets:

css

				table.scroll thead tr:after {
	content: '';
	overflow-y: scroll;
	visibility: hidden;
}
table.scroll thead th {
	flex: 1 auto;
	display: block;
}
table.scroll tbody {
	display: block;
	width: 100%;
	overflow-y: auto;
	height: auto;
	max-height: 200px;
}
table.scroll thead tr,
table.scroll tbody tr {
	display: flex;
}
table.scroll tbody tr td {
	flex: 1 auto;
	word-wrap: break;
}

Anschließend solltet Ihr in der Tabelle scrollen können ohne das sich der Header aus dem Sichtbereich bewegt. Die Höhe könnt ihr in der Klasse table.scroll tbody anpassen.

Der Beitrag CSS Table Header Fixed – thead einer Tabelle fixieren erschien zuerst auf revilodesign.

Scale SVG Path – Wie man ein SVG skaliert

Oliver Götze — Tue, 16 Jan 2018 17:30:15 +0000

Auf meiner Startseite habe ich eine SVG-Animation erstellt. Das Problem daran, dass sich ein svg, bestehend aus path, circle, rects usw. nicht so einfach skalieren und damit in der Responsive Ansicht darstellen lässt.

Nun hätte man die Möglichkeit gehabt für die einzelnen Ansichten ein eigenes SVG mit der entsprechenden Größe zu erstellen. Da ich aber ein fauler Mensch bin habe ich nach einer dynamischen Variante gesucht, die das svg skaliert.

So skalierst du dein svg mit path

Im folgenden findet Ihr ein .css Code, den Ihr eurem svg in der .css Datei hinzufügen solltet. Dadurch wird das svg, samt der path, rects etc., anhand der Browserweite, skaliert.

css

				width: 100vw;
height: (height/width * 100)vw;
max-height: 100vh;
max-width: (width/height * 100)vh;

Der Beitrag Scale SVG Path – Wie man ein SVG skaliert erschien zuerst auf revilodesign.

CSS box-sizing – Vorteile des Styles

Oliver Götze — Tue, 02 Jan 2018 15:08:06 +0000

Normalerweise gibt man einen Element eine Breite an und positioniert in diesem weitere Elemente oder Texte. Fügt man diesem Element aber die Styles margin, padding oder einen border hinzu, dann verändert sich die Breite, je nachdem welche Werte eingeben wurden. Das ist gerade für Anfänger relativ lästig. Was sage ich da – nicht nur für Anfänger.

Elemente feste Breite geben dank box-sizing

Seit es box-sizing gibt können wir Elementen eine feste Breite geben und das Element verändert sich nicht mehr. Es verändert nicht seine Breite und ich muss ehrlich sein – ich bin so dankbar für diese Möglichkeit und nutze es überall. Ich wende box-sizing mittlerweile generell auf alle Elemente an. Und so sieht der Code dann aus. WordPress Dummy htpasswd

css

				* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

Der Beitrag CSS box-sizing – Vorteile des Styles erschien zuerst auf revilodesign.

Pulsierendes Div erstellen ohne Javascript

Oliver Götze — Wed, 12 Oct 2016 06:33:41 +0000

Ein Button wird nicht immer sofort erkannt oder man möchte einfach ein Element auf der Webseite schön animieren. Egal für welchen Anwendungszweck – Durch ein pulsierendes Div oder ein pulsierender Button wird die Aufmerksamkeit unweigerlich zu dieser Position auf dem Bildschirm gelenkt, denn Bewegung zieht unsere Aufmerksamkeit auf sich. Weitere schöne CSS Buttons Ideen.

Pulsierende div Animation – Beispiel

Im Folgenden finden Sie ein Beispiel für eine pulsierende Animation eines Div:

HTML
CSS

HTML

CSS

									div.puls-container {
	width: 100%;
	height: 60px;
	position: relative;
	display: table;
	margin: 50px auto;	
}
div.puls {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border: 2px solid #5dd39e;
	display: table;
	background: transparent;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -15px 0 0 -15px;
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite; 
	opacity: 0.0;
}
@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {-webkit-transform: scale(3.2, 3.2); opacity: 0.0;}
}
div.puls-middle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	background: #ff1654;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -10px 0 0 -10px;
	z-index: 99;
}

Sicherlich – Nicht jeder mag das. Das sollte einem klar sein. Daher empfehle ich auch immer nur eine dezente Verwendung dieser Animation – ebenso SVG Animationen. Nicht das man ein Button wie blinken lässt, denn das schreckt eher ab. Eine angemessene Dosis und der Effekt erzielt seine Wirkung.

Das schöne ist, dass für den Effekt kein Javascript notwendig ist. Einfach folgende Zeile in die .css Datei packen und anpassen.

css

				yourClass {
	width: 14px;
	height: 14px;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border: 2px solid #ffaf04;
	display: block;
	position: absolute;
	left: -4px;
	top: -4px;
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite; 
	opacity: 0.0
}
@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

Der Beitrag Pulsierendes Div erstellen ohne Javascript erschien zuerst auf revilodesign.

Div Bounce Effekt – springendes Element mit CSS

Oliver Götze — Wed, 12 Oct 2016 06:32:52 +0000

Ein springendes oder bouncendes Div sieht man heutzutage relativ oft auf neueren Webseiten. Vor allem auf Webseiten die ein Fullscreen Image auf der Startseite haben. Oft sieht man dann mittig am unteren Bildschirmrand einen Pfeil der leicht auf und ab springt, um den Besucher dazu zu animieren, mit der Maus nach unten zu scrollen. Leider müssen WordPress Webdesigner solche Kleinigkeiten einbauen, da es wirklich Leute gibt, die nicht intuitiv wissen, dass sie scrollen sollen oder können.

HTML
CSS

HTML

CSS

									.yourClass {
	position: absolute;
	left:50%;
	bottom:30px;
	margin-top:-25px;
	margin-left:-25px;
	height:50px;
	width:50px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-webkit-animation:bounce 1s infinite;
	z-index: 999;
	font-size: 50px;
	background-color: #5dd39e;
}
@-webkit-keyframes bounce {
	0%       { bottom:25px; }
	25%, 75% { bottom:35px; }
	50%      { bottom:40px; }
	100%     { bottom:20px; }
}

Zum Glück ist diese Animation, ebenso wie das pulsierende Div, nur ein kleiner .css Befehl der ohne Javascript funktioniert.

So erstellst Du ein Bounce Effekt mit css

Kopiert einfach die folgenden Zeilen und fügt sie an entsprechender Stelle in Eure style.css ein. Wie immer gilt – Weniger ist manchmal mehr.

css

				.yourClass {
	position:fixed;
	left:50%;
	bottom:30px;
	margin-top:-25px;
	margin-left:-25px;
	height:50px;
	width:50px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-webkit-animation:bounce 1s infinite;
	z-index: 999;
	font-size: 50px;
	background-color: #F36725;
}
@-webkit-keyframes bounce {
	0%       { bottom:25px; }
	25%, 75% { bottom:35px; }
	50%      { bottom:40px; }
	100%     { bottom:20px; }
}

Der Beitrag Div Bounce Effekt – springendes Element mit CSS erschien zuerst auf revilodesign.

Smooth background-image Animation

Oliver Götze — Wed, 12 Oct 2016 06:31:41 +0000

Ein Kunde von mir wollte auf der Startseite ein Fullscreen-Image positioniert haben auf dem mittig ein weißer Text zu lesen sein sollte. Kein Problem – sollte er bekommen. Irgendwann erhielt ich dann den Anruf, dass es ihm zu langweilig sei und er gerne etwas Bewegung haben möchte. Wie also animiert man ein Bild?

Smooth Background Animation mit -webkit-keyframes

HTML
CSS

HTML

CSS

									div#image {
	width: 90%;
	height: 200px;
	overflow: hidden;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	margin: 50px 5%;
}
div#image-wrapper {
	background-image: url('http://revilodesign.de/media/thailand-maya-beach-longtail.jpeg');
	background-color: #F1F1F1;
	background-repeat: no-repeat;
	background-size: 140%;
	width: 100%;
	height: 100%;
	-webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	position: relative;
}
@-webkit-keyframes MOVE-BG {
	from {
		background-position: 0% 0%;
	}
	to { 
		background-position: 100% 0%;
	}
}

Dank der -webkit-keyframes hatte ich schnell die passende Lösung. Ich ließ das Bild immer wieder von links nach rechts bewegen. Somit hatte der Kunde seine gewünschte Bewegung auf der tollen WordPress Webseite.

css

				.yourClass {
	background-color: #F1F1F1;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	width: 100%;
	-webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	display: inline-block;
}
@-webkit-keyframes MOVE-BG {
	from {
		background-position: 0% 0%
	}
	to { 
		background-position: 100% 0%
	}
}

Der Beitrag Smooth background-image Animation erschien zuerst auf revilodesign.

Bilder Zoom Effekt beim Hover

Oliver Götze — Tue, 24 Mar 2015 15:23:38 +0000

Ein schöner Hover Effekt bei Bildern ist das elegante zoomen. Dies erzeugt einen dezenten aber wirkungsvollen Effekt, denn oft ist es nicht ersichtlich, dass sich hinter einem Bild ein Link oder beispielsweise eine Fancybox versteckt. Daher ist es sinnvoll Bilder, ebenso wie Links, anderweitig zu kennzeichnen. Entweder durch eine andere Textfarbe oder eben durch den Hover Zoom Effekt bei Bildern.

HTML
CSS

HTML

CSS

									.scale {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
.scale:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}
/* TRANSITION */
.transition {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;				
}
article div.box-wrapper {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding: 20px;
}
article div.box-wrapper div.box {
	width: 33%;
	height: auto;
	overflow: hidden;
	position: relative;
	display: inline-block;
}
article div.box-wrapper div.box:hover {
	z-index: 999;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
article div.box img {
	width: 100%;
	height: auto;
}

Fügt die folgenden Styles in Eure .css Datei.

css

				div.image-class img {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

Nun fügt Ihr noch den Hover hinzu, der das Bild skaliert. Der Wert 1.2 kann dabei nach belieben geändert werden.

css

				div.image-class:hover img {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

Für einen eleganten Zoom Effekt fügt Ihr noch folgende Styles hinzufügen:

css

				div.image-class img {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

Ihr könnt das Bild aber auch nur in eine Richtung skalieren. Gibt dazu anstelle von scale entweder scaleY oder scaleX an.

Vertikaler Zoom

css

				-webkit-transform: scaleY(1);
-webkit-transform: scale(1.12);

css

				-webkit-transform: scaleX(1);
-webkit-transform: scale(1.12)

Wer die Styles in seine .css Datei kopiert hat, der sollte einen schönen Effekt beim Hover auf das Bild erhalten. Ich füge aber meistens noch ein Element um das Bild herum ein, welches ich die Eigenschaften overflow:hidden gebe, damit das Bild zwar skaliert wird, aber keine anderen Elemente überdeckt.

Und so könnte der komplette Code aussehen:

html

und die Styles

css

				div.image {
	width: 300px;
	height: 200px;
	overflow: hidden;
}
div.image img {
	width: 100%;
	height: auto;
	/* SCALE */
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	/* VERZÖGERUNG */
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
div.image img:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

HTML
CSS

HTML

CSS

									*.scale {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
*.scale:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}
/* TRANSITION */
*.transition {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;				
}
article div.box-wrapper {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	overflow: hidden;
}
article div.box-wrapper div.box {
	width: 33%;
	height: 150px;
	overflow: hidden;
	position: relative;
}
article div.box-wrapper div.box:hover {
	z-index: 999;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
article div.box img {
	width: 100%;
	height: auto;
}

HTML
CSS

HTML

CSS

									/* TRANSITION */
*.transition {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;				
}
/* ROTATE */
*.rotate {
	-moz-transform:  scale(1) rotate(0deg);
	-ms-transform: scale(1) rotate(0deg);
	-o-transform: scale(1) rotate(0deg);
	-webkit-transform: scale(1) rotate(0deg);				
	transform: scale(1) rotate(0deg);
}
*.rotate:hover {
	-moz-transform: scale(1.9) rotate(15deg);
	-ms-transform: scale(1.9) rotate(15deg);
	-o-transform: scale(1.9) rotate(15deg);
	-webkit-transform: scale(1.9) rotate(15deg);				
	transform: scale(1.9) rotate(15deg);
}
article div.box-wrapper {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	overflow: hidden;
}
article div.box-wrapper div.box {
	width: 33%;
	height: 150px;
	overflow: hidden;
	position: relative;
}
article div.box-wrapper div.box:hover {
	z-index: 999;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
article div.box img {
	width: 100%;
	height: auto;
}

Der Beitrag Bilder Zoom Effekt beim Hover erschien zuerst auf revilodesign.

CSS Tricks für die Webseite - Tutorials und Ideen – revilodesign.de

Die besten CSS Buttons – mit hover Animationen

CSS Sliced Button

Simple CSS Button Hover Effects

Menu button to Hamburger – styled & animated with pure CSS

CSS button hover

Flush button

Six Pure CSS Button Hover Animations

CSS Fizzy Button

CSS BUTTON HOVER

Candy Color Button Animation

Individuelles List Styling für ul li / ol li

Auflistungen individuell stylen – so geht’s

3D Würfel mit CSS erstellen – so geht’s

Das Grundgerüst des 3D Würfels

Mittels CSS den 3D Effekt erstellen

CSS Table Header Fixed – thead einer Tabelle fixieren

Beispiel einer Tabelle mit fixierten thead ohne Javascript

So erstellt Ihr eine Tabelle mit einem festen Header

Scale SVG Path – Wie man ein SVG skaliert

So skalierst du dein svg mit path

CSS box-sizing – Vorteile des Styles

Elemente feste Breite geben dank box-sizing

Pulsierendes Div erstellen ohne Javascript

Pulsierende div Animation – Beispiel

Div Bounce Effekt – springendes Element mit CSS

So erstellst Du ein Bounce Effekt mit css

Smooth background-image Animation

Smooth Background Animation mit -webkit-keyframes

Bilder Zoom Effekt beim Hover

So funktioniert der Bilder Zoom Effekt

Vertikaler Zoom

Horizontalen Zoom

Und so könnte der komplette Code aussehen: