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
12
74k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
7
5.3k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
22
7.7k
タイポグラフィベーシック (+ デザインアイデア)
ixkaito
13
3.9k
WordPress の今とこれから
ixkaito
1
1.8k
世界で一人しかできない WordPress コアを写経する話 ― 修行の先に見たものとは?
ixkaito
5
15k
WordPress の今とこれから
ixkaito
4
2.6k
Let's Think about Right Answers of Design and UI/UX
ixkaito
0
400
ブラウザのデフォルトスタイルを見てみよう
ixkaito
3
1.5k
Other Decks in Programming
See All in Programming
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.3k
Testing Trophyは叫ばない
toms74209200
0
890
Design Foundational Data Engineering Observability
sucitw
3
200
1から理解するWeb Push
dora1998
7
1.9k
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
340
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
旅行プランAIエージェント開発の裏側
ippo012
2
930
Swift Updates - Learn Languages 2025
koher
2
510
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
Agile that works and the tools we love
rasmusluckow
330
21k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Raft: Consensus for Rubyists
vanstee
140
7.1k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
How GitHub (no longer) Works
holman
315
140k
The Cult of Friendly URLs
andyhume
79
6.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Music & Morning Musume
bryan
46
6.8k
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[