Webdesign (52 Artikel)

Type Terms erklärt Typografie verständlich & interaktiv

Typografie ist mitunter eine echte Wissenschaft für sich. Kein Wunder, dass viele darum so einen großen Bogen machen. Was ist jetzt noch mal Kerning und was bedeutet Aperture? Was sind Serifen? Wo befindet sich das Ohr eines Buchstabens? Verdammt viele Begriffe, die es zunächst zu verstehen gilt, wenn du professionell mit Schriften umgehen möchtest. Da raucht der Kopf erstmal — verständlich. Mit der interaktiven Webseite Type Terms wirst du die Grundbegriffe aber fix drauf haben, ohne dabei ins Schwitzen zu kommen.

Artikel lesen

SVG Icon bei fokussiertem Input-Element stylen

Ich habe SVG mittlerweile richtig lieben gelernt. Damit lässt sich viel flexibler arbeiten als mit Icon Fonts oder CSS-Sprites. Wie du selbst SVGs inline einfügst, beschrieb ich bereits in meinem Blogbeitrag "Icon Fonts leicht als Inline SVG einbinden" . Bei meinem Suchfeld wollte ich kürzlich ein passendes Symbol nachrüsten — direkt am Anfang, aber innerhalb des Input-Elements. Der Suchbegriff wird dann neben dem Icon eingegeben.

Artikel lesen

Icon Fonts leicht als Inline SVG einbinden

CSS-Sprites sind out. Wer als Webdesigner etwas auf sich hält, verwendet Icon Fonts oder SVG. Bei vielen schrillen beim Begriff SVG die Alarmglocken. Das ist doch total kompliziert und ich hab davon eh keine Ahnung. Also bleib ich doch lieber bei so einer Icon Font, die muss ich nur einbinden. Es stimmt, SVG ist eine Kunst und möchte verstanden werden. Allerdings ist es ein Klacks die Symbole einer Icon Font in SVG umzuwandeln. SVGs bringen im Gegensatz zu Icon Fonts zahlreiche Vorteile mit. Chris Coyier hat einen sehr guten Vergleich auf seinem Blog CSS-Tricks dazu parat. Der Browser-Support ist mittlerweile hervorragend.

Artikel lesen

Container mit Flexbox mittig im Viewport positionieren

Webseitengestaltung kann manchmal tricky sein. Ein Div-Element sowohl horizontal als auch vertikal bei jeder Auflösung im Fokus des Viewports zu halten, ist keine leichte Aufgabe. Für die x-Achse gibt es genug Möglichkeiten, aber die y-Achse schaut meist in die Röhre. Mit Gewalt war es dennoch umsetzbar, einem Container auf die Sprünge zu helfen. Beispielsweise die Methode mit CSS-Transform verwendete ich selbst bei meiner alten 404-Fehlerseite. Kürzlich habe ich die Seite neu geschrieben und mir dabei die Frage gestellt, geht das mittlerweile auch anders? Der gewaltsame Weg hat mir nie zu 100% gefallen. Also hab ich mal ein bisschen überlegt.

Artikel lesen

Fehler in (X)HTML-Quellcode mit debugCSS schnell finden

Als Webdesigner wirst du sicherlich wissen, dass das Entwickeln einer Webseite meist nur die halbe Miete ist. Nachdem du mit deiner Arbeit fertig bist, geht es ans Debuggen. Fehler finden, ausmerzen oder nochmals neue Wege einschlagen. Dieser Abschnitt kann oftmals mühselig und nervig sein. Deshalb existieren einige Werkzeuge, um das Finden von Fehlern im Quellcode zu erleichtern. Yahoo bietet mit debugCSS nun eine ebenso einfache Lösung. Das Tolle daran, es ist ein simples Bookmarklet und kann auf jeder Webseite verwendet werden.

Artikel lesen