蓝色方块 | CSS-Tricks

前几天，CodePen 上流传着一个有趣的梗：蓝色方块。我不太确定它是怎么开始的，但很多人开始发布各种绘制蓝色方块的代码。这很奇怪，也很有趣，但更令人惊奇的是，对于如此简单的事情，居然有这么多种方法。

让我们来数一数

您可以创建一个 <div> 并用 CSS 为其设置样式。 Tim Holman 在这里将其永垂不朽。
但 CSS 已经过时了，对吧？您也可以使用 Sass 来帮助您编写代码。
但要真正时髦，您需要在 SCSS 中创建一个 @mixin 并调用它。
它也不必是 <div>，它可以是 <table>（或者任何其他 HTML 元素），并且可以将样式直接内联到元素上。
或者您甚至可以完全不使用 HTML，而是使用隐式 body 上的伪元素，或者仅仅是隐式根元素上的边框。
您甚至可以完全跳过 CSS，而是使用通过 HTML 元素和老式属性进行间距。
也许是一个巨大的破折号字符？
如果您使用没有间距的色标，CSS 渐变可以绘制一个方块。也可以使用 Sass，对吧？
不要忘记 box-shadow。
当然，像 SVG 这样的绘图专用语言可以完成这项工作。
或者像 Canvas 这样的绘图专用语言也可以完成。
Canvas？太普通了。 WebGL 怎么样？
当然，一些纯 JavaScript 可以处理这项工作。
也可以将其制作成书签。
但为什么要这样做，当您可以编写一个 jQuery 插件呢？
毕竟我们只是在屏幕上绘制，网络不是唯一可以绘制的地方。如何用 Objective C 创建一个 iPhone 应用程序来绘制一个方块？

很疯狂，对吧？当然，这也不是所有方法的全面集合（不同的图像格式、dataURI 等等）。这些方法都有必要学习吗？这会让初学者感到害怕吗？或者他们可以安全地忽略其中许多方法，并在需要时随着时间的推移学习它们？

姓名（必填）

# 2013年11月29日

浪费空间

Steven Watson

评论永久链接# 2013年11月29日

轻松一点...快到圣诞节了

# 2013年11月29日

浪费了一条评论 ^^

这很有趣，也很有创意，你错过了重点，笨蛋。

Matt Soria

# 2013年11月29日

太搞笑了。 CodePen 被用作这种意想不到的方式真是太棒了。如果我试图向一个非网页朋友解释为什么这很有趣，听起来会很愚蠢，哈哈。

Maegashira

# 2013年11月29日

什么？没有 Flash？

Kseso

# 2013年11月29日

为什么只有一个蓝色方块？ xD ;-)
http://codepen.io/Kseso/pen/kDzoa

Juribiyan

# 2013年11月29日

.model tiny
.code

ORG 100h

START:  MOV     AL, 13h
    INT 10h 
    MOV AX, 0A000h 
    MOV ES, AX

MOV CX, 21120

blu:    MOV DI, 42560
    SUB DI, CX
    MOV AL, 1
    STOSB
    LOOPNZ  blu
    MOV CX, 21120

END START

Gustavo Sillero

# 2013年11月29日

蓝色方块蓝屏死机
http://codepen.io/sillero/pen/pcedh

NSDCars5

# 2013年11月29日

http://codepen.io/NSDCars5/pen/vALFy

另一个蓝色方块。我想你会喜欢的。 ;)

Chris Coyier

评论永久链接# 2013年11月29日

我会尽力保持收藏更新。

Nicholas Kimulu

# 2013年11月29日

这很有趣，但在我看来，它很混乱。我认为，让他们得以保存的是，他们大多数情况下只知道一种语言，也许 CSS 对他们来说是正确的语言。

Chris Heilmann

# 2013年11月29日

当然，生成内容是最好的选择。 http://codepen.io/codepo8/pen/DFfzC

Justin

# 2013年11月29日

http://codepen.io/anon/pen/tBzjg

Hugo Giraudel

评论永久链接# 2013年12月1日

这确实很奇怪。我喜欢它。

Joe

# 2013年11月29日

在背景中狂轰滥炸 Google 徽标怎么样？不过，Google 徽标似乎略微有一点渐变。 http://codepen.io/anon/pen/twsyA

Joe

# 2013年11月29日

链接默认情况下是蓝色的

Andrew

评论永久链接# 2013年11月30日

我点击了链接，它变成了紫色。这是一个紫色方块！

(http://imgur.com/LBhXwPI)

Lucian Zamfira

# 2013年11月29日

html {
  border-top: 40em solid blue;
  margin: 10% 20%;
}

Lucian Zamfira

评论永久链接# 2013年11月29日

Lisa

# 2013年11月29日

弹性盒怎么样？

http://codepen.io/lemnis/pen/erHis

Louis

# 2013年11月29日

拜托，大家！

http://codepen.io/impressivewebs/pen/JHnko

多列规则 FTW！ :)

Steven Watson

评论永久链接# 2013年12月2日

我能看到这段文字

http://codepen.io/anon/pen/wvmFd
Louis

评论永久链接# 2013年12月4日

你怎么敢泄露我的秘密！ :)

Gabriel Valfridsson

# 2013年11月29日

还没见过这个呢

http://codepen.io/GabbeV/pen/GDBHg

您需要点击它一次以在编辑模式下显示它，但在全页模式下加载时它会起作用

metai

# 2013年11月30日

蓝色方块成为 2013 年的 JAPH。谁会想到呢。

Oloman

# 2013年11月30日

重叠的白色幻灯片 http://cdpn.io/ekAov

使用百分比填充底部来设置方块高度 http://cdpn.io/htnCa

真有趣！

Mark

# 2013年11月30日

Yo Dawg，我听说你喜欢蓝色方块... http://cdpn.io/sycLd

Amelia BR

# 2013年11月30日

好的，我浏览了收藏，还没有人使用 Data URI。当然，这是在页面中嵌入微型图形的最明智的解决方案。

两个版本

Base-64 编码的单个像素 png： http://codepen.io/AmeliaBR/pen/gvlIs
人类可读的 svg： http://codepen.io/AmeliaBR/pen/xijuv

顺便说一下，我认为这不是一个无用的练习——它展示了不同图形（或伪图形）方法的基本属性，以便进行比较。特别是，当我在 Chrome 中查看示例时，Canvas 会导致令人讨厌的模糊边缘。

对于使用确定大小的彩色 div 的实际图形应用程序的有趣示例，人们可能对这个 D3 入门教程感兴趣： http://bost.ocks.org/mike/bar/

Patrick

# 2013年11月30日

我喜欢这个大的破折号字符，玩得很好！

Arjun

# 2013年12月1日

网页设计师也需要表情包！

Hugo Giraudel

# 2013年12月1日

自动聚焦输入版本： http://codepen.io/HugoGiraudel/full/ivcbl。不过在编辑模式下不起作用。 :(

Greg

# 2013年12月1日

什么？不喜欢 ASCII？

http://codepen.io/GRSimon/pen/teCcH

Greg

评论永久链接# 2013年12月1日

实际上看起来有人已经尝试过 ^。所以这里还有另一个贡献。

http://codepen.io/GRSimon/pen/ahKCk
Vitor42

评论永久链接# 2013年12月2日

嘿，为什么不呢？

http://codepen.io/v42/pen/izxev

Oloman

# 2013年12月1日

HTML 中没有任何内容，只有 CSS 中有这个

1) 只有边框

body {
border: 100px solid blue;
}
http://codepen.io/oloman/pen/pnlCd

2) 以及“没有蓝色”

html {
border: 200px solid white;
padding-bottom: 30%;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYPj/HwADBwIAcbCYagAAAABJRU5ErkJggg==);
}

http://codepen.io/oloman/pen/EmyGB

Merri

# 2013年12月1日

特价！十合一！

http://codepen.io/Merri/pen/kxchj

Ryan McKay

# 2013年12月1日

在这里插入使用 mp4/ogv/webm 视频循环的蓝色方框示例
:)

Guanting

# 2013年12月1日

完成了，使用 css content 属性。哈哈

http://codepen.io/anon/pen/bGgEa

Seth Hall

# 2013年12月2日

虽然能够记住所有这些并在需要时应用这些技巧会很棒，但我认为对于初学者来说没有必要。他们可以边走边学，根据需要学习。

Daniel

# 2013年12月2日

你错过了老版本的 Windows 中的一个——整个屏幕毫无征兆地变成蓝色：）。

Seth Mattox

# 2013年12月2日

@font-face 矢量图标字体怎么样？

.myBox {
font-family: ‘fontello’;
color: blue;
}

.boxOrigin:after {
content:’’;
font-family: ‘fontello’;
color: blue;
}

.boxOrigin:beefore {
content:’’;
font-family: ‘fontello’;
color: blue;
}

Seth Mattox

# 2013年12月2日

.boxOrigin:before*……..

Elias

# 2013年12月2日

太棒了

Mike

# 2013年12月2日

为什么不使用黄色来得到蓝色呢……（加上一点点 filter）

http://codepen.io/pxfunc/pen/CdgsI

Matthew Wagerfield

# 2013年12月2日

如果有人对这个荒谬的蓝色方框流的起源感兴趣，是我创建了最初的。

我把它放到 CodePen 上，并在 Twitter 上发了推文，作为与来自 Fantasy Interactive (Justin Windle、Paul Lewis 和 Thodoris Tsiridis) 的一些前同事分享的玩笑。当我第一次开始在 Fi 工作时，我 **只** 会 Flash，所以不得不从头开始学习 HTML、CSS 和 JS。

信不信由你，蓝色方框是我第一次掌握 CSS 时做的一次“实验”…… **不是开玩笑**。

无论如何，为了向我学习浏览器技术之旅的起点致敬，以及作为一种怀旧，我决定在 CodePen 上让蓝色方框永垂不朽。

我从未想过它会得到如此多的回应——不用说，这仅仅表明了你可以用浏览器表达多少东西！

让那些蓝色方框继续出现 :-)

noahgelman

# 2013年12月2日

一个带有非常大字母的 div 怎么样？修改缩进和字母间距，砰，你就得到了一个蓝色的矩形。

http://codepen.io/anon/pen/gdwJs

Hacamat

# 2013年12月2日

谢谢 :)

Greg

# 2013年12月2日

还有一个非常实用的方法是合并两个三角形。

http://codepen.io/GRSimon/pen/iaDdm

我敢挑战某人合并四个三角形。

Francky

评论永久链接# 2013年12月6日

给你：http://codepen.io/francky/full/yfFrD
:-)

还有一个变体：http://codepen.io/francky/full/xbIyB

（这样所有三角形都可以分别悬停/点击）

Greg

# 2013年12月4日

可能已经做过了！有点晚了……

http://codepen.io/gregorypratt/pen/pvLhF

Kim

# 2013年12月6日

我来自桌面编程背景，在那里你通常重视干净和精简的 API，有时我很难处理 web 开发的“黑客”和“弗兰肯斯坦”性质。

不是想破坏这里的圣诞气氛，只是想问问 web 开发人员是否认为有这么多种方法来实现相同的效果是问题（或者可能是好处）？

Francky

# 2013年12月7日

还没见过：http://codepen.io/francky/full/eCoKL。

@post 2013年12月6日 –
演示图：将 4 个三角形合并成一个正方形 http://clba.nl/bluebox-demo-4triangles-merging.htm

Francky

# 2013年12月9日

另一个蓝色方框故事（仅限 CSS）：http://codepen.io/francky/full/birzG

gabssnake

# 2013年12月16日

body 边框 FTW：http://codepen.io/gabssnake/pen/xgrkt

Kim

# 2013年12月16日

致敬 Ralp Barclay :)

html { 
   width:100%; 
   height:100%; 
   background:url('http://upload.wikimedia.org/wikipedia/commons/5/5f/Blue_Box_in_museum.jpg') center center no-repeat;
}

http://codepen.io/anon/pen/bnAmx

Horst

# 2013年12月29日

也许只需包含一张“bluebox.jpg”图片，它实际上是一个蓝色方框？

Warren Chandler

# 2014年1月10日

这些东西让我抓狂：)

我想我会坚持创建一个小的蓝色 JPG 并调整大小。除了它是一个独立的实体之外，它的文件大小也比评论中提供的某些代码要小！

我只是喜欢成为一名 web 开发人员，让你需要能够以 2000 种方式创建东西：D

francky

评论永久链接# 2014年1月10日

“这些东西让我抓狂：)”

啊，我明白了。我想文件大小最小的就是 background-color（没有单独的 http 请求来获取 jpg）。就像最初的蓝色方框！;-)

此评论线程已关闭。如果您有重要信息要分享，请联系我们。