楽しいCSSピクセルアート-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

楽しいCSSピクセルアート

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 05, 2016 am 08:45 AM

元のアドレス: https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4

フレンドリーなリマインダー: 国内ネットワークの問題により、CodePen を開けないか、非常に遅い場合があります。しばらくお待ちください。

ピクセルアートは、超鮮明な高解像度の写真と比較すると見劣りする、失われた芸術形式です。 CodePen を閲覧中にピクセルアートを偶然見つけました。このアートがどれほど素晴らしいものであるかを思い出しました。

CodePen で Devi Krisdiansyah (@agilBAKA) によるペンピカチュウのピクセル CSS を参照してください。

クールじゃないですか？ピクセル化されたグラフィックには、高解像度のグラフィックやイラストには欠けている、シンプルで親しみやすいものがあります。

これは、HTML と CSS を使用してピクセルアートを作成する方法の優れた例でもあります。この概念を分析して、他の状況でも使用できるパターンを作成してみましょう。

グリッドを作成する

まず、ピクセル化されたアートワークを描くためのキャンバスが必要です。グリッドを作成するにはさまざまな方法があります。 1 つの方法は、各行に固定幅のセルを含む標準の HTML <table> 要素を使用することです。たとえば、8 行 8 列の完全な正方形を描きます。各セルの幅を 10 ピクセルに設定すると、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">CodePen の Geoff Graham (@geoffgraham) による「ペン CSS ピクセル - テーブルグリッドの例」を参照してください。</p> <p> </p> <p>より大きなキャンバスが必要な場合は、セルのサイズを大きくします。 8 ビット解像度から 16 ビット解像度に変更する場合は、テーブルの各行のセルの数を 2 倍にするだけで済みます。 </p> <p>グリッドを作成する別の方法は、テーブルの代わりに 2 つの div を使用することです。 1 つはキャンバスのコンテナとして機能し、もう 1 つはキャンバス上の要素を表し、必要なだけ繰り返すことができます。 </p> <div class="cnblogs_code"> リーリー </div> <p>これが好きな理由は、定義したキャンバスサイズにより現実的だからです。そして、<span class="cnblogs_code">table</span>要素から余分なHTMLタグを書かずに済むこの方法の方が簡単だと思います。 </p> <p>より多くのピクセルを使用してより鮮明なパターンを作成したい場合は、HTML タグ内のピクセル数を 2 倍にし、各ピクセルのサイズを半分にすることができます。これは、Web ページで使用するために Photoshop で画像を作成し、そのサイズを 2 倍にして解像度を高くしたようなものです。 </p> <div class="cnblogs_code"> リーリー </div> <h2> </h2> <h2 id="絵を描き始める">絵を描き始める</h2> <p>ゴムと道路が出会うような感覚でピクセルに色を追加します。 <span class="cnblogs_code"><span style="color: #800000;">nth-child</span></span> 属性を使用してグリッド内の要素を選択できます。 </p> <div class="cnblogs_code"> リーリー </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"> <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> <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 style="color: #800000;">canvas</span><span style="color: #0000ff;">></span></span> 肯定可以绘制矩形。</span></p> <div class="cnblogs_code"> <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> <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">CodePen で Max (@MyXoToD) による Tranigma のペンキャンバスアークを参照してください。</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>svg<span style="color: #800000;"></span>><span style="color: #0000ff;"></span>には <span class="cnblogs_code"></span>rect<span style="color: #800000;"></span>><span style="color: #0000ff;"></span>がありますが、便宜的に、さらに多くの内容を含む<span class="cnblogs_code">を使用することもできますピクセル</span>ポリゴン<span style="color: #800000;"></span> ><span style="color: #0000ff;"></span> . </p>CodePen の Aloïs De Schepper (@Alo62) による Pen Pixel me を参照してください。<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"> <script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script> </p> <p> </p>5.3D! <h3> </h3>さて、もう十分やったと思います。 <p> </p>CodePen で cx20 (@cx20) によるペン 3D ピクセルアートをご覧ください。<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"> <script type="text/javascript" src="//assets.codepen.io/assets/embed/ei.js"></script> </p> <h2> </h2>あなたの番です<h2> </h2>私たちは、皆さんが自分のやり方で物事を進められることを常に望んでいますが、ピクセルアートを描くためのツールはたくさんあることを知っておいてください。 <p> </p> <ul>Ludvig Lindblom の Canvas ボックスシャドウピクセルアートジェネレーター<li> </li>Jenn Schiffer が 8 ビットアートを作成します!<li> </li>XOXCO がピクセルアートを作ります<li> </li> </ul> <p></p> <div id="MySignature"> </div> <div class="clear"></div> </table>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向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ブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

See all articles