Archiv für die Kategorie „CSS“

« Ältere Einträge

Sample Markup for CSS Authors

Freitag, 9. Oktober 2009

Have you ever written a CSS file? Have you heard about this “lorem ipsum” thing? Or do you regularly transform designs into CSS & XHTML? If you answer one of these questions with ‘yes’, then this is for you.

What is the first thing you do when it’s time to create a new CSS file? You might start from scratch with a blank CSS every time. You might use Eric Meyer’s reset.css. You might probably work with one of the numerous CSS-frameworks, such as Blueprint CSS or YAML or even use the CSS stuff from that YUI framework. You might even start with your CMS’s standard theme and adjust things from there…

One thing you might forget when you hack in the first lines of CSS (and this happens to the best of us) is to use reallife markup instead of that boring “Lorem ipsum…” designers seem to have a faible for. This is where this markup snippet comes into play: it should help you with filling your wireframe layout with some actual HTML-markup.

So just plain HTML, huh?

This snippet provides a wide range of commonly used markup, that should be supported by most rich editors (a.k.a. WYSIWYG editors).
Since every coder has his own preferences towards class names. I decided to leave out the fancy stuff you could do with classes at all, as this would force some people to spot, delete, or rename those classes afterwards, which would be counterproductive. So this is plain HTML.

Download

Since each and every CMS treats the markup you insert into its page editor differently, I decided to provide both: a version with regular HTML and one without the paragraphs for those CMS that come with their own paragrapher-functionality.
Sample Markup v0.1 (text file, 8 KB)
Sample Markup v0.1 without paragraphs (text file, 8 KB)

Some notes: the HTML-elements included in the snippet are: p, a, abbr, acronym, samp, code, pre, ol, ul, li, blockquote, cite, q, table, caption, thead, tfoot, tbody, tr, td, th, em, strong, sup, sub, div, span

That’s basically it. Just create a code snippet in your favorite editor and remember: Sample markup is the new lorem ipsum.
Am I missing something? Looking forward your improvement suggestions.

Changelog:
v0.1 Initial version. (2009-10-9)

Schlagworte:, , , , , , , ,
Veröffentlicht in CSS, Design, Markup | Keine Kommentare »

jQuery is fun :)

Mittwoch, 30. September 2009

Sliding Header Animation with jQuery There are probably a dozen pre-made image gallery plugins for jQuery that do the same thing, or could be hacked to do so… but actually I wanted to see how hard it is to code a scrolling header animation similar to the one i found on www.freshtilledsoil.com.
So here’s my own approach for the same thing: See the Demo here. Instead of writing proper plugins for jQuery, I actually got used to writing global Javascript functions. Although these may or may not use jQuery functionality themselves and mostly do project-specific stuff - it’s not really reusable in the next project. So hacking together a jQuery plugin would be mandatory. That said, this is the result of that practice. Easy.

So what this does is: First, it requires you to set up a list with images and another div with links (the controls). have a wrapper div surround this. When clicking on a ‘pager’ link, it will then slide the whole list in its parent div.

Schlagworte:, , , , , ,
Veröffentlicht in CSS, Design, Entwicklung, Webwork | Keine Kommentare »

IE6 Update

Sonntag, 19. April 2009

In the spirit of the IE Death March there is now a pre-made Javascript available at www.ie6update.com that helps Webmasters with integrating a message bar, encouraging users of Microsoft’s "Internet Explorer 6" to upgrade their browser to a more recent version. Actually it looks exactly like one of these annoying "Missing Active-X controls" bars in IE. Although this is what doubtful banner-ads, or evil download sites do when "leading visitors to believe they see a system alert or warning" - in this case there is one huge difference: this message is trying to make the web a better place.

(via rajubitter)

Schlagworte:, , , ,
Veröffentlicht in CSS, Design, Entwicklung, Software | Keine Kommentare »

Douglas Bowman kehrt Google den Rücken

Mittwoch, 25. März 2009

Und dieser schreibt auch etwas zu seinen Beweggründen. Sehr interessant für alle die sich fragen, wie das wohl ist bei Google zu arbeiten. Okay, es kommt wohl immer drauf an wo man ist, was man macht. Aber Doug Bowman ist als leitender Designer und Webstandards Evangelist kein unbeschriebenes Blatt. Ich für meinen Teil hatte ganz zu Beginn (zu Beginn meiner eigenen HTML-CSS-Webgedöns-Anfänge), sehr begeistert verfolgt wie eine Elite mit Podcasts und Slides, Präsentationen von der Web Essentials 2003, 2004 ihre Ideen verbreitete. Wenn man denen zuhörte war CSS immer ganz simpel (ist es ja auch, was es hier und da kompliziert macht sind die unzulänglichkeiten eines Browsers). Im deutschsprachigen Raum gab es damals noch nichts was mit dem Output und Qualität von "A List Apart", Zeldman, Shea, Meyer, Weakley, Clark, Moll, Holzschlag & Co. mithalten konnte.

Wenn ich mich hier so respektvoll verneige, dann tu ich das weil mir jemand anschaulich und einfach erklärt hat wie CSS funktioniert bzw. diverse Tricks und herangehens- und Denkweisen demonstrierte.

Nun berichtet Douglas Bowman, der einst kontrovers die Vorzüge von CSS anhand der Microsoft-Seite erklärte, warum er nun nach Jahren Google verläßt. Und vieles von dem was man da liest wird in ähnlicher Form auch anderen Designern bekannt vorkommen: so ist von 40 blau-Schattierungen die Rede, weil man sich nicht für eins aus zwei blaus entscheiden konnte, oder von Argumentationen für und wider einer 3 Pixel oder doch lieber 5 Pixel starken Umrandung.

In der Tat ein Armutszeugnis für Google, wenn sich ein Designer und Webstandardista von Bowmans’ Kaliber offen über solchen Starrsinn beschwert. Nun, wer seinen Designer (wohlgemerkt ein Fachmann) mit soetwas sabotiert, macht in jedem Fall etwas falsch und muss sich den Vorwurf dann auch gefallen lassen.

Für mich (nach Jahren) ein Grund mal wieder öfter in Bowman’s Blog zu sehen. Ich bin sehr gespannt was da kommt…

Schlagworte:, , ,
Veröffentlicht in CSS, Design, Whatever | Keine Kommentare »

Bikubische Bildskalierung in IE6 und IE7

Donnerstag, 19. März 2009

Es gibt einen schönen, auch mir bisher unbekannten Weg die Darstellung von skalierten Bildern im IE6 und IE7 zu verhübschen:

  1. img { -ms-interpolation-mode: bicubic; }

Das ganze kann man bei css-tricks.com ansehen und nachlesen. Die Anweisung selbst ist natürlich proprietär, also außerhalb der CSS-Standards. Der Vollständigkeit halber sollte man (vielleicht) auch noch anmerken, dass Bilder, die man über die Attribute width und height skaliert suboptimal sind, da sie mehr Ressourcen verbrauchenals nötig - ein letztes Mittel, wenns mal schnell gehen muss, sozusagen.
(via IlT)

Schlagworte:, , , ,
Veröffentlicht in CSS, Software | Keine Kommentare »

« Ältere Einträge