Kategorien
Design HTML/CSS

CSS3: Mit Exclusions und Regions Texte darstellen wie in InDesign

Dank Adobe könnten Texte auf Websites bald so gestaltet werden, wie es beispielsweise in InDesign möglich ist. Der kalifornische Software-Konzern hat zwei Vorschläge gemacht, wie sich Texte mit CSS in Form bringen lassen und wie sie auf unterschiedliche HTML-Elemente aufgeteilt werden können. Adobe und HTML Texte in Form bringen mit CSS-Exclusions Texte in HTML sind […]

Kategorien
Design HTML/CSS

CSS3: Das etwas andere Box-Modell mit {box-sizing:border-box}

Das klassische Box-Modell war noch nie besonders intuitiv. In CSS3 wurde mit {box-sizing:border-box} eine Alternative vorgestellt, die besonders bei flexiblen Layouts fast nur Vorteile hat. Das klassische Box-Modell {box-sizing: content-box} Wenn Sie im analogen Alltag die Breite einer Kiste angeben, dann ist damit immer die Entfernung von einem Außenrand zum anderen gemeint, inklusive Innenabstand (padding) […]

Kategorien
Design HTML/CSS

"CSS gerootet": Flexible Schriftgrößen mit REM

Diskussionen über die beste Art und Weise, die Schriftgröße bzw. den Schriftgrad zu definieren sind wahrscheinlich so alt wie das Web. Neben den traditionellen Kandidaten wie px, em und % gibt es mit rem einen neuen Bewerber, der das Beste der anderen Einheiten in sich vereint. Früher mal Standard: Schriftgrad per em oder % Bis […]

Kategorien
Design HTML/CSS

8+ Formulargeneratoren für die eigene (mobile) Homepage

Formulargeneratoren sind so alt wie das Netz und entstammen der Zeit der alten Geocities und anderer Selbstbau-Website-Heimstätten. Niemand der dort Aktiven hatte Ahnung von HTML, teilweise war auch der Codezugriff gar nicht möglich. So wurden Formulargeneratoren, sogar Gästebuchgeneratoren galt es zu erdulden, zur Selbstverständlichkeit. Bevor Sie jetzt denken, dass diese Dienste heutzutage völlig überflüssig wären, […]

Kategorien
Design HTML/CSS

CSS3: Nebeneinander liegende Elemente mit Flexbox statt Float

Bei der Gestaltung mehrspaltiger Weblayouts ist der Einsatz der CSS-Float-Eigenschaft bisher meist unumgänglich. Gerade bei der Darstellung nebeneinander liegender Elemente wird sie eingesetzt und bringt gerne das ein oder andere Problem mit sich. Das CSS3-Flexbox-Modell bietet neue Möglichkeiten bei der Gestaltung nebeneinander liegender Elemente mit zusätzlichen Features und das ganz ohne Float-Probleme. Zunächst muss erwähnt […]

Kategorien
Design HTML/CSS

Pures CSS3: Ein schicker Content-Slider ganz ohne JavaScript

Vieles, was bisher nur mit Flash oder JavaScript möglich war, lässt sich mittlerweile mit purem CSS3 realisieren. Heute zeige ich einen schicken Contentslider, der ausschließlich mit HTML und CSS3 umgesetzt ist. Möglich machen dies  CSS3-Animationen und -Transitions. „The Pure CSS3 Content Slider“ The Pure CSS3 Content Slider ist ein experimentelles Projekt, mit dem sich jeder sehr […]

Kategorien
Design HTML/CSS

CSS3-Lightbox komplett ohne Javascript

Die Lightbox ist eine beliebte Möglichkeit, Bilder im Großformat auf einer Website darzustellen. Mittels diverser Javascript-Bibliotheken lassen sich Bilder dynamisch im Vordergrund einer Seite anzeigen, während die eigentliche Website verdunkelt wird. Mit CSS3 lässt sich ein solcher Lightbox-Effekt auch ganz ohne Javascript realisieren. Erst HTML, dann ein wenig CSS CSS3-Lightbox CSS3 macht vieles einfacher und […]

Kategorien
Design HTML/CSS

Formulare gestalten und validieren mit HTML5 und CSS3

Mit HTML5 und CSS3 lassen sich Formulare clientseitig validieren und Fehlermeldungen mit Hilfe neuer Pseudoklassen per CSS ausgeben. Neue Eingabetypen sowie die Möglichkeit, Pflichtfelder und Vorgaben bereits per HTML festzulegen, machen JavaScript für Validierungszwecke unnötig (jedenfalls irgendwann in der Zukunft…). Vorgaben per HTML5 festlegen Seit HTML5 gibt es viele neue Eingabetypen. So lassen sich spezielle […]

Kategorien
HTML/CSS

CSS3: Texte beschneiden mit der Eigenschaft Text-Overflow

Gerade in Tabellen sind Texte oder Wörter gerne mal zu lang und müssen entweder umgebrochen oder beschnitten werden. Mit der CSS-Eigenschaft „text-overflow“ lassen sich nicht nur Texte auf eine feste Breite beschneiden, sondern auch automatisch mit Auslassungszeichen versehen. Die Eigenschaft sorgt dafür, dass ein Text nur so viel Raum einnehmen kann, wie das umschließende Element […]

Kategorien
Design HTML/CSS

Font-Size-Adjust und Text-Size-Adjust: Viel Verwirrung um zwei neue CSS3-Eigenschaften

Einige CSS-Eigenschaften beinhalten das Schlüsselwort „text“, andere das Wort „font“. Was vom Sinn her ähnlich zu sein scheint, dient in der CSS-Praxis einem völlig unterschiedlichen Zweck. Bis auf den Namensteil “size-adjust” haben die CSS-Eigenschaften font-size-adjust und text-size-adjust nichts gemein.

Kategorien
HTML/CSS Webdesign

Responsive Webdesign: Mit Media-Queries mobile Versionen von Websites erstellen

CSS 3 ist ein Thema, das Webdesigner und -entwickler nach wie vor begeistert und frustriert. Ein Anwendungsbereich, bei dem Sie nicht auf Browser-Unterstützung der IE-Familie warten müssen, sind mobile Geräte. Nutzen Sie Media Queries, um Ihre Websites fit fürs iPhone, iPad und Android-Geräte zu machen.

Kategorien
Design HTML/CSS

Webinhalte für Smartphones und Pocket PCs aufbereiten

Seitdem Internetseiten nicht nur per PC und Notebook aufgerufen werden können, sondern auch per Mobiltelefon und PDA, stehen Webdesigner vor neuen Herausforderungen. Wollen Website-Betreiber die wachsende Zahl der mobilen Surfer mit ihren kleinen Displays nicht durch ständiges Scrollen verärgern, sind sie gut beraten, Internetseiten speziell für dieses Medium aufzubereiten.

Kategorien
HTML/CSS

CSS-Kurzschreibweisen inklusive Cheatsheets

CSS-Dateien neigen dazu, schnell unübersichtlich zu werden – es wird hier und da nur eine Kleinigkeit geändert und schon hat man den Überblick verloren. Zudem sorgen unnötige Wiederholungen für Ballast und nutzlosen Code, der sich selbst mit Firebug oder ähnlichen Tools nur schwer warten lässt. Der konsequente Einsatz von Kurzschreibweisen schafft Abhilfe.

Kategorien
HTML/CSS

HTML5 – ein Überblick

HTML5 ist derzeit in aller Munde.  Ende Mai ließ Google auf der Entwicklerkonferenz »Google I/O 2009« in San Francisco aufhorchen, als groß Werbung für den zukünftigen Webstandard betrieben wurde, welcher die Basis für kommende Google-Anwendungen stellen soll.  Einen weiteren Schub erhielt die neue HTML-Version, als das Standardisierungskonsortium W3C (englisch) Anfang Juli die Einstellung der Arbeiten […]

Kategorien
Design HTML/CSS

Vier CSS-Resets: CSS-Standardwerte der verschiedenen Webbrowser auf den gleichen Stand bringen

Viele Webentwickler beginnen ein neues Projekt mit dem Einbinden eines sogenannten CSS Resets. Darunter versteht man ein Stylesheet, was alle Browser-Layout-Standardeinstellungen auf einen gemeinsamen Nenner bringt. Viele basteln sich ihre eigenen Resets zusammen, aber diese Arbeit kann man sich auch sparen. Inzwischen existieren diverse vorgefertigte Resets, die man verwenden kann.

Kategorien
Design Freebies, Tools und Templates HTML/CSS

100 kostenlose, hochwertige XHTML- und CSS-Templates

Sofern Sie nie einen Blick auf all die (X)HTML- und CSS-Templates geworfen haben, die man kostenlose aus einer Vielzahl von Quellen beziehen kann, werden Sie von deren Qualität überrascht sein. Themes für WordPress erhalten heutzutage eine immense Aufmerksamkeit, es gibt jedoch auch viele, qualitativ hochwertige (X)HTML und CSS-Vorlagen, die allesamt kostenlos zu haben sind.