unser Sonnensystem mit CSS3

Nix is aktuell mit Draussen sitzen, Grillen oder die ersten Sonnenstrahlen geniessen. Statt dessen ist Frieren angesagt, der Wind hier ist gerade so eisig, das ich mich kaum aus dem Haus wage.

Das gibt uns aber die Gelegenheit, es uns gemütlich zu machen und alte Bookmarks durchzuschauen. Alex Giron liefert uns etwas technisch Erfischendes zum Thema Sonne, unser Sonnensystem mit CSS3.

This is an attempt to recre­ate our solar sys­tem using CSS3 fea­tures such as border-radius, trans­forms and anim­a­tions. The res­ult is sur­pris­ing and quite interesting.

Sonnensystem-mit-css3

CSS3 Animation mit transition bei :hover

wenn wir den Stern, den ich gestern erstellt hatte (ein Stern mit-transformrotate) bei Maus.Over (:hover) etwas animieren wollen, genügen wenige Anpassungen mit der Eigenschaft transition:

<div class="css3_Sternanim">
<div class="css3_quadrat1"></div>
<div class="css3_quadrat2"></div>
</div>
.css3_Sternanim {
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.css3_Sternanim:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Fährt man nun mit der Maus über den Bereich des <div> beginnt der Stern sich für eine Sekunde um 360 Grad zu drehen.

text-drehung logo css3 mit transform-rotate

Viele Eigenschaften von CSS3 bzw. deren Nutzung sind auch für mich neu und ich muss mit den Werten und deren Auswirkungen spielen, um ein Gefühl dafür zu bekommen. Was passiert wo, wenn ich an dieser oder jener Schraube drehe und die Werte ändere?

CSS3
.de

 

Spass an der Sache, Geduld und Freude beim Ausprobieren ist angesagt. Nicht immer klappt auf Anhieb, was man möchte. Wie immer im Leben. Aber ich hoffe, das es auch hier die Übung macht! Wichtig ist, das man versteht, was passiert und warum das genau so passiert.

Hier das obige als Grafik eingebunden, damit man ÜBERALL sieht, was das Ergebnis sein SOLLTE.

logo-css3

logo-css3 als jpg-Datei

<link href='https://fonts.googleapis.com/css?family=Faster+One' rel='stylesheet' type='text/css'>
<style>
<!--
.css3name {
font-family: 'Faster One', cursive; font-weight: 400;
width: 350px;
height: 100px;
color: red; 
float:left;
position:relative;
padding:25px 5px 0px;
margin-left:10px;
}
.css3name .css3titel {
font-size:95px;
line-height:95px;
position:absolute; left:15px; top:5px;
}
.css3name .css3titel em {
display: block;
float: left;
color: blue;
position:absolute; right:-80px; top:16px; 
transform: rotate(-110deg);
-webkit-transform: rotate(-110deg); 
-moz-transform: rotate(-110deg);	
}
.css3name .css3tld { 
display:block;
color: black; 
font-size:35px; 
position:absolute; right:0px; top:30px;
transform: rotate(-110deg);
-webkit-transform: rotate(-110deg); 
-moz-transform: rotate(-110deg);	
}
-->
</style>

<div class="css3name">
<span class="css3titel">CSS<em>3</em></span>
<span class="css3tld">.de</span>
</div>

css3 – transform – rotate

Mit der Eigenschaft transform und dem Wert – rotate(mit Gradangabe) kann man ein Blockelement im Uhrzeigersinn (gradweise) drehen, Minuswerte ergeben eine Drehung gegen den Uhrzeigersinn. Eigentlich brauchte ich das bis heute (noch) nicht, aber es ist nun machbar.

CSS3.de Nachrichten, Information, Übungen und Beispiele zum Thema CSS3
CSS3.de Nachrichten, Information, Übungen und Beispiele zum Thema CSS3

 
 
 

<style>
<!--
div #css3transformrotate1, div #css3transformrotate {
width: 220px;
height: 120px;
border: 1px solid black;
font-size: 14px;
color: white;
background: red;
padding: 10px;
margin: 20px;
}
div #css3transformrotate {
background: blue;
transform: rotate(20deg);
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari, Chrome */
-moz-transform: rotate(20deg); /* Firefox */
-o-transform: rotate(20deg); /* Opera */
}
--></style>
<div id="css3transformrotate1"><strong>CSS3.de</strong> <span>Nachrichten, Information, Übungen und Beispiele zum Thema CSS3</span></div> 
<div id="css3transformrotate"><strong>CSS3.de</strong> <span>Nachrichten, Information, Übungen und Beispiele zum Thema CSS3</span></div>