CSS Unterelementen unterschiedliche Farben geben

saschafiedler

Hallo.

Ich versuche gerade diese CSS-Animation an meine Bedürfnisse anzupassen. Zum größten Teil ist mir das auch schon gelungen, jedoch wollte ich jedem Würfel eine andere Farbe geben.
Wie ihr sehen könnt, haben derzeit alle Würfel die Farbe #ff4d53. Die anderen Würfel sollen die Farben #a1c7e4; #fbd435; #62a546, #f56700 und #fafafa bekommen.
Nun meine Frage, kann ich das irgendwie abkürzen, ohne dass ich für jeden Würfel auch noch einmal die Animation und alles neu schreiben muss?

edit: Kann ich jeden Würfel auch mit einem Link versehen?

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TheaterFABRIK</title>
<style type="text/css">


/* Position and size of the cubes */
.cube {
position: relative;
top: 120px;
left: 65%;
}


.cube p {
line-height: 10px;
font-size: 11px;
}


.cube h2 {
font-size: 11px;
font-weight: bold;
}


.cube.two {
top: 190px;
left: 65%;
margin-left: -120px;
}


.cube.three {
top: 260px;
left: 65%;
margin-left: -240px;
}


.cube.four {
top: 330px;
left: 65%;
margin-left: -360px;
}


.cube.five {
top: 400px;
left: 65%;
margin-left: -480px;
}


.cube.six {
top: 470px;
left: 65%;
margin-left: -600px;
}


.rightFace,
.leftFace,
.topFace div {
padding: 5px;
width: 90px;
height: 90px;
}


.rightFace,
.leftFace,
.topFace {
position: absolute;
}




/* Color of the cubes */
.cube:hover .rightFace,
.cube:hover .leftFace,
.cube:hover .topFace div {
background-color: #ff4d53;
}


.cube:hover .rightFace:hover,
.cube:hover .leftFace:hover,
.cube:hover .topFace:hover div {
background-color: #ce3d42;
}




/* Animation of the cubes */
.leftFace {
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
background-color: #ccc;
}


.rightFace {
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
background-color: #ddd;
left: 100px;
}


.topFace div {	
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
background-color: #eee;
font-size: 0.862em;
}


.topFace {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
top: -79px;
left: 50px;	
}


/* Optional WebKit animations for the cubes*/


.cube {
-webkit-transition: -webkit-transform 1s linear;
}


.cube:hover {
-webkit-transform: translate(101px, 57.5px);
}
</style>
</head>
<body>
<div class="cube one">
			<div class="topFace"><div>
				<h2>Kontakt</h2>
				<p>Fragen, Wünsche, Anmerkungen? Schreibe sie uns!</p>
			</div></div>
			<div class="leftFace">
				<h2>Kontakt</h2>
				<p>Fragen, Wünsche, Anmerkungen? Schreibe sie uns!</p>
			</div>
			<div class="rightFace">
				<h2>Kontakt</h2>
				<p>Fragen, Wünsche, Anmerkungen? Schreibe sie uns!</p>
			</div>			
</div>
		
<div class="cube two">
			<div class="topFace"><div>
				<h2>Theatertage</h2>
				<p>Deine Schultheatergruppe braucht Unterstützung? Kein Problem!</p>
			</div></div>
			<div class="leftFace">
				<h2>Theatertage</h2>
				<p>Deine Schultheatergruppe braucht Unterstützung? Kein Problem!</p>
			</div>
			<div class="rightFace">
				<h2>Theatertage</h2>
				<p>Deine Schultheatergruppe braucht Unterstützung? Kein Problem!</p>
			</div>			
		</div>
		
<div class="cube three">
			<div class="topFace"><div>
				<h2>Werkräume</h2>
				<p>Du hast leider keine Zeit für einen Kurs? Wie wäre es mit einem Werkraum?</p>
			</div></div>
			<div class="leftFace">
				<h2>Werkräume</h2>
				<p>Du hast leider keine Zeit für einen Kurs? Wie wäre es mit einem Werkraum?</p>
			</div>
			<div class="rightFace">
				<h2>Werkräume</h2>
				<p>Du hast leider keine Zeit für einen Kurs? Wie wäre es mit einem Werkraum?</p>
			</div>			
		</div>
		
<div class="cube four">
			<div class="topFace"><div>
				<h2>Ganzjahreskurse</h2>
				<p>Möchtest du auch Theater machen? Dann komme zu unseren Ganzjahreskursen.</p>
			</div></div>
			<div class="leftFace">
				<h2>Ganzjahreskurse</h2>
				<p>Möchtest du auch Theater machen? Dann komme zu unseren Ganzjahreskursen.</p>
			</div>
			<div class="rightFace">
				<h2>Ganzjahreskurse</h2>
				<p>Möchtest du auch Theater machen? Dann komme zu unseren Ganzjahreskursen.</p>
			</div>			
		</div>
		
<div class="cube five">
			<div class="topFace"><div>
				<h2>Stücke</h2>
				<p>Hier findest du unsere aktuellen Stücke</p>
			</div></div>
			<div class="leftFace">
				<h2>Stücke</h2>
				<p>Hier findest du unsere aktuellen Stücke</p>
			</div>
			<div class="rightFace">
				<h2>Stücke</h2>
				<p>Hier findest du unsere aktuellen Stücke</p>
			</div>			
		</div>
		
<div class="cube six">
			<div class="topFace"><div>
				<h2>Wir</h2>
				<p>Wer sind wir? Was machen wir? Was wollen wir?</p>
			</div></div>
			<div class="leftFace">
				<h2>Wir</h2>
				<p>Wer sind wir? Was machen wir? Was wollen wir?</p>
			</div>
			<div class="rightFace">
				<h2>Wir</h2>
				<p>Wer sind wir? Was machen wir? Was wollen wir?</p>
			</div>			
		</div>


</div>
</body>
</html>

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

alchymyth

was hat das mit wordpress zu tun?

ausser dass du evtl das mal spaeter in ein wordpress theme einbauen willst?

normal css, am beispiel des zweiten cubes:

Code

.two .leftFace { background-color: pink; }
.two .rightFace { background-color: pink; }
.two .topFace div { background-color: purple; }
 
.cube.two:hover .rightFace,
.cube.two:hover .leftFace,
.cube.two:hover .topFace div {
background-color: #ffee53;
}
 
.cube.two:hover .rightFace:hover,
.cube.two:hover .leftFace:hover,
.cube.two:hover .topFace:hover div {
background-color: orange;
}

Alles anzeigen

NB: mit einem link zur seite brauchst du kein CSS posten - das kann ganz einfach mit freien web-hilfen wie zB firebug oder so ausgelesen werden.

edit:
links muessen im html-code mit eingebaut werden.

saschafiedler

Dank für die Antwort.
Wegen des CSS: Ich wollte euch die Arbeit ersparen.
Wegen des Themas: Dann müsste ja alles aus dieser Kategorie raus - Wordpress ist ein CMS. Ich fand das Forum einfach bisher sehr hilfreich, da dachte ich mir, dass man auch das beantworten wird.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS Unterelementen unterschiedliche Farben geben

Jetzt mitmachen!