Kategorie

Gecodet

2010

SELFHTML nun als Wiki

Gefühlte fünf (Internet-)Jahre zu spät wird das gute alte SELFHTML endlich auf ein Wiki umgestellt. Dieses ist nun unter http://wiki.selfhtml.org/ zu erreichen. Natürlich werden neue – und vor allem begeisterte – Autoren gesucht. Wie eine Umfrage unter meinen dreiundzwanzig regelmäßigen Mitleserinnen und Mitlesern ergeben hat, haben sie alle von SELFHTML mindestens schon einmal profitiert, deshalb... 

CSS 3 Media Queries

Media types kennen wir ja nun alle (bspw. @media screen{…}), noch ein wenig unbekannt noch dagegen sind die sog. media queries. Schauen wir uns einmal so eine Query an, ich hab da mal etwas vorbereitet: <link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width: 300px)"> …könnte in unserem <head> stehen, oder im CSS: @media screen and (max-width:... 

Mehr Spass mit CSS3 in Webkit und Safari

Anmerkung vorne weg: dieser Artikel enthält Demonstrationen von CSS-Techniken, die weder in allen Webbrowsern schon noch in RSS-Readern jemals funktionieren werden. Am weitesten bei der Implementierung von CSS 3D Transformationen sind Webkit (der Browser), Safari4 und mobile Safari (iPhone OS 3). In meiner Chrome 5.0.322.2dev-Version auf dem Mac funktioniert es noch nicht, sehr wohl aber... 

CSS3 in Action

Jay & Bob Jay and Silent Bob Die Möglichkeiten, die uns CSS3 heute schon bietet, sind durchaus vielfältig. Klar, nicht alle Browser unterstützen das, aber so what? Das Bild von Jay und Silent Bob ist nur eine sehr übertriebene Demo. Mit den neuen Funktionalitäten wie border-image lassen sich auch sinnvolle DInge anstellen, z.B. Buttons. Ebenso... 

CSS3 Gradients

Einige der neuen CSS3-Funktionalitäten sind ein wenig schwer zu merken, vor allem da man sich hinsichtlich der Syntax bei Webkit und Mozilla noch nicht ganz einig ist. Ein schönes Beispiel sind gradients, für die es sogar noch M$ Filter gibt, den man setzen kann, wenn man das will. Und nur bei linearen Farbverläufen. Einmal zum... 

JS-Library: Namespace und erste Funktionen

Eigentlich habe ich ja schon seit Ewigkeiten vor, mir eine eigene, kleine Javascript-Bibliothek zusammenzustellen, in der ich die immer wiederkehrenden Funktionen, die man in Javascript so benutzt, zusammengefasst sind. Allerdings: es mangelte bis dato an der nötigen Ernsthaftigkeit, so etwas tatsächlich umzusetzen. Also dann jetzt: ich werde hier in Zukunft Funktionen etc. zusammentragen und zu... 

Geolocation im Browser erkennen

Heute wollte mir jemand weissmachen, zum Nutzen der Geolocation-Informationen des iPhones bräuchte man eine App. Quatsch. Seit iPhone 3.0 geht im Safari: navigator.geolocation.getCurrentPosition(foundLocation(position){ var lat = position.coords.latitude; var long = position.coords.longitude; alert('Found location: ' + lat + ', ' + long); }, noLocation(){ alert('Could not find location'); }); Weil ich die veraltete Information aber auch... 

jQuery 1.4: Funktionen übergeben beim Setting

Was offenbar (also an mir ist das irgendwie vorrüber gegangen) für .attr() schon länger funktioniert, wurde beim neuen jQuery 1.4 nun für alle Settingfunktion möglich gemacht: das Übergeben von Funktionen zum Setzen eines Wertes. Namentlich funktioniert das nun also bei: .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass()... 

2009

Kurz gecodet: Farbverläufe und Animationen

Eine kleine Spielerei mit diversen CSS3-Eigenschaften und CSS3-Funktionen. <style type="text/css"> .quadrat { color: #fff; height: 300px; width: 300px; font-size: 24px; line-height: 300px; text-align: center; background: blue; /* css3 magic from here on */ /* Gradient Background mit Hintergrundbild, zunächst Webkit */ background-image: url(img/twitter.png), -webkit-gradient(linear, left top, right bottom, from(blue), to(#fff)); /* Dann der etwas andere... 

Kurz gecodet: Multiple Backgrounds

Es hat sich vielleicht schon ein wenig herumgesprochen: Safari, Google Chrome und demnächst auch Firefox unterstützen multiple backgrounds. Ein kleines Snippet aus dem CSS zu 9: html body { background: url(img/9-freigestellt-666633.jpg) #666633 no-repeat 100% 107%; background: url('img/juteverlauf.jpg') repeat-x 0 0, url(img/9-freigestellt-666633.jpg) #666633 no-repeat 100% 107%; -moz-background-size: 300px 645px, contain; } Die einzeln gesetzte background ist...