有趣的CSS像素藝術
原文網址：https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4
友情提示：由於國內網路的原因，CodePen可能會打不開或非常慢，請耐心等待！
像素藝術作為一種遺失的藝術形式，與超清晰，高解析度圖片相比黯然失色。我在CodePen上瀏覽時偶然發現了一些像素藝術，它提醒我這種藝術是多麼令人敬畏！
See the Pen Pikachu pixel css by Devi Krisdiansyah (@agilBAKA) on CodePen.
是不是很酷？像素化圖形中有某種簡單友好的東西，而這些東西是高清晰圖形和插圖中缺少的。
這也是教我們如何用HTML和CSS創建像素藝術的一個很好的案例。讓我們分析下這個概念，並創建一個可以在其他情況下使用的模式。
建立網格
第一件事，我們需要一張繪製我們像素化作品的畫布。我們有多種方式來建立網格。一種方式是使用標準的HTML <table>元素，它的每一行都包含固定寬度的單元格。例如我們畫一個八行八列的完美的正方形。如果我們設定每一個儲存格10px寬，那麼我們會得到一個80X80的表格。
<p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="yJWXZK" data-default-tab="result" data-user="geoffgraham" data-embed-version="2">See the Pen CSS Pixels - Table Grid Example by Geoff Graham (@geoffgraham) on CodePen.</p>
<p> </p>
<p>如果想獲得更大的畫布就給單元格一個更大的尺寸。如果想從8-bit分辨率改成16-bit的分辨率，只需要將表格的每一行的儲存格數量翻倍。 </p>
<p>另外一種建立網格的方法是用兩個div代替表格。其中一個作為畫布的容器；另一個代表畫布上的元素，可以根據我們的需要重複多次。 </p>
<div class="cnblogs_code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="canvas"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pixel"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008000;"><!--</span><span style="color: #008000;"> Repeat as many times as needed </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> end .canvas </span><span style="color: #008000;">--></span></pre><div class="contentsignin">登入後複製</div></div>
</div>
<p>我喜歡這一方式的原因是它對於我們定義的畫布尺寸更加真實。而且我覺得這種方式更加簡單，無需編寫來自 <span class="cnblogs_code">table</span> 元素的額外的HTML標籤。 </p>
<p>如果我們想要更多的像素來創造更清晰的圖案，那麼我們可以在HTML標籤中將像素數翻兩倍，並且將每個像素的尺寸減半。這就像你在Photoshop中創建了一張你打算在網頁中使用的圖像，為了獲得更高解析度，你把它的尺寸擴大了一倍。 </p>
<div class="cnblogs_code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #800000;">.canvas </span>{
<span style="color: #008000;">/*</span><span style="color: #008000;"> Perfectly square </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 80px</span>;
}<span style="color: #800000;">
.pixel </span>{
<span style="color: #008000;">/*</span><span style="color: #008000;"> We'll need 256 total pixels in our HTML </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
float</span>:<span style="color: #0000ff;"> left</span>;
}</pre><div class="contentsignin">登入後複製</div></div>
</div>
<h2 id=""> </h2>
<h2 id="開始畫圖">開始畫圖</h2>
<p>我們為像素添加顏色在某種意義上說猶如橡膠遇到路面。我們可以使用 <span class="cnblogs_code"><span style="color: #800000;">nth-child</span></span> 屬性來選擇網格中的元素。 </p>
<div class="cnblogs_code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008000;">/*</span><span style="color: #008000;"> The third cell in our grid </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.pixel:nth-child(3) </span>{<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> orange</span>;
}</pre><div class="contentsignin">登入後複製</div></div>
</div>
<p>正如你想象的那样，这个列表会很长，它取决于网格中的单元格的数量和设计的细节。文章开头的例子中使用了1920个像素并且超过300个子类选择器。天哪！</p>
<p> </p>
<h2 id="一个简单的例子">一个简单的例子</h2>
<p>我决定做一张像素化的自画像。这个例子很简单，因为它的像素很少并且总共只有四种颜色。</p>
<p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="qNGXjA" data-default-tab="result" data-user="geoffgraham" data-embed-version="2">See the Pen CSS Pixels - Self Portrait by Geoff Graham (@geoffgraham) on CodePen.</p>
<p> </p>
<h2 id=""> </h2>
<h2 id="作为Icon的CSS像素艺术">作为Icon的CSS像素艺术</h2>
<p>既然我们已经有了素材，我们可以 使用 <span class="cnblogs_code"><span style="color: #800000;">transform </span></span>属性缩小图片把它作为icon使用。</p>
<p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="rLgGar" data-default-tab="result" data-user="geoffgraham" data-embed-version="2">See the Pen CSS Pixels - Self Portrait - Icon by Geoff Graham (@geoffgraham) on CodePen.</p>
<p> </p>
<h2 id=""> </h2>
<h2 id="其他的像素绘制技术">其他的像素绘制技术</h2>
<h3 id="box-shadow">1.box-shadow</h3>
<p>你可以用一个元素通过复杂的 <span class="cnblogs_code"><span style="color: #800000;">box-shadow</span></span> 属性绘制像素艺术。如果你声明一个 <span class="cnblogs_code"><span style="color: #800000;">box-shadow</span></span> 的垂直和水平偏移，而没有模糊值及阴影半径，你将得到一个可以随意移动的元素形状的彩色复制体。</p>
<p>以下是概念实例。黑色元素是初始形状，我已经在左下角创建了一个橙色像素以及在右下角创建了一个红色像素。</p>
<p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="qaWqLV" data-default-tab="result" data-user="chriscoyier" data-embed-version="2">See the Pen Basics of Pixel Art by Chris Coyier (@chriscoyier) on CodePen.</p>
<p>你可以疯狂的使用这种方式绘制整个图案。</p>
<p class="codepen" data-height="432" data-theme-id="dark" data-slug-hash="yYbmrm" data-default-tab="result" data-user="servinlp" data-embed-version="2">See the Pen Pixel Hellboy by servin (@servinlp) on CodePen.</p>
<script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script>
<p> </p>
<h3 id="预处理">2.预处理</h3>
<p>变量可以更容易地调整颜色和大小等。</p>
<p>以下是less编写的例子。</p>
<p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="jbMXwq" data-default-tab="result" data-user="msanz" data-embed-version="2">See the Pen Pixel-art hipster pacwoman by Mario Sanz (@msanz) on CodePen.</p>
<script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script>
<p>这是Una Kravets编写的例子， 他更进一步地使用Sass map 创建box-shadow，很聪明的方法。</p>
<div class="cnblogs_code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #800000;">// Setting the colors we're syncing up with
$pixel-color-map: (
'r' : #f00,
'w': #fff,
'k': #000,
'o': transparent,
't': #83401f,
'p': #ffbc77,
'b': #06f,
'y': #ff0,
'n': #ff8000,
'g': #5ac528
);
// Mario pixel art matrices!
$pixel-art:(
mushroom: (
(o o o o o k k k k k k o o o o o)
(o o o k k r r r r w w k k o o o)
(o o k w w r r r r w w w w k o o)
(o k w w r r r r r r w w w w k o)
(o k w r r w w w w r r w w w k o)
(k r r r w w w w w w r r r r r k)
(k r r r w w w w w w r r w w r k)
(k w r r w w w w w w r w w w w k)
(k w w r r w w w w r r w w w w k)
(k w w r r r r r r r r r w w r k)
(k w r r k k k k k k k k r r r k)
(o k k k w w k w w k w w k k k o)
(o o k w w w k w w k w w w k o o)
(o o k w w w w w w w w w w k o o)
(o o o k w w w w w w w w k o o o)
(o o o o k k k k k k k k o o o o)
)
);</span></pre><div class="contentsignin">登入後複製</div></div>
</div>
<p>有很多函数可以把它转换成box-shadow并且应用它。下面是最终结果。</p>
<p class="codepen" data-height="600" data-theme-id="dark" data-slug-hash="oXXRgg" data-default-tab="result" data-user="una" data-embed-version="2">See the Pen Sass-Generated Box Shadow Pixel Art! by Una Kravets (@una) on CodePen.</p>
<script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script>
<p>记住box-shadow也可以做动画。</p>
<p class="codepen" data-height="265" data-theme-id="dark" data-slug-hash="OXEEgL" data-default-tab="result" data-user="AstroDroid" data-embed-version="2">See the Pen Ash and Pikachu box-shadow Pixel Art by Andrew (@AstroDroid) on CodePen.</p>
<script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script>
<p> </p>
<h3 id="canvas">3.canvas</h3>
<p> <span class="cnblogs_code"><span style="color: #0000ff;"><</span><span style="color: #800000;">canvas</span><span style="color: #0000ff;">></span></span> 肯定可以绘制矩形。</p>
<div class="cnblogs_code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #0000ff;">var</span> canvas = document.getElementById("canvas"<span style="color: #000000;">);
</span><span style="color: #0000ff;">var</span> ctx = canvas.getContext("2d"<span style="color: #000000;">);
ctx.fillStyle </span>= "rgb(53, 41, 15)"<span style="color: #000000;">;
ctx.fillRect(</span>48, 0, 8, 8<span style="color: #000000;">);
ctx.fillStyle </span>= "rgb(238, 187, 68)"<span style="color: #000000;">;
ctx.fillRect(</span>56, 0, 8, 8);</pre><div class="contentsignin">登入後複製</div></div>
</div>
<p class="codepen" data-height="350" data-theme-id="dark" data-slug-hash="fvnek" data-default-tab="result" data-user="MyXoToD" data-embed-version="2">See the Pen Canvas Ark from Terranigma by Max (@MyXoToD) on CodePen.</p>
<script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script>
<p> </p>
<h3 id="svg">4.svg</h3>
<p>雖然 <span class="cnblogs_code"><span style="color: #0000ff;"><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span> 有 <span class="cnblogs_code"><span style="color: #0000ff;"><span style="color: #800000;">rect</span><span style="color: #0000ff;">></span></span><span style="color: #0000ff;">rect</span><span style="color: #800000;">>p </span><span style="color: #0000ff;">></span></span> 。 </span></p>
<p class="codepen" data-height="392" data-theme-id="dark" data-slug-hash="pJmQWj" data-default-tab="result" data-user="Alo62" data-embed-version="2">See the Pen Pixel me by Aloïs De Schepper (@Alo62) on CodePen.</p>
<script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script>
<p> </p>
<h3 id="D">5.3D！ </h3>
<p>好吧，我想我們已經做得夠多了。 </p>
<p class="codepen" data-height="407" data-theme-id="dark" data-slug-hash="qEibr" data-default-tab="result" data-user="cx20" data-embed-version="2">See the Pen 3D Pixel Art by cx20 (@cx20) on CodePen.</p>
<script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script>
<h2 id=""> </h2>
<h2 id="該你了">該你了</h2>
<p>我們會一直熱衷於你以自己的方式做事，但需要了解現在已經有了很多繪製像素圖的工具。 </p>
<ul>
<li>Ludvig Lindblom's Canvas box-shadow pixel art generator</li>
<li>Jenn Schiffer's make 8-bit art!</li>
<li>XOXCO's Make Pixel Art</li>
</ul>
<p> </p>
<div id="MySignature"></div>
<div class="clear"></div>
</table>
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML：結構，CSS：樣式，JavaScript：行為
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML，CSS和JavaScript的未來：網絡開發趨勢
Apr 19, 2025 am 12:02 AM
HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML的未來：網絡設計的發展和趨勢
Apr 17, 2025 am 12:12 AM
HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML：建立網頁的結構
Apr 14, 2025 am 12:14 AM
HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
HTML與CSS和JavaScript：比較Web技術
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
HTML：是編程語言還是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
