誰の役にも立たないじゃないか...!!

Pure CSS UI

中矢 雄介

    @s14garnet

  • 株式会社オロ
  • テクニカルクリエイター​ / CSS振付師
  • HTML, CSS, JavaScript, Flash...
  • アニメーション、インタラクション
  • スポーツカー、スノボ、ゲーム

1年くらい本気でCSS研究してた

前歯、かける

{

Pure
CSS
UI

誰の
役にも
立たんがな

目指すUI

 

  • クリックしたら何かが起こる
  • マウスオンしたら何かが起こる

使う魔法

 

  • checked
  • hover
  • ~

クリックしたら

何かが起こる!?

インターフェイス

<input type="radio">

<input type="checkbox">

動きを想像するよ

これが...

こうなる!!

Blue

Green

Green

Blue

Red

Red

コードを考えるよ

Pug

Sass

input.red(type="radio" name="color" checked)
| Red

input.green(type="radio" name="color")
| Green

input.blue(type="radio" name="color")
| Blue

.graphic ♥
.graphic { 

  .red:checked ~ & {
    background: red;
  }
  
  .green:checked ~ & {
    background: green;
  }
  
  .blue:checked ~ & {
    background: blue;
  }

}

やってみるよー

やってみたよー

Pure CSS UI

DEMO 

 

checked

Joint Animation

3D Box

Showcase Car

マウスオンしたら

何かが起こる!?!?

インターフェイス

hoverの対象要素は

なんでもOK

動きを想像するよ

これが...

こうなる!!

R

G

B

R

G

B

もうちょっと工夫するよ

これが...

こうなる!!

インターフェイスは隠す!!

コードを考えるよ

Pug

Sass

.red

.green

.blue

.graphic ♥
.graphic {
  pointer-events: none;
  
  .red:hover ~ & {
    background: red;
  }
  
  .green:hover ~ & {
    background: green;
  }
  
  .blue:hover ~ & {
    background: blue;
  }
}

やってみるよー

やってみたよー

Pure CSS UI

Demo

 

hover

Happy New Year 2018

Mt. Fuji

Creepy Window

Chase Ameba

Chase Ameba (Grid確認用)

Attention

トリッキーで

ワクワクすっぞ

役に立たなさ

マークアップの制約

 

  • 兄弟要素しか指定できない
  • 親要素にさかのぼれない

CSSコーディングの制約

 

  • コード量が多く見通しが悪い
  • 状態管理が複雑

イベントハンドリングは

JavaScript でやろっか...

follow me

Thanks!

}

誰の役にも立たない Pure CSS UI

By yusukenakaya

Made with Slides.com

誰の役にも立たない Pure CSS UI

CSS のみで、簡単なクリックイベントやマウスオンイベントを実装できる、というお話です。

  • 1,289

More from yusukenakaya