Na liebe Schtifte und Ausgelehrte, habt Ihr euch etwa auch schon über solch amüsante Bilder gewundert?
…schon mal New York als Miniatur gesehen?
… oder den Hoover-Damm in Spielzeugformat?
Auch Schtift wunderte sich über Aufnahmen dieser Art… Und natürlich hat er sich darüber schlau gemacht… Gut ist meine Cheffin Fotografin, dass half!
Was es mit diesem Effekt genau auf sich hat und wie sowas gemacht wird, verrate ich euch in ein paar Tagen. Zuvor will ich mich selbst noch etwas mit diesem Thema beschäftigen, denn schliesslich will ich euch keinen Mist erzählen… Nur soviel: Der Effekt nennt sich “Tilt Shift” und ist gleichermassen praktisch wie auch witzig! Aber mehr dazu später…!:-)
Tja, dass sauberer Code bei einer Website ein Muss ist, ist allgemein bekannt. Doch gestern hat mir das www eindrücklich erklärt warum das so ist… Weil ich bei einem Link in einem Artikel ein Anführungszeichen vergessen hatte und somit target=”blank an Stelle von target=”blank” geschrieben hatte, sah schtift.ch gestern so aus:
Du kannst die Sauberkeit deiner Website auf validator.w3.org testen. Es gibt auch jede Menge andere Validator-Seiten.
Erneut habe ich was sehr interessantes in den tiefen des Internets gefunden: Die Internetseite cut-and-paste.ch stellt Merkblätter für allerei Nützliches ins www. Auf folgendem Merkblatt kannst du alles was du über Proportionen wissen musst entnehmen: Merkblatt Proportionen
Erst vor wenigen Wochen hat mir mein Chef einen sehr praktischen CSS-Trick für Hovereffekte mit Bildern verraten!
Problem: Hover-Effekte mit Bildern haben oft mit langsamen Server-Verbindungen zu kämpfen. Sprich wenn der User mit der Maus über den Link fährt verschwindet das Bild für eine Sekunde (oder auch mehr…) bevor dann dass zweite Bild erscheint. Sehr schlimm kann es z.B. bei einer Toolbar werden wenn mehrere Links nebeneinander aufgelistet werden: Da jeder Link aus zwei Bildern besteht (Azeigebild und Hooverbild) muss der Browser jedes mal die Bilder beim Server abfragen gehen: Browser:”Hey Server, ist Hoverbild da?”, Server:”Moment… ja ist da!”, Browser:”Wärst du wohl so freundlich es mir zu geben?”, Server:”Hier hast es!”. Ungefähr so läuft dies bei jedem einzelnen Link ab. Das ganze Prozedere bei jedem Bild braucht enorm viel Zeit.
Lösung: Die Metanavi im Footer dieser Seite ist ein geeignetes Beispiel: Es sind 7 Navigationspunkte. Noch vor wenigen Wochen hätte ich dafür 14 einzelne Bilder benötigt ( je ein Anzeige- und Hooverbild).Der Trick ist nun nicht 14 einzelne Bilder zu machen, sondern ein einziges in welchem alle Navigationspunkte beinhaltet:
Man schreibt den CSS-Code so, dass beim hovern kein neues Bild geladen wird, sonder das einzelne grosse Bild nur verschoben wird. Dies hat den grossen Vorteil dass für die ganze Navi nur ein Bild und nicht 14 Bilder geladen werden müssen. Cool nicht?
Bisheriger CSS-Code für einen einzelnen Navigationspunkt.Über #flickr: hover wird ein zweites Bild geladen.
Optimierter CSS-Code: Durch #flickr:hover wird ein und das selbe Bild nur verschoben.
… und so sieht nun das einizige Bild (icons-contact.png) aus. Das coole daran ist dass es auch mit pngs’ funktioniert!
Kürzliche Kommentare