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 full-size 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 full-size slide

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

    View full-size slide

  4. มଶ౓ɿॳڃ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. มଶ౓ɿதڃ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  17. มଶ౓ɿ্ڃ

    View full-size slide

  18. ಛघͳܩઢ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. :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 full-size slide

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

    View full-size slide

  26. มଶ౓ɿ௒υڃ

    View full-size slide

  27. ಛघͳ০Γ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. ΍Γํ


    SPEAKER

    SPEAKER
    )5.-

    View full-size slide

  33. ΍Γํ
    SPEAKER
    .title:before

    View full-size slide

  34. ΍Γํ
    .title:after
    SPEAKER

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  48. ۩ମྫ
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

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

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

    IUUQGBDFCPPLDPNLJUFLPHB
    (JU)VC*TTVF

    IUUQTHJUIVCDPNLJUFSFU[

    View full-size slide