Code Snippets CSS

Die Idee der Sammlung dieser Snippets war jene, dass es zwar gute Snipps gibt, aber immer wieder irgendwann diese “privaten” Seiten verschwinden und damit das wertvolle Gedankengut. Soweit es mir möglich war, habe ich die Copyrights recherchiert und angeführt.
Bei diesen Snippets handelt es sich nicht um kommerzielle Listung sondern um ein Archiv wertvoller Gedanken.

CSS Generator

CSS zurücksetzen

Transition Background

Float richtig einbinden

Float mit Sidebar Header und Footer

Float mit Text

CSS Code mit PHP komprimieren

Copyright by http://www.hoerandl.com/code-schnipsel/php-codes/allgemein/item/css-mit-php-komprimieren

Die CSS Datei .css auf .css.php umbenennen und ergänzen Anfangs mit folgenden Zeilen:

Code Beispiel

Die CSS Datei “style.css” …

… hätte dann den Namen “style.css.php” und würde so aussehen:

Der Code des obigen Beispiels wird so vom PHP Parser geliefert:

Einbau in die HTML Seite
In den Header der HTML Seite muss diese PHP Datei natürlich wie eine CSS Datei eingebaut werden:

Meta Tags einer Webseite anzeigen

Mit einem einfachen Befehl lassen sich alle META-Tags einer Seite auslesen und in ein Array schreiben. Dieses Array muss dann nur noch ausgegeben werden.

Copyright by http://www.hoerandl.com/code-schnipsel/php-codes/allgemein/item/alle-meta-tags-einer-homepage-anzeigen

Emailadresse auf Gültigkeit prüfen

Diese Funktion überprüft zunächst ob die E-Mail Adresse auch eine richtige Struktur hat. (auch gültige Umlaute werden überprüft)
Danach wird die Adresse auf existierenden Host überprüft.

Copyright by http://www.hoerandl.com/code-schnipsel/php-codes/allgemein/item/e-mail-adresse-auf-gueltigkeit-ueberpruefen

Im folgenden Code wird diese Funktion erstellt. Danach wird mit Hilfe dieser Funktion eine ungültige E-Mail Adresse und eine gültige E-Mail Adresse überprüft.

TRANSPARENZ

Darstellung von Boxen und Text halbtransparent

Copyright by http://tobias-otte.de/essays/css-transparenz/ ODER http://www.hoerandl.com/code-schnipsel/css-codes/item/transparenz
(ist auf beiden Websites angeführt)

filter ist eine spezielle Eigenschaft des InternetExplorers und funktioniert schon ab dem IE4.

opacity ist eine Eigenschaften welche eigentlich erst mit CSS3 in die Browser implementiert werden sollen. Zulässig sind Werte zwischen 0.00 (totale Transparenz) und 1.00 (keine Transparenz). Mit dem Wert 0.5 erreicht man eine 50%ige Transparenz.

Eine kompletter Code für eine transparente Box auf einer Hintergrundgrafik könnte so aussehen:

Transparenz mit RGB

RGB steht für Red, Green, Blue und ist ein Farbraum. Für Farbangaben bei Websites werden in der Regel HEX-Codes verwendet. RGBA ist eine Erweiterung des RGB-Farbraums und steht für Red, Green, Blue, Alpha. Alpha bezieht sich auf die Opacity, bzw. auf den Grad der Transparenz.

Komplettes Beispiel:

Schrift und Schatten

CSS3 bietet eine Eigenschaft ‘text-shadow’ um bei einem Buchstaben einen Schatten zu erzeugen. Mit kurzen Definitionen können beeindruckende Effekte erzielt werden.
Weiters bietet CSS3 die Eigenschaft ‘box-shadow’. Damit lassen sich ohne jede Grafik Schatten um Block-Level-Elemente werfen.

Copyright by http://www.wss-expert.de/Style/Examples/007/text-shadow.html

Ein paar Beispiele:

Box mit Schatten

Externe Links markieren

Links die die eigene Homepage verlassen sollten gekennzeichnet werden. Benutzer sollten schon vorher sehen was passiert wenn sie auf den Link klicken.

Copyright by http://www.hoerandl.com/code-schnipsel/css-codes/item/externe-links-markieren

Wie du so eine benutzerfreundliche Kennzeichnung realisierst, kannst du im folgenden Code sehen:

Ein komplettes Beispiel:

abgerundete Ecken in allen Browsern

copyright by http://www.hoerandl.com/code-schnipsel/css-codes/item/abgerundete-ecken-in-allen-browsern

Und das für die IE:
kompletter Code:
Individuelle Rundungen:
Share it:Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someonePrint this page

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.