Bebilderung des Textanfangs per CSS
25. April 2007
In vielen Zeitschriften kann man es sehen; auch die Tageszeitungen haben diese Technik drauf:
Den ersten Buchstaben des Textes groß zu schreiben und ihn mit einer anderen, meist besonders auffälligen Schriftart in Szene zu setzten. Eine Technik, die man auch mit Hilfe von CSS umsetzten kann.
Der erste Buchstabe soll groß und und schön dargestellt werden. Der folgende Text soll sich um diesen Buchstaben herum platzieren.
Die Vorstellung die wir haben sieht also so aus:
Wie ist dies nun zu erreichen?
Dreispaltiges Layout
7. Februar 2007
Gestern wurde auf A List Apart ein Artikel von Alan Pearce veröffentlicht, der da heißt: “Multi-Column Layouts Climb Out of the Box“. Was das bringt?
Drei Boxen nebeneinander und alle haben immer die gleiche Höhe. Gut, wenn man verschiedenen Hintergründe benutzt.
53 CSS-Techniques
20. Januar 2007
Rounded Corners, Tabnavigation or Star Rater. The Smashing Magazine lists 53 CSS-Techniques You Couldn’t Live Without
Dear Visitors of CSS Mania
9. Januar 2007
I’m glad that you found your way to my weblog. I’m proud that my website is listed in this css gallerie. I hope you like my design.
Information about me an this page:
This weblog is the personal website of Schweizer Glücksspielexperten.
I am 19 yrs old and come from germany. I´m going to school and will make the a-level exmas this year (april).
Here you can find articles about CSS technique, HTML and my daily life.
Have a nice day 
Für meine deutschssprachigen Leser: Ich wurde bei CSSMania gelistet: Zur Profilseite
Inspiration für Navigationen
9. Januar 2007
Die Navigation ist einer der wichtigsten Bestandteile einer Homepage. Man verschafft sich mit einem Blick eine Übersicht auf das, was auf der einzelnen Seite angeboten wird.
Oft sind diese Navigationen nüchtern irgendendwo hingeknallt, oder passen nicht zum Layout.
Seitdem viele Seiten auf einen validen Code achten und die Positionierung von Elementen dem CSSFile überlassen, werden auch die Navigationen schöner und passen besser in das Gesamtbild.
Ich habe mal eine Liste zusammengestellt, die schöne horizontale und vertikale Navigationen, zeigt. Sie sollen zur Inspiration dienen und zeigen, was alles möglich ist.
CSS Grundlagen: Ruf mal auf
4. Dezember 2006
Wie gesagt, ich lerne noch viele neue Dinge bei CSS kennen.
Mit dem @ Zeichen kann man diverse Dinge in CSS 1, aber hauptsächlich in CSS 2 anstellen.
Bekannt ist der @-Import Aufruf, der schon in CSS 1 dabei ist.
Mit diesem Befehl ist es möglich, weitere Style Sheets – oder auch Definitionen – einzubinden.
Es funktioniert ganz einfach mit @import url(http://stylesheet.css);
Das nächste, mir bis vor kurzem unbekannte Befehl ist der Schriftart Aufruf. Das kann daran liegen, dass ich kaum mit „Nicht-Standardschriften“ hantiere, aber trotzdem kann es mal irgendwann ganz nützlich sein.
Dieser Befehl lautet dann @font-face und wird folgendermaßen angewendet:
@font-face {
src: url(http://link-zu-meiner-schrift.de/schrift.ttf);
font-family: 'Name der Schriftart';
....
}
Diese Schriftart ist dann definiert. Das heißt, dass man sie auch im weiteren Style Sheet verwenden kann:
p {font-family: 'Name der Schriftart'}
Natürlich können bei @font-face auch noch weitere Definitionen getroffen werden.
Der letzte Befehl ist der @media Befehl. Mit Hilfe dieses Befehls können Angaben im CSS nur einzelnen Dingen wie Drucker, Handheld oder so was zugewiesen werden.
Beispiel dafür wäre:
@media print {
#content {color: white; background: black;}
}
print = Drucler
@media screen {
#content {color: #e1e1e1; background:#fff url(https://benediktrb.de/files/tag/backgroundbild.gif) repeat-x;}
}
screen = alle PC-Bildschirme
Bei Selfhtml gibt es unter „Medientypen“ eine Auflistung aller verfügbaren Medien.
Dritter Adventskalender der Krauts
29. November 2006
Für alle die keinen Adventskalender mehr mit Schokolade oder Bonbons bekommen, oder wollen, gibt es von den Webkrauts wieder einen Interaktiven.
So wie früher wird jeden Tag ein Türchen geöffnet Beitrag geschrieben. Im Zeitraum vom 1. bis zum 24. Dezember gibt es Artikel rund um:
Content Management Systeme und Webstandards, Usability oder Mikroformate
und noch mehr.
Wenn man sich angesprochen fühlt, aber erst einmal schauen möchte ob das wirklich interessant ist, der kann sich die letzten beiden ja mal anschauen.
Manuela hat zu diesem Zweck auch ihr Photoshop angeschmissen und diverse Buttons gestaltet, die man für die Unterstützung im eigenen Weblog verwenden kann. Diese findet ihr entweder auf pixelgraphix, oder direkt bei den Webkrauts.
Ich lerne CSS und Design
27. November 2006
Heute habe ich mir mal alte Ordner im hinteren Bereich meiner Festplatte angeguckt. Dabei bin ich auf einen interessanten Ordner gestoßen, der den Namen “Einfach” trägt.
Das Erstellungsdatum kommt vom August 2005 und weist darauf hin, dass es sich um einen alten Schatz handeln muss.
Der Ordner selbst trägt den Namen wohl zurecht, denn er beinhaltet nur zwei Dateien. Eine .css und eine .html Datei.
Beim Öffnen der Datei kommt es mir wieder in den Sinn. Es ist wohl einer der ersten Versuche, die ich getätigt habe, mit Hilfe von CSS und XHTML eine Homepage zu erstellen.
Das Ergebnis seht ihr hier:
Das ganze kann man sich auch als Onlinedemo ansehen.
Was mich wundert ist, dass sogar alles validiert ist. Aber vielleicht war das damals auch mein Ziel? Ich weiß es nicht mehr.
Ich weiß nur, dass ich seitdem viel gelernt habe. Wusste ich früher noch nicht viel, oder besser gesagt gar nichts, über Webstandards, CSS, XHTML oder Web 2.0, so versuche ich heute schon selber etwas von dem weiterzugeben, was ich gelernt habe.
Auch die Entwicklung in Sachen Webdesign ist fortgeschritten. Von 2003 bis 2005 war ich reiner Designer, der sich zunächst in diesem Bereich fortbilden wollte. Dann kam eben das Coden hinzu. Den Schritt mit Tabellen eine Homepage zu coden habe ich nahezu ausgelassen. Wohlgemerkt in Sachen Homepages habe ich es ausgelassen. Denn bei meiner Arbeit mit dem wBB 1.2 – wBB 2 musste ich auch diesen Bereich des Coden lernen.
Ich habe Heute auch nach alten Designs gesucht und bin fündig geworden. Eine kleine Entwicklung (zur Großansicht einfach auf die Bilder klicken):
Design von 2003
Design von 2004
Design von 2005
2006 habe ich mich auf einen eher minimalistischen Stil festgelegt, so wie man ihn auch von diesem Weblog kennt. Von pompösen Webseiten mit viel “bling-bling” halte ich sowieso nicht sehr viel.
Ich bin immer wieder erstaunt, was so in den letzten Jahren passiert ist. Es ist meist sehr witzig, wenn man sich die ersten Versuche in Sachen Design anschaut.
Und noch immer lerne ich…
Einführung in HTML
1. Oktober 2006
Vorwort
HTML ist seit jeher für alles, was sich auf der Seite zeigt, seien es Texte und Absätze, Tabellen oder Frames, aber auch Formulare, verantwortlich. Dabei ist ist es wichtig sich direkt klar zu machen, dass es gewisse Webstandards gibt, an die es sich zu halten gilt.
Die Idee des Internets war, Informationen auf der ganzen Welt für jedermann zugänglich zu machen. Um dies zu gewährleisten, wurden einige Standards bzw. Grundregeln entwickelt, die von jedem “Anzeigegerät” gleich interpretiert werden sollten. HTML, CSS, ECMA-Script (Javascript) und XML sind die “Regelwerke”, nach denen im Web entwickelt wird.
Nur haben Browserentwickler diese Standards nie sehr ernst genommen und so gibt es heute keinen Webbrowser, der HTML und CSS zu 100% beherrscht. Ganz besonders hängt der Marktführer, der Internet Explorer, in der Entwicklung hinterher und macht allen Webdesignern das Leben schwer und steht der Weiterentwicklung des Web im Weg.
Dieses Wissen, rund um die Webstandards und das barrierefreie Web, erklärt, warum viele Coder eine große Abneigung gegenüber diversen HTML-Editoren haben. Ebenso erklärt es den Sinn, warum man sich immernoch die verschiedenen HTML-Tags aneignen und diese sinnvoll einsetzten sollte. So ist auch die strikte Trennung von HTML und CSS zu erklären.
Beim Einsatz von HTML geht es um die Strukturierung der Seite, nicht aber um das Layout und die Formatierung. Der folgende Artikel soll dabei helfen, HTML zu verstehen und die Grundlagen zu erlernen.
Weiterführende Artikel
Einführung in HTML – Grundlagengewinnung – Der Hauptartikel
Allgemeine Tags
Verlinkung
Grafiken
Doctype
CSS Grundlagen
Semantik eines (X)HTML Dokuments
CSS – Fonttester
20. August 2006
Und wiedermal etwas für die Kategorie: Faule CSS’ler 
Auf der Seite Fonttester kann man sich ganz einfach und problemlos einen CSS Code für z.B. P-Tags herstellen. Es gibt verschiedene Möglichkeiten die Schrift einzustellen. Darunter die bekannten Attribute wie font-weight, line-height oder letter-spacing. Nach der Methode WYSIWYG bekommt man seine Veränderungen gleich zu sehen.
Mit dem Klick auf “GET CSS CODE” bekommt man dann einen Code heraus, den man direkt ins eigene Stylesheet einbinden kann.
Sehr schön gemacht und vorallem auch mal ganz nützlich, denn auch Anfänger können direkt sehen, was die CSS-Werte so einen Sinn haben und was passiert, wenn man diese verändert.
CSS Grundlagen: Vererbung
3. August 2006
Dieser Artikel geht über den Einsatz von HTML-Tags, die, die gleichen CSS-Anweisungen besitzen.
Dafür war der Kommentar von Heiko ausschlaggebend.
Wie es genau gemacht wird, werde ich im Folgenden zeigen. Durch diese Technik erspart man sich ein zu langes und zu speicherraubendes Stylesheet.
Die Vererbung an sich ist relativ simpel. Wie oben beschrieben haben mehrere HTML-Tags ein und dieselbe CSS-Anweisung.
Ich habe dazu mal ein anschauliches Beispiel gemacht.
CSS Grundlagen
21. Juli 2006
Persönliche Einleitung hierfür:
Es ist Sommer, es ist heiß und ich habe sechs Wochen Ferien. Also werde ich etwas weitermachen, was ich schonmal auf dynamic-vision.com angefangen habe.
Eine Artikel Reihe zu verschiedenen CSS-Themen. Eine meiner Meta-Descriptions heißt: Coding. Da ich für diesen Bereich kaum etwas getan habe, werde ich dies hier jetzt mal nachholen. In der Zukunft werden weitere Artikel erscheinen.
Webstandards
Die Idee des Internets war, Informationen auf der ganzen Welt für jedermann zugänglich zu machen. Um dies zu gewährleisten, wurden einige Standards bzw. Grundregeln entwickelt, die von jedem “Anzeigegerät” gleich interpretiert werden sollten. HTML, CSS, ECMA-Script (Javascript) und XML sind die “Regelwerke”, nach denen im Web entwickelt wird. Nur haben Browserentwickler diese Standards nie sehr ernst genommen und so gibt es heute keinen Webbrowser, der HTML und CSS zu 100% beherrscht. Ganz besonders hängt der Marktführer, der Internet Explorer, in der Entwicklung hinterher und macht allen Webdesignern das Leben schwer und steht der Weiterentwicklung des Web im Weg.