kulturbanause blog


Hier findest Du Artikel, Tutorials, Downloads, Tipps, Hacks, Snippets und aktuelle Szene-News rund um illustratives Webdesign, Social Media und digitale Bildbearbeitung.



CSS
Hier siehst Du eine Übersicht aller Beiträge, die mit dem Stichwort "CSS" versehen wurden.

Silbentrennung im Browser: CSS-Eigenschaft “hyphens”

css-silbentrennung

Wer im Internet typografisch ansprechende Texte gestalten möchte, hatte es lange Zeit nicht leicht. Mit dem Einzug der Webfonts stehen Webdesignern mittlerweile viele gelungene Schriftarten zur Verfügung und es gibt sogar experimentelle Möglichkeiten Ligaturen und Kerning im Browser zu aktivieren. Was noch fehlt ist die klassische Silbentrennung, die bisher ebenfalls nur über externe Scripte und Workarounds umständlich zu realisieren war. Mit der CSS-Eigenschaft hyphens wird vieles einfacher.

Diesen Beitrag zu Ende lesen


Facebook CSS/JavaScript-Framework: Fbootstrapp

fbootstrap

Wenn ihr Anwendungen oder Facebook-Fanpage-Tabs im Look and Feel von Facebook gestalten wollt, steht euch seit kurzem das Framework "Fbootstrapp" zur Verfügung. In Anlehnung an das vor einiger Zeit veröffentlichte Framework "Twitter Bootstrap" bietet Fbootstrapp CSS-Stile für Raster, Typografie, Medieninhalte, Formulare, Navigationselemente und Modal Boxes. Auch JavaScripte sind im Paket enthalten um eine zusätzliche Ebene für Interaktionen hinzuzufügen.

Diesen Beitrag zu Ende lesen


Welche HTML5-Features kann ich heute schon nutzen? HTML5 please!

html5please-logo

HTML5 und CSS3 bieten uns umfangreiche und spannende neue Funktionen, nur leider ist man sich häufig nicht sicher welcher Browser welchen Befehl wie interpretiert. Vor einiger Zeit habe ich euch bereits das Tool Can I Use vorgestellt, mit dem ihr prüfen könnt ob ein Befehl unterstützt wird und ob ihr Vendor-Prefixes benutzen müsst. HTML Please ist ein weiteres Tool dieser Art. Auch hier gebt ihr einen Befehl ein und erhaltet Informationen über die Einsatzmöglichkeiten. Im Gegensatz zu vielen anderen Diensten findet ihr hier jedoch auch sehr detaillierte Informationen über notwendige Fallbacks, Polyfills oder Prefixes.

Diesen Beitrag zu Ende lesen


CSS-Dokumente perfekt strukturieren: ProCSSor

procssor-logo

Wer als Webdesigner im Team mit anderen Entwicklern arbeitet, hat sicher schon die ein oder andere Diskussion zum Thema Code-Design geführt. Insbesondere bei der Strukturierung von CSS-Code können die Meinungen stark auseinander driften. Sollen die CSS-Eigenschaften nun untereinander oder nebeneinander geschrieben werden? Gehören Leerzeilen zwischen die Eigenschaften oder soll vielleicht sogar alles in einer Zeile geschrieben werden? Und wo ist der beste Platz für öffnende und schließende Klammern?
Damit jeder Entwickler arbeiten kann wie es ihm am besten gefällt wurde der Online-Dienst ProCSSor ins Leben gerufen.

Diesen Beitrag zu Ende lesen


Gefloatete und absolut positionierte Elemente zentrieren. Back to Basics.

centeredelements

Vor einiger Zeit wurde ich gefragt ob es möglich ist, gefloatete Elemente zu zentrieren. Es ist möglich, und die Lösung ist im Grunde genommen auch völlig logisch. Man kommt nur leider nicht so einfach darauf.
Mit diesem Beitrag möchte ich daher zwei elementare Fragen im Umgang mit CSS beantworten. Wie zentriere ich gefloatete und wie absolut positionierte Elemente?

Diesen Beitrag zu Ende lesen


WordPress-Editor: Komplexe Inhaltsstrukturen benutzerfreundlich pflegen

wordpress-editor-styling

Wenn ihr WordPress für Kundenprojekte einsetzt, werdet ihr schnell merken, dass einige Kunden Schwierigkeiten mit dem WordPress-Editor haben. Insbesondere wenn ein komplexer Inhaltsbereich gefüllt werden soll – beispielsweise ein mehrspaltiges Layout – sind viele Kunden überfordert. Und wir wollen den Kunden ja auch nicht mit der HTML-Variante quälen.
Ihr könnt den Editor ganz einfach mit Standard-Inhalten füllen und mit einer eigenen CSS-Datei stylen. Und das sogar für verschiedene post_types individuell. Es bietet sich u.U. also an, vorab eine HTML-Struktur festzulegen und für den Kunden benutzerfreundlich darzustellen.

Diesen Beitrag zu Ende lesen


Happy Nikolaus! Mein Adventskalender-Türchen zum Thema “CSS3-Keyframe-Animationen” im Webstandard-Blog

css3-keyframe-demo

Im CSS3-Adventskalender des "Webstandard-Blog" ist heute ein Türchen mit einem Gastbeitrag von mir geöffnet worden. Ich erkläre wie ihr CSS3-Keyframe-Animationen im Layout einsetzen könnt und animiere exemplarisch eine Küstenlandschaft mit Leuchtturm, Möwen und Wolken.
Ich freue mich sehr mit diesem Tutorial am Adventskalender teilnehmen zu können, die Beiträge haben mich nämlich bereits im letzten Jahr überzeugt und sind sehr umfangreich und interessant. Ihr solltet also unbedingt auch einen Blick auf den Kalender von letztem Jahr werfen - die Beiträge sind nach wie vor aktuell.
In diesem Sinne: Ich wünsche euch eine gemütliche Weihnachtszeit :)

Diesen Beitrag zu Ende lesen