アニメーションCSSアートを作成する

CSSアート
(画像クレジット:Tiffany Choong)

CSS画像を作成することは、スキルを練習し、きちんとしたアートワークを作成するための楽しい方法です。これは、Webコンポーネントの通常の日常的なスタイリングからの素晴らしい休憩です。始めるために必要なのは、空白のドキュメントとCSSファイルだけです。 Sassを使用することをお勧めします。これにより、スタイルを再利用して、より単純なセレクターを作成できます( Sassとは何ですか? このプリプロセッサの詳細については、こちらをご覧ください)。

CSSアートをマスターするためのいくつかのヒントから始めて、CSSのみを使用してこのアニメーションバルーンピカチュウを再現する方法を示します(ファイルを適切に安全に保つようにしてください) クラウドストレージ )。

より多くのインスピレーションを得るために、素晴らしいの私たちのまとめを探索してください CSSアニメーションの例 。もっと基本的なことをした後?学ぶことから始める CSSを使用してアイスキャンデーを作成する方法



または、新しいサイトを開始する場合は、複雑さを華麗に捨ててください ウェブサイトビルダー そして、あなたがあなたを手に入れることを確認してください ウェブホスティング スポット。

デザインをシンプルな形に縮小する

CSSアートを作成するときは、インスピレーションを得るためにいくつかの参照画像を見てから、原始的な形状を使用して被写体を想像しながら、単純化された漫画のバリエーションを作成すると便利です。 CSSの形

明るい背景を使用してポジショニングを支援します

同じような色の形を重ねると、どこに配置されているのか、どのように見えるのかを確認するのが困難です。を変更することで、作業中の形状を目立たせることができます。 背景色 マゼンタのような明るく陽気なものに。これにより、要素の正確な位置と形状を簡単に確認できます。

液体サイズを使用する

プロパティのpx値を定義する場合は、remユニットを使用することをお勧めします。全体のピースを大きくしたり小さくしたりする場合は、レムユニットを使用してベースを変更するだけです。 html {font-size:…px} Sassで、アートワーク全体を拡大または縮小します。

親に対して相対的なサイズにする必要がある子要素の高さと幅を定義する場合、パーセンテージが役立ちます。これらの値は常に親を基準にしているため、 htmlフォントサイズ

CSSを生成する

Generate CSSは、Creative Bloq、net、およびWebDesignerによって提供される特注の会議です。クリックしてアーリーバードチケットを予約してください!(画像クレジット:ゲッティ/フューチャー)

01.コンテナから始める

アートワークのピースを保持するラッパーコンテナは、開始するのに適した場所です。コンテナ内には、ヘッド、ボディ、バルーンの3つの内部コンテナを配置できます。

遠近グリッドをオフにする方法

コンテナは通常、 位置:相対 を使用して他の要素を比較的内側に配置できるようにする 位置:絶対 高さと幅が明確に定義されていると、子要素の配置が困難になります。

スタイルで、再利用性のために基本色をSass変数として追加します。サス lighten() そして darken() 関数は、キャラクターのハイライトまたはシャドウとして使用できる色合いと色合いを作成します。

02.頭のスタイルを整える

構造がわかったら、最初に頭のスタイルを設定しましょう。この場合、頭はアートワークの中心点になります。そのため、頭の位置を絶対に設定するのではなく、相対に設定できます。これにより、コンテナ内に安定した要素を含めることができ、他のフローティング絶対要素にアンカーポイントが与えられ、その位置をより細かく制御できます。

顔の特徴には、ポジショニング用のコンテナが必要になるため、 幅、高さ、背景色のある黄色のヘッドコンテナ内–この長方形をヘッドシェイプのように見せましょう。 CSSアートで最も一般的で便利なプロパティの1つは、 ボーダー半径 プロパティ。ボックスのコーナーのXまたはYの曲線を変更し、より有機的な形状を作成するために使用できます。

レムとパーセンテージの組み合わせでこの手法を使用すると、単純な楕円ではなく、ブロブのような形状を作成できます。 html {フォントサイズ:…px}

.face { border-top-left-radius: 50% 4.5rem; border-top-right-radius: 50% 4.5rem; border-bottom-left-radius: 50% 3rem; border-bottom-right-radius: 50% 3rem; ... }

頭を完成させた後 ボーダー半径 、残りの顔の特徴を、目、頬、鼻、耳などの頭の子要素として配置します。頭のように、 ボーダー半径 トリックは以来便利になります ボーダー半径:50% 魅力的に見えないかもしれません。

03.体に移ります

頭の後ろのボディコンテナ内に配置し、同じ形にすることができます ボーダー半径 テクニックだけでなく、腕、脚、尾。適切なオーバーラップを可能にするために、実際のボディはそれ自体の要素である必要があります。これは、バックストライプなどの特定の内部要素をで切断する必要があるためです。 オーバーフロー:非表示 。体に深みを与えるために、 変換:skew() プロパティは、体をわずかに薄くすることができます。

稲妻の尾は、1つの要素からこの形状を形成しようとするのではなく、3つの別々の長方形を使用して作成できます。長方形を回転させて互いの上に配置し、ボルトを形成することができます。腕と脚は、Sassを使用して作成した暗い原色を使用できます darken() だから彼らは目立ちます。

04.バルーンを追加します

電動マウスが完成したので、風船を後ろに結びましょう。いくつか追加する 子文字列を持つ共有スタイルのs 頭の上に束ねて配置します。文字列は、 ボーダー左 、より文字列のように見えるようにするのに役立ちます。

キャラクターの腰に紐を結ぶには、 適切な配置を可能にするために体内に配置することができます。弦は体の周りに結ばれているように見えるようにわずかな曲線が必要なので、高さを低くすることができます。 ボーダーボトムボーダーボトム 細い曲線を作る左右の半径:

.string { height: 1rem; width: 9rem; border-right: solid 1px $white; border-left: solid 1px $white; border-bottom: solid 1px $white; border-bottom-left-radius: 50% 1rem; border-bottom-right-radius: 50% 1rem; }

05.CSSをアニメーション化する

追加することでキャラクターに生命を与えることができます @keyframes アニメーション。腕、脚、耳、尻尾は次のようにアニメーション化できます 変換:rotate() 。確保 変換元 は「ジョイント」(つまり、脚の上部中央)に設定され、回転を調整します。このアニメーションタイプは、Sassミックスインで数回使用できます。

@mixin animateRotate($name, $start, $end) { @keyframes #{$name} { 0%, 100% { transform: rotate(#{$start}deg) } 50% { transform: rotate(#{$end}deg) } } }

最後に、遅い5秒を追加します 変換:translateY() キーフレームアニメーションは、キャラクターが浮いているかのように上下にアニメーション化します。リアリズムのタッチのために、を使用して点滅するアニメーション 変換:scaleY(0.1) プロパティを使用して、目を閉じているように見せることができます。

この記事はもともとクリエイティブなウェブデザイン誌に掲載されました ネット 283号を購入する または 申し込む

続きを読む: