多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
มଶత$44τϦοΫGrand Frontend Osaka 2016 / Kite
View Slide
WordPress core contributorRuby on Rails contributorWocker developerBathe developerFrasco developerWeb & graphic designerProgrammerKiteKITERETZ 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σϞʗιʔε
มଶɿυڃ
ಛघͳ০Γ
༷AAA˙ςΩετͷ͞ʹΑͬͯ"ͷ෦͕৳ͼΔ˙ϑΥϯτ৭ʹΑͬͯɺ০Γͷ৭มΘΔ
˙ςΩετͷ͞ʹΑͬͯ"ͷ෦͕৳ͼΔઌɺɺதؒ෦ʹ͚Δ˙ϑΥϯτ৭ʹΑͬͯɺ০Γͷ৭มΘΔϑΥϯτͱͯ͠දࣔ͢Δߟ͑ํAAA
Γํ˙ϐΫηϧϨϕϧͰͽͬͨΓ߹͏Α͏ʹׂ͢Δ˙ΞʔτϘʔυਖ਼ํܗͷํ͕࠷ऴతʹΩϨΠ˙০Γ͕ςΩετͷԼͷ߹ɺΞʔτϘʔυʹରͯ͠Լଗ͕͑Φεεϝ47(Λ࡞Δ
Γํ*DP.PPOͰϑΥϯτԽ
ΓํSPEAKERSPEAKER)5.-
ΓํSPEAKER.title:before
Γํ.title:afterSPEAKER
Γํ.title-inner:afterSPEAKER
Γํ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[
ixkaito
subomi
hpgrahsl
nozaki
m_coder
iwatatomoya
sr2mg4
hschwentner
monicaribeiro
miyabigouji
hirodragon112
tapompom
schroneko
yeseniaperezcruz
aki_iinuma
schacon
sugarenia
aarron
ufuk
3n
akosma
malarkey
keathley
hannesfritz
maltzj