Image Gallery – pure css (no javascript)

Hallo zusammen, eine Image Gallery mit reinem CSS ohne jegliches JavaScript – geht das? Ja – das ist umsetzbar 😉 Bei Codepen habe ich eine solche erstellt http://codepen.io/fastmick/pen/WQJzRZ

Text Bubbles mit Pfeilen

Pseudo Elemente kann man ja für unterschiedlichste Dinge verwenden. Bei diesem Beispiel wird das ::before-Element zur Platzierung von Pfeilen bei Text-Bubbles genutzt, um das ganze flexibel und ohne Grafiken gestalten zu können. Mit Hilfe von SASS kann man die Pfeilgröße sowie Hintergrund- und Textfarbe schnell und einfach durch Variablen-Anpassungen „customizen“. http://codepen.io/fastmick/pen/RWMoRz

record player – pure css

Hi, hier die nächste kleine Spielerei – ein Plattenspieler mit purem CSS erstellt http://codepen.io/fastmick/pen/GpMmoE

analog clock made with pure css and a little bit javascript ;-)

Hier mal ne kleine Spielerei 😉 Ne Uhr erstellt mit purem CSS – nein, stimmt nicht so ganz – ein wenig javascript war noch nötig 😉 Hier das Ergebnis http://codepen.io/fastmick/pen/pjRaML css ist schon funny 😉  

Responsive Grid

In den nächsten Monaten müssen wir im Büro unsere Shops (plus.de und gartenxxl.de) so langsam auf „responsive“ umbauen, oder besser gesagt „neu“ bauen. Ein reiner Umbau würde zuviel Zeit in Anspruch nehmen. Eine mobile Version gibt’s ja schon, aber jetzt wird es komplett responsive – spannende Aufgabe Aus diesem Grund brauche ich ein Responsive Grid […]

Responsive Design Check

Natürlich gibt es schon genug Online-Tools und Browser-Plugins zum testen von Responsive-Sites. Trotzdem habe ich mich hingesetzt und selber ein Online-Testtool geschrieben – nach dem Motto -> ohne Weiterbildung geht nix 😉 Hier das Ergebnis: http://responsive-check.css-toolbox.de/

Pseudo-Elemente ::before und ::after

Heute geht es um die Pseudo-Elemente ::before und ::after Für welchen Zweck kann man diese nutzen? Die Antwort lautet -> Für die unterschiedlichsten Anwendungsfälle 😉 Bei diesem Beispiel wollen wir eine Banderole erstellen (siehe folgender Screenshot).

css test suite

In meinem Arbeitsalltag kommt es immer wieder vor dass ich mal eben schnell testen muss wie eine Schriftart in einer bestimmtem Größe auf einer bestimmten Hintergrundfarbe wirkt. Dazu immer Photoshop zu starten und dann zu testen ging mir ziemlich auf die Nerven. Also hab ich mich hingesetzt und überlegt eine Test-Suite zu entwickeln. Bei der […]

Farbverläufe in Kombination mit “rounded corners”

Hier ein paar Beispiele wie man nette Teaser auch ohne Grafiken erstellen kann. Alle Teaser basieren auf dem gleichen HTML – Anpassungen erfolgen alle per CSS http://html5-css3.css-toolbox.de/#rounded-corners-gradient

Infos zu HTML5 und CSS3

Ich habe mal angefangen, einiges zu den Themen HTML5 und CSS3 auf übersichtliche Weise zu erläutern. Unter anderem werden Farbverläufe, rounded Corners, Pseudoelemente wie :first-child, :last-child etc. behandelt. Ein paar Dinge habe ich fertig. Die Seite soll natürlich weiter wachsen. Nach und nach werde ich weitere Artikel einstellen. http://html5-css3.css-toolbox.de/

Previous Posts