Kategorie «CSS»

Scaling body background images with pure CSS

// 15012009 / Allgemein, CSS / 8 Kommentare

Scaling body background images with pure CSS

Dealing with large background images? Well, perhaps I have a nice solution for you:

DEMO: Just look, see and wonder

Low broser resolution

Scaling background image effect - small

High broser resolution

Scaling background image effect - large

The trick

The trick is quite simple: It’s just an absolute positioned image with css properties “width: 100%; height:  100%” and “z-index:-1″  directly inserted after the body tag. Nothing more. The only thing you have to pay attention on is to insert the image directly after the body tag if you want to have a scaling body image.

…
<style type="text/css">
#background
{
width:100%; height:100%; position: absolute; z-index: -1; top: 0; left:0;
}
</style>
</head>
<body>
<img id="background" src="background.jpg"/>

…

I wanted to use this css trick on my new website for younicmedia (we’re currently working on it) but I got new ideas. Have fun with it!

Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.

Süßes zum Wochenende

// 21092008 / Allgemein, Ausgefallen und aufgefallen, CSS, Für die Mittagspause, Online Marketing, Webprogrammierung / 2 Kommentare

Süßes zum Wochenende

Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.

13 Geek Must Haves

// 10092008 / Ausgefallen und aufgefallen, CSS / 12 Kommentare

13 Geek Must Haves

Von der Hähnchen Handballen-Auflage bis zum USB-Stick-Flaschenöffner…

{ weiterlesen: “” }

Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.

* html body {display: none;}

// 02092008 / CSS, Online Marketing, Webdesign / ein Kommentar

* html body {display: none;}

* html body {display: none;}

[via satzansatz]

Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.

Neues CSS Stylesheet für das Joomla Template beez

// 01092008 / CSS, Joomla, Webdesign / 4 Kommentare

Neues CSS Stylesheet für das Joomla Template beez

Ich erstelle derzeit ein Stylesheet für das Joomla Template beez, das Ihr einfach gegen das standardmäßig mitgelieferte Stylesheet austauschen könnt und damit einen komplett neuen Template-Look erhaltet – ohne die index.php oder andere Dateien außer dem CSS (und dem images Ordner) anzufassen.

Damit soll gezeigt werden, dass man das beez Template sehr vielseitig einsetzen kann, nur indem – wie bei CSS Zengarden – das CSS abgeändert wird.

Ich war nämlich ziemlich begeistert vom beez Template, da hier die tabellenlastige html-Ausgabe von Joomla 1.5 so schön tabellenlos überschrieben wird (siehe html Ordner im Template Verzeichnis). Nachdem ich mit Angie Radtke – Co-Autorin des beez Templates – neulich telefoniert habe, sagte sie mir jedoch, der Fokus des Templates liege nicht auf dem html-Ordner im Template, sondern darauf, dass man jedes beliebige Layout mit beez realisieren könne, indem das CSS geändert wird.

Vorteil: Nix mehr php-Programmierung, sondern nur noch CSS Know How. Ideal für Webdesigner.

Nachteil: Bei ausgefalleneren Layouts doch eher was für CSS-Profis, die sicher mit float, position usw. umgehen können.

Jetzt fehlt nur noch ein bisschen Detailarbeit, dann ist das Stylesheet finito :-)

Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.

Kopfloser USB-Teddybär

// 27082008 / Ausgefallen und aufgefallen, CSS / Noch keine Kommentare

Kopfloser USB-Teddybär

Ist das jetzt gut oder ist das böse…?

{ weiterlesen: “” }

Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.

Tabulatoren in HTML

// 25082008 / CSS, Webdesign / ein Kommentar

Tabulatoren in HTML

Hätte gerne ein <tab/> Tag in HTML. Gibt’s aber nicht. <table> will ich nicht. CSS ist mir zu aufwendig für einen kurzen Abschnitt. Und nun?

Zum Glück gibt es <pre></pre>, mit dem man getabbte Texte simulieren kann. Beispiel:

Smashing Magazin: The <hr /> Contest
Gewinn:           Wacom Intuos3 9X12 USB Tablet
Anforderung:      Tag stylen und einschicken

Sieht dann im Quelltext so aus:

<pre>
Smashing Magazin: The <hr /> Contest
Gewinn:           Wacom Intuos3 9X12 USB Tablet
Anforderung:      Tag stylen und einschicken
</pre>

Wer den Monospace Font nicht mag, schreibt einfach ein <pre style=”font-familiy:Verdana, Arial, sans serif;”> o.ä. statt dem einfachen <pre>.

Einziger Wermutstropfen sind die vielen Leerzeichen hintereinander um den Text zurechtzurücken, aber das kann ich in diesem Falle verschmerzen.

Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.

Styling für HTML-Tabellen: 30 Kostenlose CSS-Stylesheets

// 11082008 / CSS, Webdesign / ein Kommentar

Styling für HTML-Tabellen: 30 Kostenlose CSS-Stylesheets

Da HTML Tabellen von Natur recht prüde aussehen, empfiehlt es sich sie per CSS zu stylen. Auf http://icant.co.uk/csstablegallery/ findet Ihr eine große Sammlung von CSS Styles für HTML Tabellen.

Da es dort jedoch keine direkte Vorschau der Styles gibt, einige Styles nicht richtig funktionieren und manche auch ganz übel aussehen, gibt’s hier ein Best-Of inkl. Download-Link und Vorschau-Bildchen.

Das Styling für jede einzelne Tabelle befindet sich in einer kleinen CSS-Datei, die Ihr entsprechend downloaden könnt.

{ weiterlesen: “” }

Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.