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
73k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
7
5.2k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
22
7.7k
タイポグラフィベーシック (+ デザインアイデア)
ixkaito
13
3.9k
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
380
ブラウザのデフォルトスタイルを見てみよう
ixkaito
3
1.5k
Other Decks in Programming
See All in Programming
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
290
Development of an App for Intuitive AI Learning - Blockly Summit 2025
teba_eleven
0
110
Benchmark
sysong
0
140
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.3k
Go1.25からのGOMAXPROCS
kuro_kurorrr
0
170
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
370
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
1
530
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
110
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
2
130
エラーって何種類あるの?
kajitack
5
140
単体テストの始め方/作り方
toms74209200
0
430
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
350
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Fireside Chat
paigeccino
37
3.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing for humans not robots
tammielis
253
25k
Faster Mobile Websites
deanohume
307
31k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Unsuck your backbone
ammeep
671
58k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
690
The Art of Programming - Codeland 2020
erikaheidi
54
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
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[