Suche
Werbung
Profile im Netz
Kategorien
- (x)HTML (12)
- Abenteuerreisen Bahn (3)
- Allgemein (57)
- Apache (3)
- CMS (1)
- CSS (16)
- Fundstücke (16)
- Gentoo Linux (35)
- Inspiration (2)
- iPhone (4)
- JavaScript (5)
- jQuery (3)
- Lesestoff (2)
- Linux (18)
- Magento (5)
- Musik (3)
- Perl (3)
- PHP (34)
- Smarty-Template (2)
- TCL (1)
- Tipps und Tricks (15)
- Typo3 (1)
- Was ist eigentlich? (3)
- Webmaster-Friday (10)
- WordPress (52)
- WordPress-Plugins (24)
- XML (2)
Letzte Tweets
- Lade Tweets ...
- Folge @ppfeufer auf Twitter.
Archiv der Kategorie: CSS
CSS: Bildwechsel bei Mouseover
Ich habe mich mal wieder quer durch meine Blogliste gelesen und bin dabei auf einen Artikel bei Martin gestossen, in dem er beschreibt wie man einen simplen Mouseovereffekt hinbekommt. Seine Beschreibung bezieht sich dabei auf eine Erweiterung des <img /> – Tags mit den Attributen onmouseover=”" und onmouseout=”".
Diese Methode ist sicherlich die Einfachste aber auch anfällig, wenn der Besucher in seinem Browser JavaScript deaktiviert hat. Denn die beiden genannten Methoden sprechen die JavaScript-Engine des Browsers an. Ist diese nicht aktiv, wird kein Bildwechsel zu sehen sein.
Weiterlesen
Facebook Fanbox per CSS anpassen
Es ist bekannt, dass die übliche Facebook Fanbox nur bedingt zu beeinflussen ist, wenn es um das Aussehen geht. Der von Facebook zur Verfügung gestellte Code lässt dies einfach nicht so ganz zu. Entweder ist der Hintergrund dieser Fanbox weiß oder schwarz. Selten passt dies zum Blog dazu, gerade wenn dieser einen Hintergrund mit Struktur hat, also ein Bild im Hintergrund.
Nun wurde ich in letzter Zeit des Öfteren gefragt, wie ich das hier bei mir realisiert habe. Und bevor ich jedem einzeln den Hinweis gebe, hier für alle. Nicht ich habe die Lösung gefunden, sondern der Kai und diese beschreibt er auch direkt in einem Artikel in seinem Blog. Also, schaut euch das mal an, schwer ist es nicht.
In diesem Sinne 
How To: CSS und UTF-8
Wieder einmal ein Artikel, welcher aus einem Suchbegriff – gesucht wurde nach “smarty utf 8 css” – entstand.
Hierzu sei gesagt, das es keinen Unterschied macht, ob man dafür die Smarty-Template Engine nutzt oder nicht. CSS bleibt CSS. Aber wie bringt man CSS nun UTF-8 bei?
1 | @charset "utf-8"; |
Dies als erste Zeile im CSS unterbringen. Das wars dann auch schon.
Ach ja, bevor ich es vergesse, der Sinn und Zweck dieser Angabe im CSS ist übrigens beim W3C nachzulesen. Die haben einen Artikel namens “Angabe der Zeichencodierung in CSS” auf ihrer Seite veröffentlicht.
Viel Spaß
CSS Pseudo-Element :content
Ein hervorragendes Beispiel, dass mit CSS nicht nur DIVs und Tabellen formatieren kann zeigt CSS-Tricks im Artikel “CSS Content” auf. Dort wird beschrieben, wie man mit dem Pseudo-Element :content selbst Attribute von Tags beeinflussen kann. So wird zum Beispiel beschrieben, wie man CSS3 Tooltips schon mit CSS2 realisieren kann.
Ein sehr lesenswerter Artikel.
Cheatsheets: HTML-Entities und HTML-Colors
Diese zwei Cheatsheet habe ich in meiner PDF-Sammlung gefunden und möchte euch diese natürlich nicht vorenthalten.
HTML-Entities
Eine Übersicht über die gebräuchlichsten HTML-Entities
Download
HTML-Colors
Eine Übersicht über viele Farbcode in Hex-Schreibweise
Download
Anmerkung
Diese sind nicht von mir erstellt worden. Ich selbst habe sie vor geraumer Zeit in den Weiten des Netzes gefunden, als diese zum Download angeboten wurden. Leider weiß ich nicht mehr wo, ansonsten würde ich die Quelle gerne nennen.
Werbung
PHP CSS Browser-Selector: Die moderne Art der Browsererkennung
Gerade im Bereich Webdesign / Webentwicklung ist es wichtig, verschiedene Browser zu erkennen. Ich meine damit nicht an Hand ihre Aussehens, sondern im Quelltext einer Seite. Der Grund dafür ist ganz einfach die verschiedene Art und Weise wie die Browser mit dem Code umgehen, bzw. diesen darstellen.
Eine sehr schöne und einfache Art, welche die bisherigen Conditional Comments überflüssig macht, hat Matthias Schütz gefunden, den PHP CSS Browser-Selector. Dieser erkennt sowohl Browser, Betriebssystem und Browserengine und versieht das entsprechende HTML-Element mit den dazugehörigen Klassen.
Weiterlesen
How To: Hyperlink wie einen Button aussehen lassen und per CSS stylen
Hyperlinks sind essentielle Bestandteile von Webseiten. Nur sehen sie als reine Textlinks meistens nicht wirklich schön aus. Mit etwas CSS kann man so einen Link allerdings fast wie einen Button aussehen lassen und stylen.
Weiterlesen
CSS 3 Generator
CSS 3 hat ja nun schon einiges an Möglichkeiten, welche auch vereinzelt hier im Blog schon vorgestellt wurden.
Randy Jensen hat nun eine Möglichkeit entwickelt, mit der sich per Klick schnell und einfach CSS3-Deklarationen erstellen lassen. Dazu zählen unter Anderem Effekte wie Box-Shadow, Text-Shadow, Border-Radius, @font-face oder “Multiple Columns”.
Link: http://css3generator.com/
Sehr schön ist die Einblendung der Browser, die unterschiedliche CSS3-Attribute unterstützen.
CSS3 – Infinite Zoom
CSS3 ist ja nun mittlerweile in beinahe aller Munde. Viele experimentieren damit, um aufzuzeigen, was nun alles möglich ist, und was nicht. Leider ist es so, dass noch nicht alle Browser CSS3 wirklich komplett unterstützen. Absolute Vorreiter sind da die Browser. welche die Webkit-Engine nutzen, also Safari und Google Chrome.
Und welche schönen Spielereien mit CSS3 alles möglich sind, zeigt Stu Nichols auf seiner Seite CSSplay im Moment in sehr beeindruckender Art und Weise. Ganz neu dabei, der Infinite-Zoom, oder wie er es bezeichnet: CSS3 – Zoom…zoooom…zoooooom!
Auch diesen Effekt kann man im Moment leider nur mit den beiden genannten Browsern Safari und Google Chrome bewundern, aber es ist lohnend.
CSS3 – Textshadow, oder was alles machbar ist
Die Möglichkeiten von CSS3 scheinen schier unglaublich zu sein. Da gibt es eine Option text-shadow, welche eigentlich nichts anderes macht, als einen Text mit einem definierten Schatten zu hinterlegen. An sich schon ne recht schöne Sache. Aber wenn nun ein CSS-Spezi sich dem ganzen annimmt, wird es einfach nur noch geil.
Ach ja, folgende Demo läuft nur unter den Browsern Safari, Firefox 3.5+, Opera und Google Chrome.
Demo: text-shadow box
Werbung
