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
15k
WordPress の今とこれから
ixkaito
4
2.6k
Let's Think about Right Answers of Design and UI/UX
ixkaito
0
390
ブラウザのデフォルトスタイルを見てみよう
ixkaito
3
1.5k
Other Decks in Programming
See All in Programming
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
720
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
570
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
460
VS Code Update for GitHub Copilot
74th
1
550
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
600
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
560
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
3
1.2k
PipeCDのプラグイン化で目指すところ
warashi
1
230
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
240
童醫院敏捷轉型的實踐經驗
cclai999
0
210
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Typedesign – Prime Four
hannesfritz
42
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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[