Upgrade to Pro — share decks privately, control downloads, hide ads and more …

変態的 CSS トリック

Kite
August 28, 2016

変態的 CSS トリック

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

Kite

August 28, 2016
Tweet

More Decks by Kite

Other Decks in Programming

Transcript

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

    View Slide

  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

    View Slide

  3. લఏ
    ˙
    'MFYCPYΛ࢖Θͳ͍
    ˙
    DBMD
    Λ࢖Θͳ͍
    ະରԠϒϥ΢βͰϨΠΞ΢τ΁ͷӨڹ͕େ͖͍ͷͰ

    View Slide

  4. มଶ౓ɿॳڃ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. มଶ౓ɿதڃ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. // 擬似要素に skew をかける
    :before {
    background: white;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1; // -1 以下
    transform: skewY(-7deg);
    }
    ΍Γํ

    View Slide

  16. Demo: https://ixkaito.github.io/skew-with-different-colors/
    Source: https://github.com/ixkaito/skew-with-different-colors
    σϞʗιʔε

    View Slide

  17. มଶ౓ɿ্ڃ

    View Slide

  18. ಛघͳܩઢ

    View Slide

  19. ࢓༷

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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; // 十字の大きさ
    }
    ΍Γํ

    View Slide

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

    View Slide

  27. มଶ౓ɿ௒υڃ

    View Slide

  28. ಛघͳ০Γ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. ΍Γํ


    SPEAKER

    SPEAKER
    )5.-

    View Slide

  34. ΍Γํ
    SPEAKER
    .title:before

    View Slide

  35. ΍Γํ
    .title:after
    SPEAKER

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. ൪֎ฤ

    View Slide

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

    View Slide

  47. 6OSFTFU$44Λ࡞ΔͨΊɺ

    ֤ϒϥ΢βͷσϑΥϧτελΠϧΛௐ΂ͯͨΒ
    ͖͔͚ͬ
    UnresetCSS: https://github.com/ixkaito/unreset-css

    View Slide

  48. :matchesͱ͸ɺ$44ͷٖࣅΫϥεͷҰͭͰɺ

    ෳ਺ηϨΫλʔΛ·ͱΊΔ͜ͱ͕Ͱ͖Δɻ
    NBUDIFT

    View Slide

  49. ۩ମྫ
    :matches(article, aside, nav, section)
    :matches(article, aside, nav, section) h1 {
    font-size: 1.17em;
    }
    ͜Ε͸

    View Slide

  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;
    }
    ͜Εͱಉ͡

    View Slide

  51. ۩ମྫ
    article, aside, nav, section {
    article, aside, nav, section {
    h1 {
    font-size: 1.17em;
    }
    }
    }
    4BTTͳͲͷೖΕࢠʹ͍ۙ

    View Slide

  52. ରԠঢ়گ
    :matches͸$44Ͱ͸:any
    :-webkit-any( selector ) { /* Chrome */ }
    :-moz-any( selector ) { /* Firefox */ }
    :matches( selector ) { /* Safari */ }
    ֤ϒϥ΢βͷରԠঢ়گ

    View Slide

  53. ࢖͍ॴ
    ͜ͷରԠঢ়گΛٯखʹར༻ͯ͠ɺ

    $44ͷΈͰϒϥ΢βʹΑͬͯελΠϧΛม͑Δ͜ͱ͕Ͱ͖Δɻ
    ྫ͑͹ɺ4BGBSJ͚ͩQYζϨͯϘʔμʔ͕ফ͑ΔͷͰϘʔμʔΛQYʹ͢Δɻ ࣮ྫ

    View Slide

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

    உͷϩϚϯ ͜ͷ৔߹ঁੑͰ΋உͷϩϚϯ
    ͸ඞཁ
    ˙
    ϐΫηϧ΁ͷͩ͜ΘΓ͸σβΠϯͷ࠶ݱੑ΍αΠτͷΫΦϦςΟ
    Λ֨ஈʹҾ্͖͛Δ
    ·ͱΊ

    View Slide

  55. ࠷ޙʹ

    View Slide

  56. ,*5&3&5;JOD גࣜձࣾΩςϨπ
    Ͱ͸ɺ

    ຐ๏࢖͍ʹͳΓ͍ͨਓΛืू͠·͢ɻ

    ϦϞʔτɺύʔτλΠϜ׻ܴɻ
    αΠτ͔Β

    IUUQLJUFSFU[DPN
    'BDFCPPLϝοηʔδ͔Β

    IUUQGBDFCPPLDPNLJUFLPHB
    (JU)VC*TTVF

    IUUQTHJUIVCDPNLJUFSFU[

    View Slide