純粋なコードで作成されたこの見事な画像は、ブラウザのムードリングのようなものです

ダイアナ・スミスの作品は、超ハードモードのデジタルアートです。
  • スクリーンショット:Diana Smith

    Diana Smithは、おそらくこれまでに見たことのないWeb画像を作成します。それは、あなたが ユーザーインターフェイスデザイナー の作品では、サーバーからフェッチされたフラットピクセルデータを見ているのではなく、目の前でライブでレンダリングされた純粋なコードを見ているのです。

    スミスの 純粋なCSSフランシーヌ 、1800年代の油絵のような精巧なコード描画により、TwitterのWeb開発者は今週メルトダウンしました。作品は、タブレットやマウス、さらにはイラストソフトウェアを使用して描かれていませんでした。代わりに、Smithは、すべての要素をHTMLとCSSで手動でコーディングしました。これは、ブラウザーにWebページの表示方法を指示するコンピューター言語です。つまり、WebでPure CSS Francineを表示するときにファイルとして保存する画像はありませんが、スクリーンショットを撮ったり、コードをダウンロードして自分で試してみることができます。

    これにより、Pure CSS Francine、およびSmithの他のCSS画像が次のようになります。 素晴らしいミッドセンチュリースタイルの広告 —本当にユニークな芸術作品。ブラウザに何かをするように指示するコードで構成されているため、フランシーヌはさまざまなブラウザで表示すると非常に異なって見える可能性があります。たとえば、FrancineなどのNetscapeNavigatorでレンダリングした場合 キュビズムの傑作に変身



    古いバージョンのOperaでは…まあ、アートについては、実際にどのように見えるかを言うのに十分な知識がありません。 でもそれは間違いなく面白いです

    当時作られたこれらのブラウザは、人々がCSSアートを作るとは予想していませんでした。情報が存在するのはインターネットだけであり、必要なのは長方形と色だけであるとスミス氏は説明しました。この画像をさまざまなブラウザで見ると、インターネットの歴史と、当時のインターネットに何が求められていたかを見ることができます。

    それはムードリングのようなものです、と彼女は純粋なCSSフランシーヌの形を変える性質について言いました。

    カスケードスタイルシート (CSS)特定のWebページを表示する方法についてブラウザに指示を与えます。スミスと同じくらい才能があり、献身的であれば、かなり素晴らしいことができることがわかります。 CSSを使用して画像を作成するには、ブラウザにオブジェクトを表示し、そのサイズ、エッジ(円を作成するため)、色などを操作するコードを作成する必要があります。ベクターイラストが図形を操作し、それらを組み合わせて最終的なデザインを作成するのと同じように、CSS画像の作成には図形の階層化と配置が含まれます。大きな違いは、CSSを使用すると、作成中に作成しているものを常に確認できるとは限らないため、試行錯誤のプロセスであるとスミス氏は述べています。

    最初に各要素を入力してから、それらの要素ごとにルールを作成する必要があります。絵筆に物を載せるほど簡単でも迅速でもありません。時間がかかるという理由だけで、私が望むほど詳細なものを作成できない場合があります。

    「ただの理由で、そして芸術であるという理由だけで、楽しみ以外に正当な理由はありません」

    絵筆もカーソルも、キーボード以外の簡単な入力もありません。これは、ビデオゲームの超ハードサバイバルモードのようなものですが、デジタルアート用です。スミス氏は、なぜそうなのかよくわからない、とスミス氏は語り、良い挑戦が彼女にインスピレーションを与えるものだと説明した。

    スミス氏は、純粋なCSS画像を作成するのに約2週間かかると述べましたが、画像を構成するコードは際限なく調整できるため、彼女の作業は実際には行われていません。そこにはたくさんのCSS画像があることは注目に値しますが、スミスの作品を際立たせているのは、美学と視覚的な魅力への注意です。

    これを行って以来、その質問をよく耳にします。たとえば、なぜですか。スミスが私に言ったのは、楽しいこと以外に正当な理由はありません。それは、自由な時間以外は他の誰よりも有利ではないと付け加えたからです。

    多くの人が、コーディングを学び、無料のAPIを見つけて、それからプロジェクトを構築しようとしていると言うでしょう、と彼女は続けました。 CSSでも同じである必要があります。その時点では、雇用主のために何もしておらず、コードをいじり、プロセスを楽しんで、自分自身に挑戦しようとしているだけだからです。そして、これはそれを行う方法です。

    私たちのお気に入りのマザーボードストーリーを毎日6つ入手してください ニュースレターに登録する