Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
手触りの良いUIを 名刺表現の巻
Search
mtblue81
June 12, 2019
Technology
0
150
手触りの良いUIを 名刺表現の巻
2019/6/12 Sansan社内LT大会用資料です
mtblue81
June 12, 2019
Tweet
Share
More Decks by mtblue81
See All by mtblue81
3Dアバターを楽しもう!@burikaigi2024
mtblue81
1
490
make_frontend_properly_spa.pdf
mtblue81
0
2.3k
JavaScriptメタプログラミング勉強会 #metapro_es
mtblue81
0
370
Other Decks in Technology
See All in Technology
業務で使えるかもしれない…!?GitHub Actions の Tips 集 / CI/CD Test Night #7
ponkio_o
PRO
24
6.9k
Cloud Deploy と仲良くなりたい
phaya72
1
100
統計的学習理論読み Chapter 1
kmatsui
3
770
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
2
1.1k
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.6k
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
220
BDD(Cucumber)コミュニティが無料提供しているコンテンツの紹介と現在起きている危機
nihonbuson
4
730
バッチ処理のSLOをどう設計するか
rynsuke
7
560
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
160
期待しすぎずに取り組む両面 TypeScript
shozawa
2
290
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
0
300
SREsのためのSRE定着ガイド
netmarkjp
10
1.6k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
The Invisible Customer
myddelton
114
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
4 Signs Your Business is Dying
shpigford
174
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Into the Great Unknown - MozCon
thekraken
10
830
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Transcript
-5େձ ख৮Γͷྑ͍6*Λ ໊දݱͷר
ࣗݾհ Eightࣄۀ෦ ओʹϑϩϯτΤϯυ୲ ࠾༻αʔϏε࡞ͬͯ·͢ https://8card.net/p/shuhei-aoyama
PC൛Webը໘ ໊ը૾ ද ཪ
͔ͤͬ͘දཪ͋ΔͳΒ ͘Δͬͱճస͍ͤͨ͞
ͬͯΈͨ ΞχϝʔγϣϯͳͷͰҎԼϦϯΫͳͲͰݟͯΈ͍ͯͩ͘͞ https://8card.net/p/shuhei-aoyama
͘͠Έ ը૾Λ̎ຕ༻ҙ͠·͢ <div> <img src=‘image-front.png’/> <img src=‘image-back.png’/> </div> image-front.png image-back.png
͘͠Έ ॎํͷҐஔΛௐͯ͠ॏͶ·͢ <div> <img src=‘image-front.png’ class=‘front’/> <img src=‘image-back.png’ class=‘back’/> </div>
.back { margin-top: -1 * imageHeight; } image-front.png image-front.png
͘͠Έ ยํΛཪฦ͠ʹ͠·͢ image-front.png image-front.png <div> <img src=‘image-front.png’ class=‘front’/> <img src=‘image-back.png’
class=‘back flipped’/> </div> .back { margin-top: -1 * imageHeight; } .flipped { transform: rotateY(180deg); }
͘͠Έ ཪଆʹͳΔը૾ͷclassΛΓସ͑·͢ image-front.png image-back.png <div> <img src=‘image-front.png’ class=‘front flipped’/> <img
src=‘image-back.png’ class=‘back’/> </div> .back { margin-top: -1 * imageHeight; } .flipped { transform: rotateY(180deg); }
͘͠Έ ը૾͕ཪଆʹͳͬͨͱ͖ʹඇදࣔʹ͠·͢ ճసͷͨΊͷΞχϝʔγϣϯΛՃ͠·͢ image-front.png image-back.png <div> <img src=‘image-front.png’ class=‘front’/> <img
src=‘image-back.png’ class=‘back flipped’/> </div> … ུ img { backface-visibility: hidden; transition: transform .3s; } image-front.png
·ͱΊ • දཪ͋ΔΑ͏ͳUIͳΒճస͋Γ • ख৮Γͷ͍͍UIΛ࡞͍͖͍ͬͯͨ
ͪͳΈʹ ΞϓϦવͷ͝ͱ͘࠷ॳ͔ΒͬͯΔ ʘ(^o^)ʗ
None