CSS of ash style

型にはまらない自分だけのスタイル 型にはまらない自分だけのスタイル

HTMLとCSSだけで実装する
オリジナルスタイルコーディング

動的Webデザイン制作の要である「JavaScript」を使用せず「HTMLとCSSのみ」でどこまでハイクオリティな表現ができるのか、「わざわざそんなことやらなくていいじゃん」と思われるようなことに真剣に向き合って創り上げたCSSの変態によるコーディングパフォーマンス！
※表現が複雑であるがゆえにレスポンシブ対応をしていないものが多いため、基本的にPCでの閲覧をお勧めします

マリオ

13,000行のHTMLとCSSのみで実装された「操作して遊べる」マリオ

スロットマシン

「777」が揃ったときの演出つきスロットマシン。ashの変態CSS代表作。（ロゴのみ画像を使用）

クレジットカード

HTMLとCSSのみで実装されたクレジットカード。CUSTOM ONLINE WORKSHOP ash styleの動画でも実装方法を公開。

エヴァ風アコーディオン

エヴァンゲリオン初号機のデザインをモチーフにしたアコーディオンパーツ。SEによる音声効果つき。（※SE再生部分のみjs使用）

アニメーション円グラフ

HTMLとCSSのみで実装したアニメーション円グラフ。

Macbook

アイソメトリックを使ったMacbookアニメーション。細かいパーツやアニメーションもすべてHTMLとCSSのみ。

iPhone & iPad

ボタンで切り替わるiPhoneとiPad。同一のHTML、CSSの変更のみで2台のデバイスを実装。画面内のアプリアイコンもすべてHTMLとCSSのみ。

ジャンプするマリオ

初の変態作品。ボタンタップでマリオがジャンプ。もちろん、実装はすべてHTMLとCSSのみ。

カウントタイマー

99.99秒までカウントできるHTMLとCSSだけで実装するカウントタイマー

テキストマーカー

タップするとペンの動きに合わせてマーカーが引かれるアニメーション

虫眼鏡

タップすると虫眼鏡の動きに合わせて文字がスケールアップするアニメーション
© 2020 ash