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
変態的 CSS トリック
Search
Kite
August 28, 2016
Programming
57
24k
変態的 CSS トリック
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
Kite
August 28, 2016
Tweet
Share
More Decks by Kite
See All by Kite
個人からチームまで、情報・タスク管理の一元化はNotionにお任せ!
ixkaito
13
73k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
7
5.1k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
22
7.6k
タイポグラフィベーシック (+ デザインアイデア)
ixkaito
13
3.8k
WordPress の今とこれから
ixkaito
1
1.8k
世界で一人しかできない WordPress コアを写経する話 ― 修行の先に見たものとは?
ixkaito
5
14k
WordPress の今とこれから
ixkaito
4
2.6k
Let's Think about Right Answers of Design and UI/UX
ixkaito
0
370
ブラウザのデフォルトスタイルを見てみよう
ixkaito
3
1.5k
Other Decks in Programming
See All in Programming
AI時代の開発者評価について
ayumuu
0
230
カウシェで Four Keys の改善を試みた理由
ike002jp
1
120
flutter_kaigi_mini_4.pdf
nobu74658
0
130
The Evolution of the CRuby Build System
kateinoigakukun
1
740
Orleans + Sekiban + SignalR でリアルタイムWeb作ってみた
tomohisa
0
190
DevOpsDaysTokyo2025社内副業で他部門へ_越境_して見えた価値再定義最大1か月のリードタイムを10分に短縮したDevOps実践.pdf
susumutomita
0
110
Cursor/Devin全社導入の理想と現実
saitoryc
27
20k
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
580
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
190
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
10
3.5k
ComposeでWebアプリを作る技術
tbsten
0
120
The Implementations of Advanced LR Parser Algorithm
junk0612
1
900
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.4k
GitHub's CSS Performance
jonrohan
1030
460k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Scaling GitHub
holman
459
140k
Embracing the Ebb and Flow
colly
85
4.7k
A Tale of Four Properties
chriscoyier
158
23k
For a Future-Friendly Web
brad_frost
177
9.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Side Projects
sachag
453
42k
Transcript
มଶత$44τϦοΫ Grand Frontend Osaka 2016 / Kite
WordPress core contributor Ruby on Rails contributor Wocker developer Bathe
developer Frasco developer Web & graphic designer Programmer Kite KITERETZ inc. CEO & Funder ! kite.koga " ixkaito # ixkaito
લఏ ˙ 'MFYCPYΛΘͳ͍ ˙ DBMD ΛΘͳ͍ ະରԠϒϥβͰϨΠΞτͷӨڹ͕େ͖͍ͷͰ
มଶɿॳڃ
ݻఆ෯ͱύʔηϯςʔδͷΈ߹Θͤ
શମʵQY ͷ શମʵQY ͷ ? ? width: 120px; Ϩεϙϯγϒ ༷
width: 50%; width: 50%; margin-left: -120px; // 固定幅分のネガティブマージンを入れる Γํ
padding-left: 120px; // 固定幅分のパディングを入れる width: 50%; width: 50%; Γํ
Demo: https://ixkaito.github.io/percent-with-fixed-width/ Source: https://github.com/ixkaito/percent-with-fixed-width σϞʗιʔε
มଶɿதڃ
ҟͳΔഎܠ৭ͷࣼΊσβΠϯ
ਫฏ ਫฏ Ϩεϙϯγϒ ༷
ී௨ʹskewΛ͔͚Δͱ ࣦഊ
// 背景色を半分ずつ上下の要素に合わせる background: linear-gradient( blue 50%, yellow 50% ); position:
relative; z-index: 0; // 0 以上 Γํ
// 擬似要素に skew をかける :before { background: white; content: "";
position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; // -1 以下 transform: skewY(-7deg); } Γํ
Demo: https://ixkaito.github.io/skew-with-different-colors/ Source: https://github.com/ixkaito/skew-with-different-colors σϞʗιʔε
มଶɿ্ڃ
ಛघͳܩઢ
༷
ߟ͑ํ ͦΕͧΕͷܩઢΛ͜ͷܗʹͰ͖Ε0,
// まずは普通にボーダーをつける border: 1px solid; position: relative; z-index: 0; //
0 以下 Γํ
Γํ // ボーダーを重ねる margin: 0 -1px -1px 0;
Γํ // ボーダーを重ねる margin: 0 -1px -1px 0; ॏͶͨɺίϯςϯπ෯͕ॖΉ
// 親要素に対して // ボーダー幅✕間のボーダー数分のネガティ ブマージン margin-right: -2px; Γํ ͜ΕͰϐολϦʂ
:before, :after { // 背景色と同じ色を付ける background: white; content: ""; position:
absolute; z-index: -1; // -1 以下 } :before { top: 20px; // 十字の大きさ bottom: 20px; // 十字の大きさ left: -1px; // ボーダー幅 right: -1px; // ボーダー幅 } :after { top: -1px; // ボーダー幅 bottom: -1px; // ボーダー幅 left: 20px; // 十字の大きさ right: 20px; // 十字の大きさ } Γํ
Demo: https://ixkaito.github.io/unique-border/ Source: https://github.com/ixkaito/unique-border σϞʗιʔε
มଶɿυڃ
ಛघͳ০Γ
༷ A A A ˙ ςΩετͷ͞ʹΑͬͯ"ͷ෦͕৳ͼΔ ˙ ϑΥϯτ৭ʹΑͬͯɺ০Γͷ৭มΘΔ
˙ ςΩετͷ͞ʹΑͬͯ"ͷ෦͕৳ͼΔ ઌɺɺதؒ෦ʹ͚Δ ˙ ϑΥϯτ৭ʹΑͬͯɺ০Γͷ৭มΘΔ ϑΥϯτͱͯ͠දࣔ͢Δ ߟ͑ํ A A A
Γํ ˙ ϐΫηϧϨϕϧͰͽͬͨΓ߹͏Α͏ʹׂ͢Δ ˙ ΞʔτϘʔυਖ਼ํܗͷํ͕࠷ऴతʹΩϨΠ ˙ ০Γ͕ςΩετͷԼͷ߹ɺΞʔτϘʔυʹରͯ͠Լଗ͕͑Φεεϝ 47(Λ࡞Δ
Γํ *DP.PPOͰϑΥϯτԽ
Γํ <h1 class="title"> <!-- ΠϯφʔΤϨϝϯτͰϥοϓ͢Δ --> <span class="title-inner">SPEAKER</span> </h1> SPEAKER
)5.-
Γํ SPEAKER .title:before
Γํ .title:after SPEAKER
Γํ .title-inner:after SPEAKER
Γํ SPEAKER ͜ΕΛेͳ͞ʹͯ͠ɺoverflow: hidden;͢Ε͍͍Μ͡Όͳ͍ʁ
Γํ SPEAKER Ͳ͏ͬͯʁ ͜ΕΛेͳ͞ʹͯ͠ɺoverflow: hidden;͢Ε͍͍Μ͡Όͳ͍ʁ
SPEAKER ࣦഊྫ transform: scaleX(99); transform-origin: 0;
SPEAKER ࣦഊྫ transform: scaleX(99); transform-origin: 0; ೦ͳ͕ΒɺϒϥβʹΑͬͯζϨΔ
ࣦഊྫ 47(ͷΦϦδφϧαΠζΛ େ͖͘͢Δ
ࣦഊྫ 47(ͷΦϦδφϧαΠζΛ େ͖͘͢Δ ೦ͳ͕Βɺ০Γͷܗ่͕ΕΔ
SPEAKER ݁ content: "\e901\e901\e901\e901\e901\e901\e901\e901\e901\e901\e901\e901"; DPOUFOUʹෳೖΕͯͭͳ͛Δͷ͕Ұ൪ΩϨΠ
Demo: https://ixkaito.github.io/unique-decoration/ Source: https://github.com/ixkaito/unique-decoration σϞʗιʔε
൪֎ฤ
$44:matchesΛͬͨ$44ϋοΫ :-webkit-any( selector ) { /* Chrome */ } :-moz-any(
selector ) { /* Firefox */ } :matches( selector ) { /* Safari */ }
6OSFTFU$44Λ࡞ΔͨΊɺ ֤ϒϥβͷσϑΥϧτελΠϧΛௐͯͨΒ ͖͔͚ͬ UnresetCSS: https://github.com/ixkaito/unreset-css
:matchesͱɺ$44ͷٖࣅΫϥεͷҰͭͰɺ ෳηϨΫλʔΛ·ͱΊΔ͜ͱ͕Ͱ͖Δɻ NBUDIFT
۩ମྫ :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1
{ font-size: 1.17em; } ͜Ε
۩ମྫ article article h1, article aside h1, article nav h1,
article section h1, aside article h1, aside aside h1, aside nav h1, aside section h1, nav article h1, nav aside h1, nav nav h1, nav section h1, section article h1, section aside h1, section nav h1, section section h1 { font-size: 1.17em; } ͜Εͱಉ͡
۩ମྫ article, aside, nav, section { article, aside, nav, section
{ h1 { font-size: 1.17em; } } } 4BTTͳͲͷೖΕࢠʹ͍ۙ
ରԠঢ়گ :matches$44Ͱ:any :-webkit-any( selector ) { /* Chrome */ }
:-moz-any( selector ) { /* Firefox */ } :matches( selector ) { /* Safari */ } ֤ϒϥβͷରԠঢ়گ
͍ॴ ͜ͷରԠঢ়گΛٯखʹར༻ͯ͠ɺ $44ͷΈͰϒϥβʹΑͬͯελΠϧΛม͑Δ͜ͱ͕Ͱ͖Δɻ ྫ͑ɺ4BGBSJ͚ͩQYζϨͯϘʔμʔ͕ফ͑ΔͷͰϘʔμʔΛQYʹ͢Δɻ ࣮ྫ
˙ ͜ΕΒมଶత$44τϦοΫͷ΄ΜͷҰ෦ ˙ ͜͜ͰऔΓ্͛ͨΓํΛ֮͑Δඞཁͳ͍ɺॏཁͳͷԼه ˙ $44Ͱϓϩάϥϛϯάతࢥߟྗੑɺղܾྗɺ உͷϩϚϯ ͜ͷ߹ঁੑͰஉͷϩϚϯ ඞཁ ˙
ϐΫηϧͷͩ͜ΘΓσβΠϯͷ࠶ݱੑαΠτͷΫΦϦςΟ Λ֨ஈʹҾ্͖͛Δ ·ͱΊ
࠷ޙʹ
,*5&3&5;JOD גࣜձࣾΩςϨπ Ͱɺ ຐ๏͍ʹͳΓ͍ͨਓΛืू͠·͢ɻ ϦϞʔτɺύʔτλΠϜܴɻ αΠτ͔Β IUUQLJUFSFU[DPN 'BDFCPPLϝοηʔδ͔Β IUUQGBDFCPPLDPNLJUFLPHB (JU)VC*TTVF
IUUQTHJUIVCDPNLJUFSFU[