Schlagwort-Archiv: 3D

Surface Studio – Ein iMac, nur in geil!

Wenn ich mich richtig erinnere, habe ich ja schon meine Beitrag über den letzten Oktober Event von Microsoft mit einer kleinen Anspielung auf Apple unter Steve Jobs begonnen. Und irgendwie hat Microsoft auch in diesem Jahr wieder dieses “one more thing” zu bieten gehabt. Während man eigentlich ja auf eine Cortana-Variante von Amazon Echo gewartet hat, oder auch auf das Surface Phone, gab es das Surface Studio:

Und was soll man sagen, das Surface Studio erinnert tatsächlich ein wenig an den guten alten iMac – aber hat eben all die Dinge zu bieten, die man bei Apple nicht mehr auf die Beine stellen kann. Scheinbar ist dort mit Steve Jobs eben wieder die Kreativität verschwunden und hat stattdessen bei Microsoft Station gemacht. In erster Linie ist das Surface Studio natürlich so etwas wie der Himmel für Kreative – auch wenn nicht wenige von ihnen natürlich ihrem iMac die Treue halten werden, wie Fans der Postkutsche weiter auf Pferdestärken setzten, während andere mit der Eisenbahn zu fahren begannen.

Passenderweise nennt Microsoft seine Veränderungen ja dann auch Creators Update. In dessen Mittelpunkt stand zweifellos 3D, mit dem man selbst das viel gescholtene Paint zu einem kleinen – kostenlosen – Highlight werden lässt.

Dankenswerterweise hat man bei dem Event übrigens auch eine kostengünstige Alternative zur Hololens vorgestellt. Letztere mag vielleicht der Hammer sein, aber ein – wenn ich mich recht erinnere – gut 5.000 € teurer Hammer. Die von diversen Herstellern als Alternative angebotene VR Brille soll ab 299 $ zu haben sein und ermöglicht dank Microsoft einen Ausflug in eine virtuelle Welt, wie wir sie bisher tatsächlich nur aus Science fiction-Filmen kannten.

Insgesamt muss ich mal wieder sagen, dass die Veranstaltung mein Fanherz wieder hat höher schlagen lassen. Auch wenn ich ehrlich gesagt natürlich so ganz im Geheimen dann doch auf ein Surface Phone gehofft habe. 🙂

CSS: Button im anklickbaren 3D

Was wäre das Internet ohne Buttons? Mit Hilfe von ein wenig CSS lässt sich relativ einfach ein Button erstellen, der nicht nur nach 3D aussieht, sondern beim Klick mit der Maus auch einen realitätsnahen Effekt ausführt.

drueckmich

Button in 3D-Form

Um den 3D-Effekt zu erzeugen und beim Klick auf den Button eine Animation, ist folgendes CSS notwendig. Was hier übrigens fehlt ist eine Pseudoklasse :hover für den Button, die angezeigt wird wenn der User mit der Maus darüber fährt. Das ist aber reines Copy&Paste mit ein paar kleinen Anpassungen.

body {
 font-family:Verdana, Geneva, Tahoma, sans-serif;
 font-size: 24px;
 /* Perspektive für den 3D-Effekt des Buttons */
 -webkit-perspective: 400;
}
.button {
 /* Definition eines normalen Buttons in Form 
 eines Kastens mit Text als Inhalt */
 display: inline-block;
 text-decoration: none;
 color: #fff;
 font-weight: bold;
 padding: 20px 50px;
 border: 1px solid #DE9517;
 margin:100px;
 
 /* Ecken werden abgerundet */
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 
 /* Gradienten (erstellt z.B. mit http://css3generator.de/gradients/ */
 background: linear-gradient(top, #FC6513 0%, #F7C413 49%, #F7C413 100%); 
 background: -moz-linear-gradient(top, #FC6513 0%, #F7C413 49%, #F7C413 100%);
 background: -webkit-linear-gradient(top, #FC6513 0%, #F7C413 49%, #F7C413 100%);
 background: -ms-linear-gradient(top, #FC6513 0%, #F7C413 49%, #F7C413 100%);
 background: -o-linear-gradient(top, #FC6513 0%, #F7C413 49%, #F7C413 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FC6513, endColorstr=#F7C413,GradientType=1);
 
 /* Schatten für den Button */
 -webkit-box-shadow: 0px 10px 0px #F2CA3F, 0px 12px 20px rgba(0,0,0,.4);
 -moz-box-shadow: 0px 10px 0px #F2CA3F, 0px 12px 20px rgba(0,0,0,.4);
 box-shadow: 0px 10px 0px #F2CA3F, 0px 12px 20px rgba(0,0,0,.4);
 
 /* 3d Effekt hinzufügen */
 -webkit-transform: rotateX(5deg);
}
.button:active {
 background: linear-gradient(top, #FC6513 0%, #F7C413 25%, #F7C413 100%);
 background: -moz-linear-gradient(top, #FC6513 0%, #F7C413 25%, #F7C413 100%);
 background: -webkit-linear-gradient(top, #FC6513 0%, #F7C413 25%, #F7C413 100%);
 background: -ms-linear-gradient(top, #FC6513 0%, #F7C413 25%, #F7C413 100%);
 background: -o-linear-gradient(top, #FC6513 0%, #F7C413 25%, #F7C413 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FC6513, endColorstr=#F7C413,GradientType=1);
/* Animationseffekt beim Anklicken (setzt die Werte für 'transform' zurück */
 -webkit-transform: translate(0);
 -moz-transform: translate(0);
 transform: translate(0);
}

Den Farbverlauf des Buttons habe ich, wie im Kommentar angedeutet, nicht selbst erstellt. Dafür gibt es im Web reichlich Generatoren, bei denen man nur Anfangs- und Endwert eingeben muss, manchmal auch einen Übergangswert wie zum Beispiel bei jenem des CSS3Generators.

Live ansehen kann man sich den Effekt 3D Button in Aktion.