Google Material Design Button Effekt

Jemals gefragt, wie das mit den Button von Google Material Design funktioniert, dass abhängig von der Position des Klicks die Animation ausgeführt wird? Im Grunde gar nicht so kniffelig. Man nehme ein Button-Element, füge ein Element als Container und ein weiteres für die Animation selbst hinzu, dann noch CSS3 und ein wenig Javascript und schon ist die der Button reaktiv:

Pure CSS Off-Canvas Navigation

Mit Hilfe des CSS3 Selektor :target lässt sich eine Off-Canvas Navigation mit reinem CSS, komplett ohne Javascript realisieren. Einziges Manko: Funktional wird es zwar ab dem Internet Explorer 9, die Animationen jedoch erst ab Internet Explorer 10 unterstützt.

Beschreibung

Im Grundzustand wird die Navigation mit dem negativen Wert der eigenen Breite aus dem Sichtbereich des Browsers geschoben.

CSS3: Selector :target

Der CSS3 Selector :target hat ein paar interessante use cases. Einer ist, dass man Ankerziele hervorhebt. (http://labs.jooon.de/css/selectors/target/) Das :target macht nichts anderes als zu checken, ob die URL ein Hashwert enthält und dazu ein passende ID existiert. mit dem :target wird dann das entsprechende Element angesprochen. :target dient also als eine Art "dynamischer" Selector für IDs. Neben dem Hervorheben von Anchorlinks gibt es noch weitere spannende Anwendungsmöglichkeiten. So ist es beispielsweise möglich Elemente rein durch CSS und HTML ein und auszublenden, ohne dass sie direkt verbunden sind.

Volle Power der CSS3 Selektoren

Die Webwelt geht mit HTML5 und CSS3 eine sehr interessante Richtung, die uns Webdesignern und Webentwicklern die Arbeit ungemein erleichtern wird. Vor allem die ausgeklügelten Selektoren, die uns durch CSS3 zur Verfügung gestellt werden, bieten ein riesen Potential unser Markup zu optimieren. Wesentlich weniger Klassen müssen verteilt werden und Elemente können je nach Ihren Eigentschaften angesprochen werden. Die Bandbreite an Möglichkeiten ist enorm.

CSS3 für den Internet Explorer 6-8 mit PIE

CSS3 ist eine feine Sache und vereinfacht einige Aufgaben des Web Entwicklers sehr. Doch leider mag der Internet Explorer 6 bis einschließlich 8 die CSS3 Features "border-radius", "box-shadow", "border-image", "multiple background images" und "linear-gradient as background image" nicht. PIE (progressive internet explorer) setzt hier an und erweitert den Internet Explorer 6 bis 8 um die entsprechenden CSS3 Funktionen. Ausführliche Informationen sind auf der Projektwebsite zu finden: css3pie.com

Markierten Text mittels CSS3 gestalten

CSS3 bietet die Möglichkeit mittels Pseudo-Elementen markierten Text zu gestalten:
::selection {
background:#000;
color:#fff;
}
Safari (ab 3.1), Opera (ab 9.5) und Chrome (ab 2.0) verstehen dies bereits. Mozilla kann man dazu bewegen dies auch zu tun indem man den Prefix -moz- voransetzt:
::-moz-selection {
background:#000;
color:#fff;
}

Time Stamper (beta)

Klein aber fein: "Wie ist denn der Time Stamp für den 13.09.2010 - 15:00 Uhr?" - So fing es an und Time Stamper ist daraus entstanden. Ein mini Tool, dass nicht mehr kann als einen UNIX Time Stamp auszugeben. Es ist schnell und minimalisiert, und sieht dabei noch gut aus.


(html & css: John, Code: Johannes)
Viel Spaß damit,
Johannes (Gastpost Enjoy the Code Side of Life ;))