internet-computer, scripte, css

Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it wit

CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS. Ein sehr grosse und umfangreiche Webseite , mit hunderten von Scripten zum einbauen, sehr zu empfehlen.

100% Hintergrundbild im Browser dehnend erscheinen lassen.

Unabh�ngig von der Fenstergr�sse des Browsers wird mit diesem Trick das Hintergrundbild immer in voller Gr�sse angezeigt � egal, wie gross das Bild in Wirklichkeit ist. Es wird nichts abgeschnitten oder dazugesetzt. Eine der vielen Fragen eines Webdesigners: F�r welche Bildschirmaufl�sung oder besser gesagt, f�r welche im Browser sichtbare Fl�che optimiere ich meine Website? Eine zufriedenstellende Antwort gibt es leider nicht, weil die Palette von riesigen Monitoren bis hin zum Handy reicht. Also, was solls? Man nimmt einfach eben nur eine Hintergrundfarbe oder einen Farbverlauf und w�hlt ein flexibles Layout. Das klappt.

Was aber, wenn der Auftrag lautet: �Ein Bild soll den Hintergrund der Seite ausf�llen und nix soll dabei abgeschnitten werden, egal wie gross die sichtbare Fl�che des Browserfensters gerade eben ist��

Cascading Style Sheets Learning CSS

For beginners, Starting with HTML + CSS teaches how to create a style sheet. For a quick introduction to CSS, try chapter 2 of Lie+Bos or Dave Raggett's intro to CSS. Or see examples of styling XML and CSS tips+tricks. CSS online resources style, stylesheets, stylesheet, style sheet, style, W3C, CSS, CSS1, CSS2, Web, Cascading Style Sheets, level 1, level 2, HTML, XML, Bert Bos, overview, resources, layout, formatting, resources, tutorial, tutorials, compatibility

CSS Sprite Generator

The CSS sprite generator takes a number of source images and combines them into a single "sprite" image and supplies CSS to map to each image within the sprite. The technique this tool employs is often used to improve the performance of a web site by reducing the number of HTTP requests that the client's browser needs to make. Diese Seiten liegen in mehren Sprachen vor
+++++++++++++++++++++++

Was sind CSS sprites?

CSS Sprites ist eine Technik, mir der man die Anzahl von HTTP Verbindungen der Seite herunterschrauben kann. Jede HTTP Verbindung die w�hrend des Ladens der Seite erstellt wird verlangsamt die Seite. Die Idee von CSS Sprites ist das man anstatt von vielen Bildern ein einziges verwendet und nur Teile dieses Bildes mittels der background-position Regel von CSS anzeigt.

Diese Technik kann sehr effektiv sein, besonders dann wenn man viele kleine Bilder wie Icons auf einer Seite verwendet. Zum Beispiel sind alle Bilder im linken Menu auf der Yahoo! Anfangsseite in einem einzigen File.

Probleme

Es gibt ein paar sehr nervige Browserfehler die man umgehen muss wenn man mit CSS Sprites arbeiten will.

Opera

Opera (bis zur Version 9.0) kann keine Hintergrundposition von �ber 2024 Pixel oder weniger als -2024 Pixel verarbeiten und rundet diese auf diesen Wert auf oder ab. Dieses Werkzeug umgeht das Problem indem es alle 2024 pixels eine neue Spalte erzeugt.

Safari

Safari hat ein Problem das Hintergrundbilder mehrfach angezeigt werden. Man kann das Problem umgehen indem man zwischen den Bildern ausreichend Freiraum beibeh�t. Dies kann im Werkzeug definiert werden.

Weitere Informationen

Bei A List Apart gibt es einen Artikel mit dem Titel "CSS Sprites: Image Slicing's Kiss of Death" der das Konzept von CSS Sprites im Detail erkl�rt. Falls dieser Trick was ganz Neues f�r Sie sein sollte, raten wir Ihnen den Artikel durchzulesen, damit Alles einfacher wird.

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Mit diesem Werkzeug k�nnen Sie CSS Sprites automatisch erstellen. Alles, was Sie machen m�ssen ist eine Zip Datei mit zwei oder mehr Bildern im GIF, JPG oder PNG Format hochzuladen. Das Werkzeug erstellt f�r Sie das zusammengef�gte Bild und die dazugeh�rige CSS Regeln um jedes einzelne Teilbild anzuzeigen.

Optionen

Sie k�nnen die Art und Weise wie das Werkzeug das Bild und die CSS Informationen erstellt mit mehreren Optionen Ihren Bed�rfnissen anpassen. Diese Optionen sind die folgenden:

Ursprungsbilder vergr�ssern oder verkleinern

Breite und H�he: Wenn Sie entweder die Breite oder die H�he als weniger von 100% angeben werden die Bilder dementsprechend vergr�ssert oder verkleinert. Werte �ber 100% sind nicht erlaubt da die Bildqualit�t leiden w�rde. Die Voreinstellung ist 100% was bedeutet dass die Bilder nicht ver�ndert werden.

Doppelte Bilder

Doppelte Bilder ignorieren: Doppelte Bilder werden in das Endbild eingef�gt und f�r jedes eine eigene CSS Regel erstellt.
Doppelte Bilder entfernen und CSS Klassen zusammenf�gen: Das Werkzeug vergleicht die Bilder mittels MD5 um sicherzustellen das es sich wirklich um Duplikate handelt. Diese werden entfernt und die CSS Regeln in einen Selektor zusammengef�gt.

Sprite Ausgabeoptionen

Horizontaler Abstand: Definiert den Abstand zwischen den einzelnen Bilderreihen. Dieser Wert muss gross genug sein um einer fehlerhaften Darstellung in Safari vorzubeugen. Wir empfehlen den Originalwert beizubehalten.
Vertikaler Abstand: Definiert den Abstand zwischen den einzelnen Bildern. Dieser Wert muss gross genug sein um es Besuchern zu erlauben Ihre Schriftgr�sse zu ver�ndern ohne ungewollt Teile von anderen Bildern anzuzeigen.
Hintergrundfarbe: Definiert die Hintergrundfarbe des Ausgabebildes. Das Feld erwartet einen sechs Zeichen langen hexadezimalen Farbwert. Falls keine Farbe angegeben wird erstellt das Werkzeug transparente PNG oder GIF Bilder.
Sprite Ausgabeformat: Unterst�tzte Formate sind GIF, PNG und JPG. GIF und PNG k�nnen transparente Hintergr�nde haben. Voreinstellung ist PNG.

CSS Ausgabeoptionen

CSS Pr�fix: Jede CSS Positionsangabe wird an diesen Text angeh�ngt was Ihnen erlaubt weitere ID und CSS Klassen zu definieren. Erlaubte Zeiceh sind a-z, 0-9, _, -, # und .
Erlaubt sind regul�re Ausdr�cke.: Die Teile des Ausdruckes in runden Klammern werden Teil des Klassennamens f�r die Positionierung.
CSS Pr�fix: Der eingegebene Text wird vor jedem erstellten Klassennamen eingef�gt. Dies ist wichtig, da Klassennamen nicht mit einer Nummer beginnen d�rfen. Erlaubte Zeichen sind - a-z, 0-9, _ und -. Der eingegebene Text darf nicht mit einer Nummer beginnen.
CSS Suffix: Der eingebene Text wird am Ende von jeder CSS Regel eingef�gt. Die Regeln sind die gleichen wie bei "CSS Pr�fix".

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

http://de.spritegen.website-performance.org/ In deutsche Sprache

Deutsche �bersetzung der Seite "Web Style Sheets CSS tips+tricks"

Tips+Tricks Eine kleine Auswahl von CSS Besipielen inkl. ein paar Worten zu deren Verwendung: Bild mit Text gestalten Feste Menus Einger�ckte Abs�tze Alternative Style Sheets Ein Konfetti Menu Farbige Scrollbalken loswerden (Thema User Style Sheets) Gerade/Ungerade: Farben �ndern beim Zeilenwechsel Eine Oberfl�che mit Registerkarten Ein �berblick �ber Font Styles Horizontale und vertikale Zentrierung Boxen mit Schattenwurf Text mit Schatten Abgerundete Ecken und Schatten

Deutsche �bersetzung der Seite "Web Style Sheets CSS tips+tricks"

Abgerundete Ecken und Schatten - CSS3 wird Eigenschaften f�r abgerundete Ecken, R�ndern bestehend aus Bildern und Boxenelementen mit Schatten enthalten. Aber mit etwas Arbeit kann das Alles auch schon mit CSS2 � und ohne irgendwelchen Tabellen oder Extra-HTML Code realisiert werden. Diese Seite wurde inspiriert durch eine Seite erstellt von Arve Bersvendsen. Er hat auch noch jede Menge weiterer CSS Demos im Angebot. Nat�rlich werden abgerundete Ecken oder Schatten viel einfacher umzusetzen sein mit CSS3. Zum Beispiel, um einem Absatz eine dicke rote Umrandung mit abgerundeten Ecken zuzuweisen, gen�gen zwei einfache Zeilen:

jede menge CCS infos f�r die Webseite

Eine �beraus grosse F�llen von Webabhandlungen Scriptbeispielen zu CSS finden Sie hier im Archives. - There has been 858 entries and 1640 comments since this blog's first entry in January 2003. Zudem kommen noch zahlreiche andere Tools in den Vielzahl der Hinweise zutage, Ein Besuche der Webseite lohnt sich also auf jeden Fall.

Rounded corners in CSS Runde Ecken in CCS

Rounded corners in CSS has become sort of a holy grail. The problem with most of the rounded corner techniques is that they require alteration of the HTML document itself, which means that retrofitting it onto an existing design may require a lot of effort. However, there is a solution that will allow you to retrofit this to existing designs without altering any markup. Take a look at the following example. The first images, from ten thousand kilometers away, brought to a halt the activities of all mankind. On a billion television screens, there appeared a tiny featureless cylinder, growing rapidly second by second. By the time it had doubled it�s size, no one could pretend any longer that Rama was a natural object.

Web Style Sheets CSS tips+tricks - Rounded corners and shadowed boxes

Rounded corners and shadowed boxes CSS3 will have properties to make rounded borders, borders consisting of images and boxes with shadows, but with some work you can simulate some of them already with CSS2 � and without any tables or extra mark-up. This page was inspired by one created by Arve Bersvendsen. He has many more interesting CSS demos. Of course, rounded borders and shadows will be much simpler with CSS3. For example, to give a paragraph a thick red border with rounded corners, you would need just two lines of CSS3 similar to this:
Five images on one element The main trick is to use generated content (':before' and ':after') to put four extra images on an element. The ':before' pseudo-element can have a background and a foreground image, the ':after' pseudo-element also, and the element itself can have a background, for a total of five images. We create five PNG images and put them in the four corners and against the right edge of the element. Here are the images:

internet-computer, scripte, css

Finden Sie hier Webseiten zu Css.