CSSアニメーション

CSSアニメーションのカバー画像

comiCSS は今週で2周年を迎えました。お祝いするために、大きな日の準備として毎日カートゥーンを公開していました。これがその7つのカートゥーン集です。

comiCSSはCSSでコーディングされたCSSに関するコミックです。はい、コミックやカートゥーンはすべてHTMLとCSSでコーディングされています（CSS内部でも使用されるSVGの例外がいくつかあります）。そしてはい、もう2年もやっています。なぜかって？それは楽しいからですし、奇妙なものもあるかもしれませんが、教育的なものもあります（中にはそうでないものも...）。そして、なぜできないのでしょうか？

以下は、今週作ったカートゥーンのコレクションです。気に入っていただけると嬉しいです。

クラウド開発者

コンピュータを使う人と、背景に雲があり、以下のCSSコードが書かれたボックスが隣にあるカートゥーン: .cloud-developer { background: azure; isolation: isolate; rest: none; stress: 100; content: none; }

面白い事実：このカートゥーンの背景色は本当に"azure"です。

王様

王冠をかぶり、王笏を持ったひげ面の男性のカートゥーン。隣には以下のCSSコード: .king { position: absolute; richness: 100; color: RoyalBlue; :first-child { all: inherit; } }

面白い事実：王のローブは"royal blue"色です。このカートゥーンはソーシャルメディアでシリーズ中最も成功したものでした。

オペラの怪人

オペラの怪人（顔を隠すマスクを着けたマントをまとった男性）がバラを持つ横で、以下のCSSコードが表示されているカートゥーン: #phantom-of-the-opera { mask:url(#face); backface-visibility:hidden; visibility:hidden; pitch:low; volume:soft; }

このアイデアは好きでしたが、実装はもっと完全になる必要がありました。それでも潜在能力はあると思っています...もしかしたら、いつか改良できるかもしれません。

勝者

トロフィーを持ち上げる人の腕と、周りに紙吹雪が降るカートゥーン。現場横では以下のCSSコードが表示されています: #winner { order: 1; running: first; color: gold; &::after { content: 'trophy'; } }

誰かが提案しました、「all」という内容がABBAのThe Winner Takes It Allに関しての内容にするべきだと...でも、それを自分で思いつかなかったことが嫌です。それでも、トロフィーは保持しました。

独裁者

独裁者：メダルとサングラスをかけた軍服姿の男性をミニマリスティックに描いたカートゥーン。隣には以下のCSSコードが表示されています: .dictator { position: fixed !important; will-change: order !important; opacity: 0 !important; border: double solid !important; .country:has(&) :not(.supporter) { will-change: orphans, widows !important; translate: 100vmax 0 !important; } }

このカートゥーンは、普段投稿しているよりも暗い内容です。最後の分まで、orphansやwidowsへの言及を取り除こうかと悩みました。

バスケットボール選手

バスケットボールを指一本で回す男性をミニマリスティックに描いたカートゥーン。隣には以下のCSSコードが表示されています: .basketball-player { elevation: higher; min-height: 75in; max-height: 91in; will-change: position; play-during: url(#game); position: running(ball); flow: 'offense'; }

面白い事実：NBAでプレイしたことがある中で最も背の高かった選手はマヌート・ボルで、彼の身長は7フィート7インチ...つまり91インチでした。大きな選手に対する小さなウインクです。

宇宙飛行士

宇宙船服を着た人と、背景に多くの星が描かれたカートゥーン。隣には以下のCSSコードが表示されています: .astronaut { elevation: above; isolation: isolate; flow-from: spaceship; flow-to: outerspace; transition: float; }

.astronautと#MajorTomの二つのセレクターで悩みました。CSSはデビッド・ボウイのSpace Oddityを描写したものでしたが、もっと明らかな選択肢で行きました。

このスタイルとフォーマットをとても楽しんでおり、こうしたカートゥーンを描いていく予定です...でもペースは遅くなります。おそらく通常のCSS/ウェブ開発コミックに加えて週に一度です。

これらのカートゥーンが好きなら、comiCSSのウェブサイトをご覧いただき、更新情報を得るためにTwitterやLinkedInのアカウントをフォローしてください。または、Patreonでサポーターになり、プロジェクトを支援してください。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/alvaromontoro/css-cartoons-29bp

CSSアニメーション

クラウド開発者

王様

オペラの怪人

勝者

独裁者

バスケットボール選手

宇宙飛行士

タグ

最新の記事