変態的 CSS トリック

274c474bb14a19f48ee86907c5be2a1d?s=47 Kite
August 28, 2016

変態的 CSS トリック

多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。

274c474bb14a19f48ee86907c5be2a1d?s=128

Kite

August 28, 2016
Tweet

Transcript

  1. มଶత$44τϦοΫ Grand Frontend Osaka 2016 / Kite

  2. 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
  3. લఏ ˙ 'MFYCPYΛ࢖Θͳ͍ ˙ DBMD Λ࢖Θͳ͍ ະରԠϒϥ΢βͰϨΠΞ΢τ΁ͷӨڹ͕େ͖͍ͷͰ

  4. มଶ౓ɿॳڃ

  5. ݻఆ෯ͱύʔηϯςʔδͷ૊Έ߹Θͤ

  6. શମʵQY ͷ൒෼ શମʵQY ͷ൒෼ ? ? width: 120px; Ϩεϙϯγϒ ࢓༷

  7. width: 50%; width: 50%; margin-left: -120px; // 固定幅分のネガティブマージンを入れる ΍Γํ

  8. padding-left: 120px; // 固定幅分のパディングを入れる width: 50%; width: 50%; ΍Γํ

  9. Demo: https://ixkaito.github.io/percent-with-fixed-width/ Source: https://github.com/ixkaito/percent-with-fixed-width σϞʗιʔε

  10. มଶ౓ɿதڃ

  11. ҟͳΔഎܠ৭ͷࣼΊσβΠϯ

  12. ਫฏ ਫฏ Ϩεϙϯγϒ ࢓༷

  13. ී௨ʹskewΛ͔͚Δͱ ࣦഊ

  14. // 背景色を半分ずつ上下の要素に合わせる background: linear-gradient( blue 50%, yellow 50% ); position:

    relative; z-index: 0; // 0 以上 ΍Γํ
  15. // 擬似要素に skew をかける :before { background: white; content: "";

    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; // -1 以下 transform: skewY(-7deg); } ΍Γํ
  16. Demo: https://ixkaito.github.io/skew-with-different-colors/ Source: https://github.com/ixkaito/skew-with-different-colors σϞʗιʔε

  17. มଶ౓ɿ্ڃ

  18. ಛघͳܩઢ

  19. ࢓༷

  20. ߟ͑ํ ͦΕͧΕͷܩઢΛ͜ͷܗʹͰ͖Ε͹0,

  21. // まずは普通にボーダーをつける border: 1px solid; position: relative; z-index: 0; //

    0 以下 ΍Γํ
  22. ΍Γํ // ボーダーを重ねる margin: 0 -1px -1px 0;

  23. ΍Γํ // ボーダーを重ねる margin: 0 -1px -1px 0; ॏͶͨ෼ɺίϯςϯπ෯͕ॖΉ

  24. // 親要素に対して // ボーダー幅✕間のボーダー数分のネガティ ブマージン margin-right: -2px; ΍Γํ ͜ΕͰϐολϦʂ

  25. :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; // 十字の大きさ } ΍Γํ
  26. Demo: https://ixkaito.github.io/unique-border/ Source: https://github.com/ixkaito/unique-border σϞʗιʔε

  27. มଶ౓ɿ௒υڃ

  28. ಛघͳ০Γ

  29. ࢓༷ A A A ˙ ςΩετͷ௕͞ʹΑͬͯ"ͷ෦෼͕৳ͼΔ ˙ ϑΥϯτ৭ʹΑͬͯɺ০Γͷ৭΋มΘΔ

  30. ˙ ςΩετͷ௕͞ʹΑͬͯ"ͷ෦෼͕৳ͼΔ ઌ୺ɺ຤୺ɺதؒ෦ʹ෼͚Δ ˙ ϑΥϯτ৭ʹΑͬͯɺ০Γͷ৭΋มΘΔ ϑΥϯτͱͯ͠දࣔ͢Δ ߟ͑ํ A A A

  31. ΍Γํ ˙ ϐΫηϧϨϕϧͰͽͬͨΓ߹͏Α͏ʹ෼ׂ͢Δ ˙ ΞʔτϘʔυ͸ਖ਼ํܗͷํ͕࠷ऴతʹ͸ΩϨΠ ˙ ০Γ͕ςΩετͷԼͷ৔߹͸ɺΞʔτϘʔυʹରͯ͠Լଗ͕͑Φεεϝ 47(Λ࡞Δ

  32. ΍Γํ *DP.PPOͰϑΥϯτԽ

  33. ΍Γํ <h1 class="title"> <!-- ΠϯφʔΤϨϝϯτͰϥοϓ͢Δ --> <span class="title-inner">SPEAKER</span> </h1> SPEAKER

    )5.-
  34. ΍Γํ SPEAKER .title:before

  35. ΍Γํ .title:after SPEAKER

  36. ΍Γํ .title-inner:after SPEAKER

  37. ΍Γํ SPEAKER ͜ΕΛे෼ͳ௕͞ʹͯ͠ɺoverflow: hidden;͢Ε͹͍͍Μ͡Όͳ͍ʁ

  38. ΍Γํ SPEAKER Ͳ͏΍ͬͯʁ ͜ΕΛे෼ͳ௕͞ʹͯ͠ɺoverflow: hidden;͢Ε͹͍͍Μ͡Όͳ͍ʁ

  39. SPEAKER ࣦഊྫ transform: scaleX(99); transform-origin: 0;

  40. SPEAKER ࣦഊྫ transform: scaleX(99); transform-origin: 0; ࢒೦ͳ͕Βɺϒϥ΢βʹΑͬͯζϨΔ

  41. ࣦഊྫ 47(ͷΦϦδφϧαΠζΛ େ͖͘͢Δ

  42. ࣦഊྫ 47(ͷΦϦδφϧαΠζΛ େ͖͘͢Δ ࢒೦ͳ͕Βɺ০Γͷܗ่͕ΕΔ

  43. SPEAKER ݁࿦ content: "\e901\e901\e901\e901\e901\e901\e901\e901\e901\e901\e901\e901"; DPOUFOUʹෳ਺ೖΕͯͭͳ͛Δͷ͕Ұ൪ΩϨΠ

  44. Demo: https://ixkaito.github.io/unique-decoration/ Source: https://github.com/ixkaito/unique-decoration σϞʗιʔε

  45. ൪֎ฤ

  46. $44:matchesΛ࢖ͬͨ$44ϋοΫ :-webkit-any( selector ) { /* Chrome */ } :-moz-any(

    selector ) { /* Firefox */ } :matches( selector ) { /* Safari */ }
  47. 6OSFTFU$44Λ࡞ΔͨΊɺ
 ֤ϒϥ΢βͷσϑΥϧτελΠϧΛௐ΂ͯͨΒ ͖͔͚ͬ UnresetCSS: https://github.com/ixkaito/unreset-css

  48. :matchesͱ͸ɺ$44ͷٖࣅΫϥεͷҰͭͰɺ
 ෳ਺ηϨΫλʔΛ·ͱΊΔ͜ͱ͕Ͱ͖Δɻ NBUDIFT

  49. ۩ମྫ :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1

    { font-size: 1.17em; } ͜Ε͸
  50. ۩ମྫ 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; } ͜Εͱಉ͡
  51. ۩ମྫ article, aside, nav, section { article, aside, nav, section

    { h1 { font-size: 1.17em; } } } 4BTTͳͲͷೖΕࢠʹ͍ۙ
  52. ରԠঢ়گ :matches͸$44Ͱ͸:any :-webkit-any( selector ) { /* Chrome */ }

    :-moz-any( selector ) { /* Firefox */ } :matches( selector ) { /* Safari */ } ֤ϒϥ΢βͷରԠঢ়گ
  53. ࢖͍ॴ ͜ͷରԠঢ়گΛٯखʹར༻ͯ͠ɺ
 $44ͷΈͰϒϥ΢βʹΑͬͯελΠϧΛม͑Δ͜ͱ͕Ͱ͖Δɻ ྫ͑͹ɺ4BGBSJ͚ͩQYζϨͯϘʔμʔ͕ফ͑ΔͷͰϘʔμʔΛQYʹ͢Δɻ ࣮ྫ

  54. ˙ ͜ΕΒ͸มଶత$44τϦοΫͷ΄ΜͷҰ෦ ˙ ͜͜ͰऔΓ্͛ͨ΍ΓํΛ֮͑Δඞཁ͸ͳ͍ɺॏཁͳͷ͸Լه ˙ $44Ͱ΋ϓϩάϥϛϯάతࢥߟྗ΍૑଄ੑɺ໰୊ղܾྗɺ
 உͷϩϚϯ ͜ͷ৔߹ঁੑͰ΋உͷϩϚϯ ͸ඞཁ ˙

    ϐΫηϧ΁ͷͩ͜ΘΓ͸σβΠϯͷ࠶ݱੑ΍αΠτͷΫΦϦςΟ Λ֨ஈʹҾ্͖͛Δ ·ͱΊ
  55. ࠷ޙʹ

  56. ,*5&3&5;JOD גࣜձࣾΩςϨπ Ͱ͸ɺ
 ຐ๏࢖͍ʹͳΓ͍ͨਓΛืू͠·͢ɻ
 ϦϞʔτɺύʔτλΠϜ׻ܴɻ αΠτ͔Β
 IUUQLJUFSFU[DPN 'BDFCPPLϝοηʔδ͔Β
 IUUQGBDFCPPLDPNLJUFLPHB (JU)VC*TTVF


    IUUQTHJUIVCDPNLJUFSFU[