2010
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... Weiterlesen
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:... Weiterlesen
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... Weiterlesen
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... Weiterlesen
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... Weiterlesen
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... Weiterlesen
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... Weiterlesen
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()... Weiterlesen
2009
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... Weiterlesen
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... Weiterlesen