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
70k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
7
4.9k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
22
7.4k
タイポグラフィベーシック (+ デザインアイデア)
ixkaito
13
3.6k
WordPress の今とこれから
ixkaito
1
1.7k
世界で一人しかできない WordPress コアを写経する話 ― 修行の先に見たものとは?
ixkaito
5
14k
WordPress の今とこれから
ixkaito
4
2.5k
Let's Think about Right Answers of Design and UI/UX
ixkaito
0
290
ブラウザのデフォルトスタイルを見てみよう
ixkaito
3
1.4k
Other Decks in Programming
See All in Programming
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
650
LangChainの現在とv0.3にむけて
os1ma
4
920
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
Ruby Parser progress report 2024
yui_knk
2
230
Swiftコードバトル必勝法
toshi0383
0
160
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
620
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
460
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
350
Jakarta EE meets AI
ivargrimstad
0
380
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Featured
See All Featured
Debugging Ruby Performance
tmm1
72
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Atom: Resistance is Futile
akmur
261
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Music & Morning Musume
bryan
46
6k
Designing Experiences People Love
moore
138
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Embracing the Ebb and Flow
colly
83
4.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
KATA
mclloyd
27
13k
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[