Vor ein paar Nächten ging ein kleiner Meme auf CodePen herum. Eine Blaue Box. Ich bin mir nicht sicher, wie es begann, aber viele Leute fingen an, Code für verschiedene Arten, eine blaue Box zu zeichnen, zu posten. Es ist seltsam, es ist lustig, aber es ist auch ziemlich erstaunlich, dass es so viele Wege gibt, etwas so Einfaches zu tun.
Zählen wir die Wege
- Du kannst ein
<div>erstellen und es mit CSS stylen. Hier verewigt von Tim Holman. - Aber CSS ist doch altmodisch, oder? Du könntest Sass verwenden, um dir beim Schreiben zu helfen.
- Aber um total angesagt zu sein, würdest du ein @mixin in SCSS erstellen, das du aufrufen kannst.
- Es müsste auch kein
<div>sein, es könnte eine<table>sein (oder buchstäblich jedes andere HTML-Element) und die Stile könnten direkt auf dem Element inline sein. - Oder du könntest nicht einmal HTML verwenden, sondern nur ein Pseudo-Element auf dem impliziten body oder einfach einen Rahmen auf dem impliziten root.
- Du könntest sogar ganz auf CSS verzichten und stattdessen Abstände über HTML-Elemente und alte Attribute verwenden.
- Vielleicht ein riesiges Bindestrich-Zeichen?
- CSS-Verläufe könnten eine Box zeichnen, wenn du Farb-Stopps ohne Abstand dazwischen hast. Könnte man auch Sass verwenden, was?
- Vergiss auch nicht die box-shadow.
- Sicherlich könnte eine zeichnungsspezifische Sprache wie SVG den Trick machen.
- Oder eine zeichnungsspezifische Sprache wie Canvas könnte das auch.
- Pfff, Canvas? Wie ordinär. Wie wäre es mit WebGL?
- Sicherlich könnte reines JavaScript die Aufgabe bewältigen.
- Könnte man auch gleich zu einem Bookmarklet machen.
- Aber warum das tun, wenn du auch ein jQuery-Plugin schreiben könntest?
- Wir zeichnen schließlich nur auf einen Bildschirm, das Web ist nicht der einzige Ort, an dem man das tun kann. Wie wäre es mit einer iPhone-App, die eine Box in Objective C zeichnet?
Ziemlich wild, was? Sicherlich ist das auch keine umfassende Sammlung von Methoden (unterschiedliche Bildformate, dataURIs usw.). Sind sie alle gut zu wissen und zu haben? Macht das Anfänger eingeschüchtert oder können sie viele davon sicher ignorieren und sie nach Bedarf im Laufe der Zeit lernen?
Platzverschwendung
Entspann dich... es ist bald Weihnachten
Verschwendung eines Kommentars ^^
Es macht Spaß, es ist kreativ, du verfehlst den Punkt, du Wicht.
Das ist urkomisch. Was für eine unerwartete Nutzung von Codepen. Wenn ich einem Nicht-Web-Freund erklären würde, warum das lustig ist, würde es so dumm klingen, haha.
Was, kein Flash?
und warum nur 1 blaue Box? xD ;-)
http://codepen.io/Kseso/pen/kDzoa
.model tiny
.code
Blaue Box, Blue Screen of Death
http://codepen.io/sillero/pen/pcedh
http://codepen.io/NSDCars5/pen/vALFy
Noch eine blaue Box. Dachte, du magst sie. ;)
Ich werde versuchen, die Sammlung auf dem neuesten Stand zu halten.
Es ist ziemlich lustig, aber meiner Meinung nach ist es verwirrend. Ich denke, was sie rettet, ist, dass sie in den meisten Fällen nur eine Sprache kennen, vielleicht ist CSS die richtige für sie.
Generierter Inhalt ist sicher der Weg. http://codepen.io/codepo8/pen/DFfzC
http://codepen.io/anon/pen/tBzjg
Definitiv eine seltsame Sache. Ich mag es.
Wie wäre es mit dem Spammen des Google-Logos im Hintergrund. Das Google-Logo hat anscheinend einen leichten Verlauf. http://codepen.io/anon/pen/twsyA
Links sind standardmäßig blau
Ich habe auf den Link geklickt, und er wurde lila. Es ist eine LILA BOX!
(http://imgur.com/LBhXwPI)
Wie wäre es mit Flexbox?
http://codepen.io/lemnis/pen/erHis
Ach, komm schon, Leute!
http://codepen.io/impressivewebs/pen/JHnko
Multi-column rule FTW! :)
Ich kann diesen Text sehen
http://codepen.io/anon/pen/wvmFd
Wie kannst du es wagen, meine Geheimnisse zu verraten! :)
Habe diese noch nicht gesehen
http://codepen.io/GabbeV/pen/GDBHg
Du musst es einmal anklicken, um es im Bearbeitungsmodus anzuzeigen, aber im Vollbildmodus funktioniert es beim Laden
Eine blaue Box wird zum JAPH von 2013. Wer hätte das gedacht.
Sich überlappende weiße Folien http://cdpn.io/ekAov
Box-Höhe mit padding-bottom-Prozent http://cdpn.io/htnCa
Lustig!
Yo Dawg, ich habe gehört, du magst blaue Boxen... http://cdpn.io/sycLd
Okay, ich habe die Sammlung durchgesehen und niemand hat bisher Data URIs verwendet. Die sind natürlich die sinnvollste Lösung für die Einbettung winziger Grafiken auf deiner Seite.
Zwei Versionen
Base-64-kodiertes Ein-Pixel-PNG: http://codepen.io/AmeliaBR/pen/gvlIs
Menschlich lesbares SVG: http://codepen.io/AmeliaBR/pen/xijuv
Und übrigens, ich glaube nicht, dass dies eine nutzlose Übung ist - sie demonstriert einige der grundlegenden Attribute der verschiedenen grafischen (oder pseudo-grafischen) Methoden zum Vergleich. Canvas führt insbesondere zu einem unschönen unscharfen Rand, wenn ich die Beispiele in Chrome ansehe.
Für ein interessantes Beispiel für die Verwendung farbiger Divs bestimmter Größe in einer praktischen grafischen Anwendung könnten die Leute an diesem Tutorial zur Einführung in D3 interessiert sein: http://bost.ocks.org/mike/bar/
Ich liebe das große Bindestrich-Zeichen, gut gemacht!
Webdesigner brauchen auch Memes!
Autofocus-Input-Edition: http://codepen.io/HugoGiraudel/full/ivcbl. Funktioniert aber nicht im Editor-Modus. :(
Was? Keine Liebe für ASCII?
http://codepen.io/GRSimon/pen/teCcH
Sieht tatsächlich so aus, als hätte jemand das ^ versucht. Also hier ein weiterer Beitrag
http://codepen.io/GRSimon/pen/ahKCk
Hey, warum nicht?
http://codepen.io/v42/pen/izxev
Nichts in HTML, nur das hier in CSS
1) Nur Rahmen
Körper {
border: 100px solid blue;
}
http://codepen.io/oloman/pen/pnlCd
2) Und „ohne Blau“
html {
border: 200px solid white;
padding-bottom: 30%;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYPj/HwADBwIAcbCYagAAAABJRU5ErkJggg==);
}
http://codepen.io/oloman/pen/EmyGB
SALE! Zehn in einer Feder!
http://codepen.io/Merri/pen/kxchj
Fügen Sie hier ein Beispiel für eine blaue Box mit mp4/ogv/webm-Video-Schleifen ein
:)
Fertig, benutze die CSS-Inhaltseigenschaft. lol
http://codepen.io/anon/pen/bGgEa
Während es großartig wäre, all dies auswendig zu wissen und Techniken nach Bedarf anwenden zu können, glaube ich nicht, dass es für einen Anfänger notwendig ist. Sie können einfach lernen, während sie gehen und es brauchen.
Sie haben die Versionen in alten Windows-Versionen verpasst – wo der gesamte Bildschirm aus unerklärlichen Gründen blau wird :).
Wie wäre es mit Vektor-Icon-Schriften @font-face?
.myBox {
font-family: ‘fontello’;
color: blue;
}
.boxOrigin:after {
content:’’;
font-family: ‘fontello’;
color: blue;
}
.boxOrigin:beefore {
content:’’;
font-family: ‘fontello’;
color: blue;
}
.boxOrigin:before*……..
Fantastisch
Warum nicht Gelb verwenden, um Blau zu bekommen... (mit ein wenig Filter gesprenkelt)
http://codepen.io/pxfunc/pen/CdgsI
Falls jemand am Ursprung dieses lächerlichen Stroms von Blauen Boxen interessiert ist, war ich es, der das Original erstellt hat.
Ich habe es auf CodePen hochgeladen und darüber getwittert als Witz, um es mit einigen ehemaligen Kollegen von Fantasy Interactive zu teilen (Justin Windle, Paul Lewis und Thodoris Tsiridis). Als ich bei Fi anfing, kannte ich **nur** Flash, also musste ich HTML, CSS & JS von Grund auf lernen.
Ob Sie es glauben oder nicht, Blue Box war ein „Experiment“, das ich erstellt habe, als ich mich gerade mit CSS beschäftigt habe… **Kein Witz**.
Jedenfalls habe ich als Hommage daran, wo meine Reise mit dem Erlernen von Browsertechnologien begann, und aus Nostalgie, beschlossen, Blue Box auf CodePen zu verewigen.
Ich hätte nie erwartet, dass es eine solche Resonanz erfahren würde – unnötig zu sagen, es zeigt einfach, wie ausdrucksstark man mit dem Browser sein kann!
Lasst die Blauen Boxen weiter kommen :-)
Wie wäre es mit einem Div mit sehr großen Buchstaben? Spiel mit der Einrückung und dem Buchstabenabstand und BAM, hast du ein blaues Rechteck.
http://codepen.io/anon/pen/gdwJs
Danke :)
Es gibt auch den sehr praktischen Einsatz des Zusammenfügens zweier Dreiecke.
http://codepen.io/GRSimon/pen/iaDdm
Ich wage jemanden, vier Dreiecke zusammenzufügen.
Hier sind Sie: http://codepen.io/francky/full/yfFrD
:-)
Und eine Variation: http://codepen.io/francky/full/xbIyB
(Auf diese Weise sind alle Dreiecke einzeln überfliegbar / anklickbar)
Wahrscheinlich schon gemacht! Etwas spät dran..
http://codepen.io/gregorypratt/pen/pvLhF
Aus einem Hintergrund in der Desktop-Programmierung kommend, wo man saubere und schlanke APIs schätzt, finde ich es manchmal schwierig, mit der hackigen und Frankensteinschem Natur der Webentwicklung umzugehen.
Ich meine nicht, den Weihnachtsgeist zu verderben, ich wollte nur fragen, ob Webentwickler es als problematisch (oder vielleicht als Vorteil) ansehen, dass es so viele Möglichkeiten gibt, den gleichen Effekt zu erzielen?
Noch nicht gesehen: http://codepen.io/francky/full/eCoKL.
@post 6. Dezember 2013 –
Illustration mit Demo: Zusammenführung von 4 Dreiecken in einem Quadrat http://clba.nl/bluebox-demo-4triangles-merging.htm
Eine weitere blaue Box-Geschichte (nur CSS): http://codepen.io/francky/full/birzG
body border FTW : http://codepen.io/gabssnake/pen/xgrkt
Tribut an Ralp Barclay :)
http://codepen.io/anon/pen/bnAmx
Vielleicht einfach ein Bild „bluebox.jpg“ einfügen, das tatsächlich eine blaue Box ist?
Diese Art von Dingen treibt mich in den Wahnsinn :)
Ich bleibe lieber dabei, ein kleines blaues JPG zu erstellen und es zu skalieren. Abgesehen davon, dass es eine separate Entität ist, ist es auch kleiner in der Dateigröße als einige der im Kommentar bereitgestellten Codes!
Ich liebe es einfach, wie die Webentwicklung mich dazu zwingt, Dinge auf 2000 Arten erstellen zu müssen :D
„Diese Art von Dingen treibt mich in den Wahnsinn :)“
Ah, ich verstehe. Ich schätze, die kleinste Dateigröße ist einfach eine Hintergrundfarbe (und keine separate HTTP-Anfrage für ein JPG). Wie die ursprüngliche blaue Box! ;-)