Tipps und Tricks » kleine webmaster FAQ

ID #1827

CSS3 Box Generator zum testen (Demo beta)

Hallo,

da ich gerne neue Sachen ausprobiere, habe ich mich heute mit den neuen HTML5-Elementen input mit den Typen range und color befasst.

Leider ist es so, dass diese Eingabetypen nicht von allen browsern unterstützt werden, nur Chrome 28+ liefert ein brauchbares Egebnis. In Opera15 tauchen die Schieberegler auf aber ein Auswahlfeld für die Farben.

range und color nur im Chrome 28 sieht es so aus !

Dann tauchte die Frage auf, wie groß darf's denn sein ? Auf einem kleinen Monitor kann man kaum geeignete Boxen erstellen, wenn die schön groß sein sollen.

Also habe ich das Experiment gewagt, es extra groß zu machen. Ein Monitor mit 1920x1200 Pixeln sollte jeder webmaster haben. Dafür können die Boxen 1280px breit sein !

CSS3 Box Generator screenshot vom CSS3 Box Generator

Was ist da denn responsiv ? Also ist in dieser demo alles flüssig mit Prozentwerten aufgebaut, auf kleineren Bildschirmen werden die Eingabefelder untereinander angezeigt. Dann noch alles in Felder mit dem Element fieldset verpackt und mit legend überschrieben.

Es macht richtig Spaß damit herum zu spielen und es komme manchmal kuriose Sachen dabei heraus, oder vielleicht ein richtiges Kunstwerk oder ein Designerstück ?

Hier ein paar screenshots von meinen Versuchen:

orange mit etwas Übung durch box-shadow inset realisiert

Sonne runde Kreise mit radius von 300px möglich

Menu reines CSS - keine Grafik - Kombination von border-style groove mit border-shadow inset ohne blur erzeugt links 3 Streifen !

andere Beispiele werde ich noch auf meinen demo-Seiten als HTML-Seiten zusammen mit dem CSS-Code vorstellen.

feedback, Vorschläge zur Verbesserung und Meldungen über browser-Fehler erwünscht !

Der Generator ist ein Hobby-Experiment, eher gedacht für experimentelle Kunst im web mit HTML5 und CSS3 - es gibt genügend andere tools im Netz, die gleiches vielleicht sogar besser können, nur halt nicht so groß !

.
.
 

Tags: box, CSS3, demo, Generator, HTML5, webmaster

Verwandte Artikel:

Letzte Änderung des Tests: 2014-08-06 10:10
Autor: pipe

Leser: 4876 (2.57 pro Tag )


Revision: 1.0

Artikel bewerten

bisher bewertet
3.43 (81 ×)

1 2 3 4 5

Kommentar schreiben


Spam Schutz

..