Mit der CSS3-Counter-Eigenschaft ist es möglich, ein beliebiges HTML-Element mit einer Nummerierung zu versehen. In den meisten Fällen reicht die einfache Nummerierung mit dem OL-Element zwar aus; allerdings sind die Gestaltungsmöglichkeiten hierbei arg eingeschränkt. Denn Nummerierung und dazugehöriger Inhalt des Listenpunktes können nur gemeinsam gestaltet werden – in Kombination mit der Counter-Eigenschaft geht es jedoch auch anders. Liste wie gewohnt per HTML auszeichnen Das...
Die Gestaltung von Websites mit CSS ist ein mitunter langwieriges Unterfangen. Sind neue Eigenschaft ins Stylesheet geschrieben, muss die Seite neu geladen werden, um das Ergebnis sehen zu können. Das ständige Neuladen und den damit verbundenen Wechsel der Fenster oder Tabs kann man sich mit geeigneten Tools jedoch schenken – zum Beispiels mit CSSrefresh! CSSrefresh CSSrefresh ist ein kleiner Helfer, der das Neuladen einer...
Es gibt unüberschaubar viele jQuery-Plugins, mit denen man durch Inhalte wie Fotos mehr oder weniger elegant navigieren kann. Dass wir mit BookBlock und Windy zwei weitere vorstellen, liegt an den schicken Animationseffekten und den Einstellungsmöglichkeiten, mit denen die Plugins sehr unterschiedlich und individuell eingesetzt werden können. Die beiden Plugins von Codrops verwenden zur Animation entsprechende CSS3-Eigenschaften. Die Auszeichnung der Inhalte erfolgt über HTML, welches...
Stylesheets lassen sich bislang auf zweierlei Wege in ein HTML-Dokument einbinden: entweder im HTML-Head (über das STYLE-Element) oder direkt im Body per „style“-Attribut der zu gestaltenden Elemente. Zukünftige Browser werden einen dritten Weg kennen, der beide Varianten quasi miteinander vereint – sogenanntes Scoped CSS. Der gängige Weg vor allem für komplexe und seitenübergreifende Stylesheets ist die Einbindung von CSS im HTML-Head. Dazu werden alle...
CSS 3d Transforms sind häufiger Thema bei Dr. Web. Diese Technik erlaubt komplexe, dabei beeindruckende Effekte, die ansonsten nur mit proprietärer Software, etwa Flash, möglich wären. Heute präsentieren wir Ihnen mit dem CSS3-Experiment Meny eine weitere Möglichkeit der Anwendung von CSS 3D Transforms. 3D-Meny: die Startseite Was ist Meny? Meny ist ein Experiment. Es demonstriert, wie CSS3 3D-Transforms auch zur Erstellung eines Navigationsmenüs eingesetzt werden...
Kein Jahr ist es her, als ein revolutionärer Vorschlag auf den Tisch kam, der auf den ersten Blick kaum Chancen zu haben schien. Unter dem Arbeitstitel CSS Shaders wurde eine Technologie beschrieben, die 3D-Effekte im Web in einer Art und Weise ermöglichen sollte, wie man sie bis dahin nur nativ, respektive mittels Canvas und WebGL kannte. Mit CSS Shaders sollte 3D indes für jedes...
Eben erst hat Firefox 15 Final das Licht der Netzöffentlichkeit erblickt, schon schiebt Mozilla die Betaversion des Firefox 16 nach. Seit dem 30. August kann die Browserbeta für alle üblichen Plattformen herunter geladen werden. Diesmal fokussiert Mozilla die Webentwicklergemeinde mit verbesserten Developertools und der Möglichkeit, einige wichtige Funktionen nicht mehr prefixen zu müssen. Mozilla Firefox 16: Hyperaktive Entwickler coden wie verrückt Der schnelle Releasezyklus...
Unter dem Namen Metro hat die neue Oberfläche, die Microsoft mit Windows 8 einführt, bereits hohe Wellen geschlagen. Mittlerweile mussten die Redmonder den Begriff Metro aufgeben. Warum das so ist und ob das neue Windows-Design ein Erfolg wird oder nicht, sei einmal dahingestellt. Metro ist jedenfalls in aller Munde. Jetzt kann jeder seine Website ebenfalls im Kachel-Style entwickeln – dank Metro UI CSS. Metro...
Die Kunst des Papierfaltens, besser bekannt als Origami, bringt Objekte zustande, die man nicht auf Anhieb für möglich gehalten hätte. Allerdings ist die Technik extrem komplex. Man faltet schon mal eine halbe Stunde vor sich hin. Nicht ganz so komplex ist das JavaScript oriDomi, das aufgrund der Nähe des Namens zum eben genannten Origami, schon erahnen lässt, was seine Aufgabe ist. Es faltet DOM-Objekte...
Opera ist bekanntermaßen ein Browser mit sehr geringer Verbreitung. Darum ist es auch wenig sinnvoll, CSS-Eigenschaften einzusetzen, die ausschließlich vom norwegischen Browser unterstützt werden. Allerdings ist die „object-fit“-Eigenschaft eine schöne Idee für bessere Bildausrichtung sowie -beschneidung, weshalb es sich lohnt, sie sich einmal anzuschauen. In der Regel werden Bilder ja entweder mit einer externen Bildbearbeitung oder serverseitig passend zurechtskaliert und -beschnitten. Die „object-fit“-Eigenschaft ermöglicht...
Letzte Kommentare