Schwenken Sie die Zielflagge! Kommentare sind geschlossen und das Teilnahmeformular ist nicht mehr verfügbar, da die Frist für den CSS Off abgelaufen ist. Wir hatten unglaubliche 136 Einreichungen! Einige kurz vor Schluss, was mich befürchten lässt, dass manche Leute es nicht geschafft haben, aber so waren die Regeln. Ich dachte ehrlich gesagt, es wären höchstens 20 bis 30.
Wir werden bald mit der Bewertung beginnen. Das wird eine große Aufgabe für @dougneiner und mich, also haben Sie bitte Geduld mit uns, das wird wahrscheinlich einige Wochen dauern. Irgendwann werden wir jede Einreichung für alle durchsuchbar machen, mit Notizen und Bewertungen. Kurz darauf werden wir die Gewinner bekannt geben und mit der Preisvergabe beginnen.
Wie versprochen, werde ich 408 $ an eine Hilfsorganisation für Haiti spenden. Ich werde sie noch etwas genauer recherchieren, aber ich denke an Ärzte ohne Grenzen.
In anderen Nachrichten
Ich habe mein eigenes "Basis"-WordPress-Theme erstellt und verwende es, wenn ich ein neues WordPress-Projekt beginne. Ich nenne es BLANK und habe es heute über Digging Into WordPress veröffentlicht, falls Sie es sich ansehen möchten.
Kürzlich fragte mich jemand, ob es eine Möglichkeit gäbe, eine öffentliche Seite zu erstellen, um jemandem (z. B. einem Kunden) den Status der Websites in seinem Are My Sites Up-Konto anzuzeigen. Das ist möglich, und ich habe gezeigt, wie es geht.
Wow, 136 ist eine Menge!
Ich kann es kaum erwarten, die Ergebnisse zu sehen. Durch die Teilnahme am Wettbewerb habe ich viel gelernt.
Zustimmung. Ich musste noch nie z-index verwenden, und jetzt hat es mir das Leben gerettet :)
Ich auch, und was z-index angeht, benutze ich es zwar schon, aber nie so viel.
Es war definitiv ein unterhaltsamer Wettbewerb zur Teilnahme. Obwohl es ein paar Ideen gab, für die mir die Zeit ausging (ich habe erst vor ein paar Tagen angefangen), bin ich ziemlich stolz auf meine Einreichung. Ich hoffe, dass die Tatsache, dass ich alles nicht in einem Ordner innerhalb des .zip abgelegt habe, mich nicht disqualifiziert!
WOW! Das sind viele Einreichungen. Viel Glück Ihnen und Herrn Niener. Ich bin sicher, es wird lange dauern. Ich bin definitiv daran interessiert, alle verschiedenen Einreichungen zu sehen.
Ach ja, und am Rande, danke für das Angebot des BLANK WordPress-Themes zum Download. Es wird mein Standard-WordPress-Theme sein, von dem aus ich in Zukunft entwickeln werde. :)
Verdammt! Habe es nicht geschafft. Es hat auf jeden Fall Spaß gemacht, daran teilzunehmen. Kann es kaum erwarten, die Ergebnisse zu sehen!
Fantastisch!
Ich freue mich auf die Ergebnisse, wünschte mir, ich hätte mehr Zeit für meine aufgewendet haha
Ich würde gerne hören, wie ihr das gemacht habt?
Wie habt ihr die Schriftarten gemacht?
Was ist mit dem Button?
Ich habe das cufon-Skript für die Überschriften, das Menü und die Schaltflächen für die Schriftarten verwendet. Ich habe es zuerst mit @font-face versucht, habe mich aber später dagegen entschieden. Ich habe mich für Pixelperfektion entschieden, weshalb ich auch cufon gewählt habe.
Dann habe ich für ein paar schicke Sachen einen Sprite für das Datumsfeld erstellt, nur um damit anzugeben, haha.
Und natürlich habe ich die Sliding-Doors-Technik für den Button verwendet.
Ich habe nicht viel CSS 3 verwendet, soweit ich mich erinnere, aber ich habe es über alle Browser hinweg zum Laufen gebracht, mit nur wenigen Pixel Unterschieden in IE6.
Es wäre viel einfacher gewesen, wenn wir IE überhaupt nicht unterstützen müssten, mit CSS3 und mehreren Hintergründen und so. Aber ich denke, es ist auch ohne ganz gut gelaufen.
Ich habe keine Font-Replacement-Techniken wegen Lizenzproblemen verwendet. Daher habe ich Bildersetzung verwendet.
hmm, habe nicht daran gedacht, die Schriftart zu ändern :/
Obwohl ich wünschte, ich hätte es getan. Was den Button angeht, habe ich ein einzelnes Bild mit einem Gradienten von etwa 1 Pixel verwendet, es über die gesamte Breite wiederholt und mit CSS3 und einer Randfarbe für den Effekt abgerundet.
Scheint gut gemacht zu sein – wie wäre es, wenn Sie es online stellen? :>
Ich glaube, ich warte, bis Chris mit der Abstimmung fertig ist :)
Für die Schriftart habe ich eine ähnliche verwendet ("Existence Light") und @font-face
Ich bin froh zu hören, dass ich nicht der Einzige war, der Schwierigkeiten hatte, die Zeit zu finden! Meine wurde heute in der Mittagspause fertig!
Ich bin den Weg von CSS3 gegangen, der sich progressiv verschlechtert, leider war meine Mittagspause nicht lang genug, um IE6 ganz glücklich zu machen, aber alles andere war ziemlich gut!
Ich stelle mir ein hohes Niveau auf allen Ebenen vor und freue mich auf die Ergebnisse!
Glückwunsch + Danke an Chris für ein so herausforderndes Design!
+ Danke im Voraus an Chris und Doug, dass sie sich die Zeit genommen haben, dies durchzugehen und zu bewerten!
Anfangs hatte ich viele Pläne, was ich damit machen wollte, einschließlich der möglichen Hinzufügung von jQuery und CSS3 für progressive Verbesserung, aber am Ende habe ich mich entschieden, nur sauberen, schönen Code zu verwenden und ihn über alle Browser, einschließlich IE6, so genau wie möglich am Standard auszurichten. In dieser Hinsicht glaube ich, dass ich Erfolg hatte. Als ehemaliger reiner Print-Designer codiere ich erst seit etwa 8 Monaten HTML und CSS, aber ich liebe es, es ist sehr lohnend, auch mit all den Frustrationen, die es mit sich bringen kann. Ich bin sehr neugierig, wie meine Einreichung im Vergleich zu allen anderen abschneidet. Ich habe großen Respekt vor dem, was Sie hier tun, Chris, und hoffe eines Tages, genauso gut in dem zu sein, was ich tue. Machen Sie weiter so, es wird geschätzt.
Ich hatte viel Spaß dabei. Ich weiß nicht, ob ich gewinne oder verliere, aber ich bin froh, dass meine Einreichung mit Notizen und Noten verfügbar sein wird. Ich bin wirklich daran interessiert zu sehen, wie andere den Entwurf codiert haben. Ich frage mich, ob meine Lösung üblich oder unorthodox war.
Ich bin stolz auf meine Einreichung und habe dabei viel gelernt. Mein endgültiger Code war ganz anders, als ich ihn ursprünglich geplant hatte, als ich mir das PSD zum ersten Mal angesehen habe. Ich werde ehrlich sein, ich fand das Design täuschend schwierig.
Vielleicht schreibe ich sogar einen Blogbeitrag über meinen eigenen Denkprozess beim Codieren des Designs.
Ja, es war definitiv schwieriger, als es auf den ersten Blick aussah.
Ich habe meine in etwa 3 Stunden fertiggestellt, daher hatte ich keine Gelegenheit, coole Font-Replacement-Techniken zu verwenden. Ich habe nur Bilder für Text verwendet, der "schick" war.
Der einzige Teil des Designs, bei dem ich ratlos war, war, wie die Absätze um das Bild herumfließen, wie im Bild, nur dass es nach meinem Wissen über CSS nicht möglich zu sein scheint, also habe ich es vereinfacht.
Hoffentlich habe ich es gut gemacht. Es sieht in allen Browsern fast 100% identisch aus, also Juhu!!
Wenn Sie ein Inline-Element wie ein `span` als Container für das Bild verwenden, können Sie es in einen Absatz einfügen und links ausrichten, ein paar Ränder für den Abstand hinzufügen, und der Text wird darum herumfließen…
Ich wünschte, ich hätte Zeit zum Teilnehmen gehabt, aber ich freue mich auf die Ergebnisse!
Das hat Spaß gemacht! Ich habe mich auf schlankes, semantisches und zugängliches Markup konzentriert. Es ist reines CSS und HTML. Der Vorteil war, dass ich keine Browser-Hacks brauchte (nicht einmal für IE6)…
Es hat mich etwa 4 Stunden gekostet und danach wünschte ich, ich hätte mehr Zeit für das Ganze aufgewendet, um es perfekter zu machen (besonders das Hintergrundverhalten).
Mal sehen, was dabei herauskommt…
Ich habe tolle Dinge über Ärzte ohne Grenzen gehört. Das sollte eine sichere Wahl sein.
Es wird cool sein, Feedback/Notizen von euch coolen Jungs zu bekommen :)
Interessant, dass es 135 andere Teilnehmer gibt – obwohl ich ehrlich gesagt nicht sicher war, wie viele es sein würden. Schön, ein Bild vom Wettbewerb zu bekommen ;)
Ich gebe zu, dass ich mehr für meine Einreichung geplant hatte – ich wollte sie als Gelegenheit nutzen, um mit zusätzlichem Schnickschnack und cleveren Dingen zu experimentieren, wurde aber in den letzten Tagen von anderen Projekten abgelenkt und habe mich schließlich darauf beschränkt, nur das PSD zu imitieren.
Ich hatte gestern Abend eine Nachtschicht (eigentlich frühmorgens) und habe heute in meiner Mittagspause noch ein paar Dinge fertiggestellt (glücklicherweise ist die CST-Zeitzone hier in Großbritannien 5 Stunden zurück).
Ich bin irgendwie aufgeregt, aber auch nervös, dass unsere Arbeit bewertet und öffentlich gemacht wird! Es wird interessant sein, die Techniken anderer zu sehen.
Danke für den Wettbewerb, Chris. Ich hoffe, dass weitere folgen werden. Ich glaube, er könnte in der CSS-Welt für viel Aufsehen sorgen, besonders wenn er regelmäßig stattfindet.
PS. Danke, Dropbox! :D
Ich habe keine ausgefallenen Techniken verwendet, es braucht nichts dergleichen, und ich habe auch keine Bildersetzung oder so etwas verwendet, es ist alles CSS/HTML mit etwas progressive enhancement, das natürlich in allen Browsern, einschließlich IE6, funktioniert (es sollte nicht in jedem Browser gleich aussehen).
Ich habe es heute auch fertiggestellt, ich hatte nicht genug Zeit, aber ich bin ziemlich zufrieden mit dem, was ich getan habe.
Wow... 135 Einsendungen... das ist viel zu viel... Mir ist auch aufgefallen, dass ich einen großen Fehler gemacht habe, indem ich versehentlich vergessen habe, alle Inhalte in den richtigen Ordner "CSS Off Entry – YOUR NAME" zu legen…
Nichtsdestotrotz habe ich reines HTML 5 verwendet, mit dem html5-aktivierenden Skript, damit es unter IE funktioniert. Ich habe auch ie8.js und ein einzelnes IE-spezifisches Stylesheet verwendet, um alle Probleme dieses Browsers zu beheben.
Ich habe eine der Font Squirrels Fontface-Schriftarten verwendet, um Helvetica Neue auf Systemen zu ersetzen, die sie nicht haben. Ich habe sie unter IE wegen der Kantenglättungsprobleme deaktiviert.
Ich habe Alpha-Hintergründe und Hintergrundverläufe anstelle von Bildern verwendet, wo immer es möglich war (auch unter IE).
Ich habe einen einfachen Schriftschatten als Hover-Effekt für normale Links verwendet.
Es war ein sehr interessanter Wettbewerb und ich hatte die Gelegenheit, mein Coding zu verbessern, daher bin ich zufrieden, egal wie die Ergebnisse aussehen.
Ich meinte "Ich habe auch bemerkt, dass ich einen großen Fehler gemacht habe, indem ich versehentlich..."
DW: Ich habe beschlossen, meine Kopie auch online zu stellen, aber nur für kurze Zeit. Sie ist verfügbar unter ptmblogger.co.cc/files/CSS-Off. Sagen Sie mir, was Sie denken, und bedenken Sie, dass ich keine Helvetica Neue zum Testen hatte.
Nun, gute Verwendung von HTML 5, aber haben Sie Ihre unter IE 6 nicht überprüft? Es sieht für mich komplett durcheinander aus.
Wenn es keine Anerkennung für HTML 5 und CSS 3 gibt, warum dann ein Risiko eingehen?
Übrigens, hier sind zwei Screenshots, die ich in IE 6 gemacht habe. In IE 7 sieht Ihr Beitrag etwas besser aus, aber immer noch durcheinander. Weiß nicht, was Sie mit "mit dem html5-aktivierenden Skript, damit es unter IE funktioniert" meinen.
http://img685.imageshack.us/img685/870/ie6.png
http://img685.imageshack.us/img685/4835/ie61.png
DW: Ich meinte dieses Skript: http://code.google.com/p/html5shiv/
Ich habe die Uhr absichtlich versteckt wegen IE6s Problemen mit Transparenz und weil ich keine Hintergrundpositionierung mit dem Alpha-Filter verwenden kann.
Dieses Problem im Footer war meine Faulheit. Ich habe es nicht geschafft, den Copyright- und Footer-Text wie erwartet in IE7 und darunter zum Laufen zu bringen, also habe ich einfach alle Floats deaktiviert, aber vergessen, das Copyright mit dem Text auszurichten.
Und ich habe eine "billige Ersetzung" für CSS-Textschatten verwendet, indem ich den Glow-Filter in IE benutzt habe, aber das bereue ich jetzt...
Vergessen Sie nicht, dass das Design in älteren Browsern nicht pixelgenau sein muss, sondern nur benutzbar.
Obwohl ich immer noch nicht verstanden habe, wie Sie die Web-Schriftart mit IE zum Laufen gebracht haben, habe ich die .eot-Datei nicht weggelassen, weil sie unter IE nicht gut aussah... O_O
Sieht gut aus, aber wo sind die Farbverläufe in den drei unteren Feldern?
Außerdem hätte ich @font-face nicht verwendet, ich denke, die Unterstützung dafür ist viel zu gering. Ich hätte Bildersetzung verwendet, zumindest für das Logo.
Und wo sind die kleinen Schatten über den roten Linien links und rechts der Hauptbox? ;)
Oh, ich habe diese Schatten komplett vergessen. Na ja.. :(
Ich bin wirklich abgelenkt, ich habe erst jetzt bemerkt, dass die endgültigen Einreichungen online gestellt werden sollten! Ich habe beschlossen, die Seite jetzt wieder offline zu nehmen.
Vielen Dank auch an alle, die ihre Meinungen gepostet haben, da sie mir einige Perspektiven für das nächste Mal beim Codieren gegeben haben.
Hallo Chris, ich möchte wissen, ob ich meine Einreichung auf meiner Seite als Studie teilen kann oder ob ich auf die Ergebnisse warten muss?
Wie aufregend! Es werden lange Wochen sein, bis die Ergebnisse da sind. Ich wünschte, ich wäre nicht so ein Anfänger in Sachen Webdesign. Ich hätte gerne eine Lösung für das Mockup eingereicht. Ich sammle Uhren und arbeite daran, daher habe ich eine große Wertschätzung für das Zeitthema. Ich freue mich darauf, alle Einreichungen zu sehen.
Wow! 136 Einreichungen, das ist ein großer Erfolg für diesen Wettbewerb, Chris. Sie freuen sich sicher sehr zu wissen, wie sehr Ihre Leser Sie lieben und respektieren. Ich meine... der Preis interessiert mich nicht wirklich... aber wie Sie sagen, es ist eine Ehre, an einem solchen Wettbewerb teilzunehmen.
Ich habe unterwegs ein paar Dinge gelernt. Zugegebenermaßen ist das Mockup komplizierter, als es aussieht. Das Z-Index-Ding, Elemente überlappen sich, Bilder erscheinen an herausfordernden Positionen... das hat mir mit diesem Mockup Spaß gemacht.
Natürlich hoffe ich, diesen Wettbewerb gewinnen zu können, aber wenn nicht, bin ich trotzdem sehr glücklich, von den anderen zu lernen. Ich denke, dieses Mockup ist mit Abstand das am meisten in HTML konvertierte. Es gibt 136 (hoffentlich) verschiedene Wege, dies zu tun. Es muss also sehr interessant sein, nicht die gleichen Perspektiven und Techniken zu sehen. Vielleicht würden einige kreative Leute das Design mit jQuery, Javascript usw. noch schicker gestalten.
Ohne meine Einreichung hätte die Spende an Haiti übrigens 405 $ betragen können, haha, das macht mich also auch glücklich.
Ich bin neugierig, die Größen der Zip-Dateien herauszufinden.
Meine war etwa 4-500 kb
Ziemlich große Bandbreite. Irgendwo von 100 k bis fast 2 MB.
Meine war 600 KB. Ich schätze, ich hätte etwas besser optimieren können.
meine war 80kb ~ 90kb
Ich habe gerade meine überprüft. 98kb
Wow, das ist ein gutes Ergebnis, meins war ungefähr 250. Was verwenden Sie für die Bildkomprimierung?
Meine war auch 98kb.
Ach, ich habe gerade bemerkt, dass ich alle Grafiken als PNGs gespeichert habe, deshalb ist es so schwer…
Ich glaube, ich habe PNG und JPG verwendet. Sowohl PNG-8 als auch PNG-24
Nun, ich habe niemanden verklagt :). Ich habe verwendet ;)
Meine war 125kb.
Meine war 823 KB
Wenn ich vergessen habe, die Zip-Datei richtig zu benennen, bin ich raus?
Ich glaube nicht, dass ich Punkte abziehe, wenn Sie den Namen der Zip-Datei oder des Ordners falsch geschrieben haben. Aber Sie mussten wirklich eine index.html-Datei im Ordner haben. Es würde viel zu viel Zeit in Anspruch nehmen, die Organisation anders zu finden.
Ich mag diese Idee (; Ich hatte keine Zeit, am Wettbewerb teilzunehmen, aber letzte Nacht habe ich ein paar Stunden nur zum Spaß verbracht. Ich würde gerne andere Arbeiten aus Neugier sehen – ich kann es kaum erwarten, die Ergebnisse (; Hier ist meine: http://mwit.info/css-tricks
(keine Schriftart-Tricks, minimale Spielereien mit dem *Weiterlesen*-Button, keine bedingten Stile, kein JS)
Das Markup ist sauber, sieht in FF glatt aus, aber in IE 6 ist Ihre min-height etwas durcheinander.
Abgesehen davon gut gemacht. Viel Glück.
Streichen Sie den obigen Kommentar, ich meine in der iPhone-Version. Aber das zählt wohl nicht. Also gut gemacht :p
Hallo Chris, gut gemacht mit dem gesamten Projekt und dem Geld, das Sie sehr großzügig für Haiti "gesammelt" haben. Sehr gut gemacht in der Tat.
Ach, Mist! Ich dachte, ich hätte gesagt Freitag :/ Habe die ganze Woche daran gearbeitet, lol :p Ich hoffe, Sie werden wieder einen solchen Wettbewerb veranstalten, es hat Spaß gemacht!
Schön, dass so viele teilgenommen haben! Viel Glück an alle! :)
Ärzte ohne Grenzen ist eine großartige Wahl. Ich habe für diese Organisation als Videoeditor in Frankreich (MSF) gearbeitet und sie waren wirklich nette und gut organisierte Leute. Definitiv eine NGO, der Sie vertrauen können.
Es ist schade, dass ich wirklich mit einem Projekt mit knapper Frist beschäftigt war, ich hätte meiner Einreichung mehr Zeit geben wollen. Trotzdem danke für diesen coolen CSS Off und Grüße aus Spanien :)
Es war eine wirklich lustige Herausforderung. Das Design war täuschend herausfordernd. Sehr gute Übung.
Irgendwie habe ich diese Seite auf der Suche nach WordPress gefunden, das ich noch nie zuvor benutzt habe, aber jetzt möchte ich es auf meiner Seite einsetzen… also danke für das "Blank Theme".
Auch wenn es nicht so leer ist, wie ich gehofft hatte… :-)
Es gibt ein paar Dinge, von denen ich nicht einmal weiß, was sie sind, wie
und wp_head() scheint mit jQuery verknüpft zu sein ??? … ich hatte keine Ahnung, dass WordPress jQuery braucht
Entschuldigung, ich wollte das bei digwp.com schreiben
Ich werde mich den ganzen Tag eifrig selbst treten… Ich hatte meine Einreichung um 4 Uhr morgens (pazifischer Zeit) fertig und hatte noch viel Zeit… dann fand ich heraus, dass die Frist GESTERN war. Seufz. Da es nicht am Wettbewerb teilnimmt, schadet es nicht, es zu zeigen.
-Michael
http://ctec.clark.edu/~mmcgu5853/explode/#
Es gibt einen RIESIGEN :hover-Fehler in Ihrem CSS! Zeigt bei jedem Hover Bilder an. Nur zur Info. lol.
Das ist damit Sie den zugrunde liegenden Code sehen können. Schauen Sie noch einmal nach.
Ich sehe keinen Grund, warum Sie Ihren Code im Hover anzeigen müssen. Wir können alle die Quelle anzeigen und ihn sehen. Es lässt Ihr Layout nur komisch wirken.
Ich habe versucht, es zu machen, aber ich war so beschäftigt bei der Arbeit. Ich hoffe, es gibt bald wieder eins. Ich mag diese Idee wirklich!
Wow, viele Einreichungen
Ich freue mich auf die Ergebnisse und die Präsentation der Einreichungen, es wird interessant sein zu sehen, wie Web-Entwickler ihre Sache gemacht haben
einige interessante Herausforderungen für das Design
Al
Leider konnte ich keine Zeit finden, teilzunehmen :( Wenn Sie sie posten, Chris, wäre es cool zu sehen, was die Leute richtig und falsch gemacht haben. Ich werde es vielleicht trotzdem für mich selbst machen. Der beste Weg zu lernen ist, einfach einzusteigen und es zu tun.
Das heißt, wenn Sie darauf hinweisen könnten, was sie richtig und falsch gemacht haben.
Wow, 135 andere Einreichungen sind sicher viel für mich zu schlagen :P
Aber trotzdem, wie jeder, glaube ich, habe ich eine gute Chance und danke Chris für die Ausrichtung dieses Wettbewerbs.
Ich habe gerade den Status des Wettbewerbs überprüft. Wow, 135!
Ich fühle mich aber zuversichtlich. Viel Glück an alle anderen Teilnehmer im Getümmel :)
Wir machen hier Fortschritte, wahrscheinlich nächste Woche werden wir die Ergebnisse veröffentlichen.
Februar war ein verrückter Arbeitsmonat, daher habe ich den CSS Off komplett verpasst. Schade! Es wäre wirklich hilfreich gewesen, zu sehen, wie ich im Vergleich zum Wettbewerb abschneide, eine Note und Feedback zu erhalten. Dieses Wochenende werde ich die Übung zu meinem eigenen Nutzen/Lernen abschließen. Wenn Sie nichts dagegen haben, zu teilen, wie viele Stunden haben die Leute gebraucht, um die Übung abzuschließen?
Ungefähr 8 Stunden, geradewegs sogar ;)