SVG in VML konvertieren | pixelfans

16 Feb 2011

CreativeCommons Icon mit CSS

geschrieben von carsten

Noch ein Icon, das auf Bilder verzichtet und stattdessen CSS benutzt. Eines für CreativeCommons Lizenzen.

Weil mir sowohl beim Ideengeber Nicolas Gallagher als auch bei Pawels Experimenten mit den puren CSS Icons bisher ein Symbol zur Auszeichnung von CreativeCommons Lizenzen gefehlt hat, habe ich heute noch eines nachgeschoben.

Es ist sozusagen das copyleft-Pendant zum oft verwendeten ©.

Mein Beispiel basiert auf einem einfachen Link-Tag mit rel-Attribut "license".

<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/de/">Creative Commons</a>

Demo des CreativeCommons Icon

Mit den paar Zeilen in den eigenen CSS ist es getan.

a[rel~='license']:link, 
a[rel~='license']:visited {
    padding-left:28px;
    color:#272727;
    position:relative;
    z-index:1;    
    text-decoration: none;
}
a[rel~='license']:before, 
a[rel~='license']:after {
    content:"c";
    position:absolute;
    top:50%;
    left:0;
    margin:-8px 0 0;
    -webkit-border-radius:16px; 
    -moz-border-radius:16px; 
    border-radius:16px;    
    line-height:11px;
    color:transparent;
    color:rgba(0,0,0,0);
    text-align:left;    
}
a[rel~='license']:before {
    left:8px; 
    background:#272727;
    width:1em; 
    height:1em;   
    text-shadow:8px 0 0 #fff;
    border:1px solid #272727;
}
a[rel~='license']:after {
    left:9px;
    margin-top:-7px;
    z-index:10;  
    text-shadow:1px 0 0 #fff;
}
a[rel~='license']:hover:before,
a[rel~='license']:focus:before,
a[rel~='license']:active:before {
    background:#fff;
    text-shadow:8px 0 0 #272727;
}
a[rel~='license']:hover:after, 
a[rel~='license']:focus:after,
a[rel~='license']:active:after {
    text-shadow:1px 0 0 #272727;
}

Das schöne ist, dass mein Konstrukt - im Gegensatz zum Original - mit einem einzigen HTML-Element auskommt. Damit lässt sich das Icon an nahezu beliebiger Stelle einsetzen, ohne zusätzliches Markup zu erfordern.

Ist natürlich auch hier wieder voll der CSS3-Horror und sollte nicht immer und überall live verwendet werden. Nebenan auf medienstadt.info hab ich's aber schon eingebaut.

Kategorie: | Trackbacks (0) | Permalink

14 Feb 2011

crossbrowser CSS color: transparent;

geschrieben von carsten

Beispeil im labs

In Verbindung mit opacity verliert Chrome die Fähigkeit zur Darstellung von multiplen Textschatten. Er zeigt dann nur noch den zuletzt definierten an.

Kategorie: | Trackbacks (0) | Permalink

localhost via virtualbox - auch mit Domainauflösung

geschrieben von carsten

Bei der Webentwicklung kommt es immer wieder auf gründliches und möglichst allumfassendes Testen an.

Was sieht meine Webseite in einem älteren Browser aus, funktioniert mein JavaScript Code auch in einem anderen Betriebssystem, etc? Wer dabei lokal entwickelt, muss auf Dienste wie browsershots u.ä. leider verzichten und kommt deshalb um virtuelle Maschinen (VM) aller Art nicht drumrum.

Die Virtualbox ist da schon recht komfortabel und über ein GUI zu administrieren, was ich sehr bevorzuge. In wenigen Minuten ist ein neues System installiert, mit einem Netzwerkadapter ausgestattet und im www unterwegs.

Damit bin ich also genauso weit wie mit o.g. Browsershots. Ich kann Webseiten testen, die sich bereits auf einem Liveserver befinden. Leider ist das nur die halbe Miete.

Gebe ich aber nun z.B. http://localhost/pixelfans/ im Browser meiner virtuellen Maschine ein, bekomme ich eine Fehlermeldung, weil mein virtueller Freund innerhalb seiner eigenen Grenzen nach dem Verzeichnis /pixelfans sucht und das logischerweise dort nicht existiert. Die VM sollte also auf meinem echten - physischen - Rechner nach dem Verzeichniss suchen, das weiß sie nur leider noch nicht.

Ein kurzer Blick in die aktuelle virtuelle Konfiguration verrät mir, dass mein Gateway - also der echte Rechner - die IP 10.0.2.2 besitzt. Folglich führt mich der Aufruf http://10.0.2.2/pixelfans/ zum Ziel und meine lokale Webseite wird angezeigt. Soweit so gut.

Um beim Entwicklen und Testen nah am Livesystem zu sein, bietet sich häufig an, auch unter xampp bzw. wampp vermeintliche Domainnamen oder sogar Subdomains zu etablieren. In meinem Fall bekomme ich nun zwar mein Verzeichniss /pixelfans mit allen Inhalten ausgeliefert, es sieht aber total zerhackt aus weil jegliche referenzierten Daten, wie Stylesheets, Scripte und Bilder fehlen. Die sucht mein virtueller Browser nämlich unter http://pixelfans.dev/... und findet nix, weil er noch nicht weiß, wohin er diese Anfrage routen soll.

Helfen wir ihm, indem wir in der hosts-Datei der virtuellen Maschine einige Zeilen ergänzen, die wir aus der eigenen hosts-Datei der physischen Maschine fast vollständig kopieren können.

In der physischen hosts-datei steht also

127.0.0.1 pixelfans.dev
127.0.0.1 http://www.pixelfans.dev
127.0.0.1 labs.pixelfans.dev

und in die virtuelle hosts-Datei tragen wir also Folgendes ein:

10.0.2.2 pixelfans.dev
10.0.2.2 http://www.pixelfans.dev
10.0.2.2 labs.pixelfans.dev

Speichern, Browser aktualisieren, Bingo fertig!

Im Übrigen weiß wikipedia sehr gut, wo sich die hosts-Datei auf unterschiedlichsten Systemen befindet.

Nach einer kurzen Recherchen dazu, habe ich erfahren, dass die IP 10.0.2.2 der Standard ist. Man kann sich also den Blick in die Konfiguration sparen und sie analog verwenden. Unter Umständen muss in der VM noch das Virtualbox-Paket "Guest Additions" nachinstalliert werden, das macht virtualbox aber auf Wunsch von alleine und man hat damit keine Nervereien

Kategorie: News | Trackbacks (0) | Permalink