Making Links Magical Again with CSS                      Re:build 2012                      @jennlukas
http://owltastic.com/
/   Link Transition (all/color)l   a {    !   text-decoration: none;    !   color: #5e9092;    !   -webkit-transition: all...
http://2012.dconstruct.org/
http://2012.dconstruct.org/
/ Transition (all: BACKGROUND, COLOR,PADDING)l   .speakers-list li span { background-color:#222; background:rgba(0,0,0,0.8...
Don’t stallone It
O Music Awards 2
http://cog.gd/43y
http://jsfiddle.net/Jenn/WG3NE/
http://jsfiddle.net/Jenn/WG3NE/
/   List Item( HTML)l   <li>    !    <a href="#">    !    !    <div class="grid-info">    !    !    !   <h2><span>Must Fol...
/   List Item(CSS)l   li { width: 333px; height: 278px; position: relative; }    a { display: block; width: 100%; height: ...
http://omusicawards.com/vote
/   Vote Divs (HTML)l   <div class="block-paper grid-item">    !   <a href="#">    !   !    <h3><span>Vote Now!</span> <st...
/   Vote Hovers (CSS)l   a:hover, a:focus { text-decoration: none; color: #231f20; }    a:hover strong, a:focus strong { b...
http://omusicawards.com/vote
http://galleryofmo.co.uk/
http://galleryofmo.co.uk/
http://galleryofmo.co.uk/
/   Navigation and badge hoversl   section#header ul li.count a { position:absolute; top:40px; right:640px; color:#282828;...
http://itsnumbered.com/
http://itsnumbered.com/
http://itsnumbered.com/
http://itsnumbered.com/
/   Product HTMLl   #featured-products_block_center li div.under {    !   bottom: 0;    !   position: absolute;    !   hei...
http://codepen.io/Jenn/pen/ztHvx
/   Product link cssl   a { color: #333; text-decoration: none; text-transform: uppercase; font: bold 12px    arial; displ...
http://codepen.io/Jenn/pen/ztHvx
http://codepen.io/Jenn/pen/ztHvx
http://coworkchicago.com/
http://coworkchicago.com/
/   Link Transition (height, Margin)l   join-buttons .daily, .join-buttons .monthly { height: 260px; z-index: 0; margin-to...
http://coworkchicago.com/
/   Hover rotationl   .peepcard { width: 125px; height: 189px; float: left; position: relative;    !   -webkit-transition:...
http://www.rdio.com/
http://www.rdio.com/
http://www.rdio.com/
http://www.rdio.com/
/   layering opacity effectsl   .Index .stripe#heroes .arrow.up { background-position: top left; left: 0; }    .Index .str...
http://funnelbox.com
/   Div mask & width transitionsl   .marquee .ctaMask {! position:absolute; top:360px; overflow:hidden; width: 51px;    ! ...
http://www.emporiumpies.com/pies
http://www.emporiumpies.com/pies
css-tricks.com/almanac/properties/b/backface-visibility/
Experiments!!
http://mammothbooth.com/#/faq.html
http://mammothbooth.com/#/faq.html
http://codepen.io/Jenn/pen/qsklF
/   Sliding Box (HTML)l   <div>      <h2>How Much Does It cost?</h2>      <img src="http://placekitten.com/100/50" />     ...
/   Sliding Box (CSS)l   div { background: #f90; width: 500px; padding: 20px;   position: relative;    overflow: hidden;  ...
http://codepen.io/Jenn/pen/qsklF
/   Sliding Box HOvers(CSS)l   div:hover {      p {!        ! opacity: 1;      }      img {         bottom: -100px;      }...
http://circlesconference.com/
http://circlesconference.com/
http://codepen.io/Jenn/full/grjcd
http://codepen.io/Jenn/pen/grjcd
http://codepen.io/Jenn/pen/grjcd
http://codepen.io/Jenn/pen/grjcd
http://codepen.io/Jenn/pen/grjcd
/   CSS Filters (grayscale)l   img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter:    grayscale(...
http://codepen.io/Jenn/pen/grjcd
/   CSS Filters (sepia)l   img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter:    grayscale(100%...
http://codepen.io/Jenn/pen/grjcd
/   CSS Filters (hue-rotate)l   img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter:    grayscale...
http://codepen.io/Jenn/pen/grjcd
/   CSS Filters (contrast)l   img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter:    grayscale(1...
http://codepen.io/Jenn/pen/grjcd
/   CSS Filters: Hoverl   img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter:    grayscale(100%)...
http://codepen.io/Jenn/full/grjcd
http://www.readability.com/
http://cog.gd/4hk
http://thenerdary.net/
http://codepen.io/Jenn/full/gCKex
http://codepen.io/Jenn/full/gCKex
/   CSS Filters: Invertl   body { background: #818291; font-family: arial; }    .wrap { width: 600px; margin: 20px auto; p...
http://codepen.io/Jenn/full/HKoAl
http://codepen.io/Jenn/full/HKoAl
/   CSS Filters: Invert (The Nerdary)l   pre {    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    background: #...
http://codepen.io/Jenn/full/eFcux
http://codepen.io/Jenn/full/eFcux
/   CSS Filters: Blurl   article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222;    positio...
http://codepen.io/Jenn/full/eFcux
/   CSS Filters: Blurl   article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222;    positio...
http://codepen.io/Jenn/full/eFcux
http://codepen.io/Jenn/full/eFcux
/   CSS Filters: Blur, Invertl   article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222;   ...
http://codepen.io/Jenn/full/eFcux
/   CSS Generated Messagesl   article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222;    po...
http://codepen.io/Jenn/full/eFcux
http://codepen.io/Jenn/full/eFcux
http://cog.gd/44c
http://cog.gd/44c
http://cog.gd/44d
http://cog.gd/44d
/   Burt vs Tom HTMLl   <header class="wrap">    !   <h1>Tom Selleck or Burt Reynolds?!?</h1>    !   <p class="adjunct"><s...
/   Burt vs Tom CSSl   div { width: 100%; position: relative; min-height: 95px; margin: 0 0 5px; }    span { position: abs...
This cat totally loves hovers.
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Upcoming SlideShare
Loading in...5
×

Making Links Magical Again with CSS

2,536

Published on

Slides from re:build 2012 http://www.rebuildconf.com/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,536
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Making Links Magical Again with CSS"

  1. 1. Making Links Magical Again with CSS Re:build 2012 @jennlukas
  2. 2. http://owltastic.com/
  3. 3. / Link Transition (all/color)l a { ! text-decoration: none; ! color: #5e9092; ! -webkit-transition: all 0.2s linear; ! -moz-transition: all 0.2s linear; ! -o-transition: all 0.2s linear; ! transition: all 0.2s linear; } a:hover { ! color: #96c0c2; }
  4. 4. http://2012.dconstruct.org/
  5. 5. http://2012.dconstruct.org/
  6. 6. / Transition (all: BACKGROUND, COLOR,PADDING)l .speakers-list li span { background-color:#222; background:rgba(0,0,0,0.8); color: rgba(255,255,255,0.7); text-transform: uppercase;font-size: 0.7em; position: absolute; right: 0; left: 0; bottom: 0; padding: 5px 10px; ! -webkit-transition: all 0.3s ease-out; ! -moz-transition: all 0.3s ease-out; ! -ms-transition: all 0.3s ease-out; ! -o-transition: all 0.3s ease-out; ! transition: all 0.3s ease-out; } .speakers-list li a:hover span { background: rgba(255,255,255, 0.8); color: #111; padding-bottom: 20px; }
  7. 7. Don’t stallone It
  8. 8. O Music Awards 2
  9. 9. http://cog.gd/43y
  10. 10. http://jsfiddle.net/Jenn/WG3NE/
  11. 11. http://jsfiddle.net/Jenn/WG3NE/
  12. 12. / List Item( HTML)l <li> ! <a href="#"> ! ! <div class="grid-info"> ! ! ! <h2><span>Must Follow</span><br /><span>Artist on Twitter</span></h2> ! ! ! <div class="grid-reveal"> ! ! ! ! <p>For those of you with more than three tattoos of the same band, we salute you.</p> ! ! ! ! <p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/ 80/20" width="80" height="20" alt="Loreal Paris" /></p> ! ! ! </div> ! ! </div> ! </a> </li>
  13. 13. / List Item(CSS)l li { width: 333px; height: 278px; position: relative; } a { display: block; width: 100%; height: 100%; background: #9cf; text-decoration: none; } .grid-info { position: absolute; bottom: 0; } .grid-reveal { overflow: hidden; max-height: 0; background: #c0b3b3;     -webkit-transition: all 0.7s linear; }                                      a:hover .grid-reveal, a:focus .grid-reveal { max-height: 250px; }
  14. 14. http://omusicawards.com/vote
  15. 15. / Vote Divs (HTML)l <div class="block-paper grid-item"> ! <a href="#"> ! ! <h3><span>Vote Now!</span> <strong>Category Title</strong></h3> ! ! <p class="grid-desc">They pledge rapid allegiance to the band.</p>! ! ! ! <span class="frame"><img src="http://placehold.it/265x265" alt="" /></span> ! ! <p class="vote-count count-hot"><strong>5,000</strong> votes per hour</p> ! </a>! </div>
  16. 16. / Vote Hovers (CSS)l a:hover, a:focus { text-decoration: none; color: #231f20; } a:hover strong, a:focus strong { background: #a2e5d2; } a:hover p.grid-desc, a:focus p.grid-desc { max-height: 300px; margin-bottom: 12px; } a:hover h3 span, a:focus h3 span { max-height: 100px; } a:hover .vote-count, a:focus .vote-count { max-height: 0; margin: 0; padding: 0; }
  17. 17. http://omusicawards.com/vote
  18. 18. http://galleryofmo.co.uk/
  19. 19. http://galleryofmo.co.uk/
  20. 20. http://galleryofmo.co.uk/
  21. 21. / Navigation and badge hoversl section#header ul li.count a { position:absolute; top:40px; right:640px; color:#282828; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } section#header ul li.count a:hover { color:#6ebeb7; top:30px; } a.site:hover { top:110px; }
  22. 22. http://itsnumbered.com/
  23. 23. http://itsnumbered.com/
  24. 24. http://itsnumbered.com/
  25. 25. http://itsnumbered.com/
  26. 26. / Product HTMLl #featured-products_block_center li div.under { ! bottom: 0; ! position: absolute; ! height: 5px; ! background: #fff; ! border-top: 20px #F0F1EC solid; ! left: 0; } #featured-products_block_center li:hover div.under { ! background: #d34132; }
  27. 27. http://codepen.io/Jenn/pen/ztHvx
  28. 28. / Product link cssl a { color: #333; text-decoration: none; text-transform: uppercase; font: bold 12px arial; display: block; position: relative; padding: 10px; } a:after { content: ; height: 5px; width: 100%; position: absolute; bottom: -20px; left: 0; background: #fff; } a:hover h2 { color: red; } a:hover:after { background: red; }
  29. 29. http://codepen.io/Jenn/pen/ztHvx
  30. 30. http://codepen.io/Jenn/pen/ztHvx
  31. 31. http://coworkchicago.com/
  32. 32. http://coworkchicago.com/
  33. 33. / Link Transition (height, Margin)l join-buttons .daily, .join-buttons .monthly { height: 260px; z-index: 0; margin-top: 30px; ! transition: height .2s linear,margin .2s linear; ! -o-transition: height .2s linear,margin .2s linear; ! -moz-transition: height .2s linear,margin .2s linear; ! -webkit-transition: height .2s linear,margin .2s linear; } .join-buttons .daily:hover, .join-buttons .monthly:hover { height: 280px; margin-top: 20px; } li.button:hover { z-index: 20; }
  34. 34. http://coworkchicago.com/
  35. 35. / Hover rotationl .peepcard { width: 125px; height: 189px; float: left; position: relative; ! -webkit-transition: -webkit-transform .2s ease-out; ! -moz-transition: -moz-transform .2s ease-out; ! -o-transition: -o-transform .2s ease-out; } .feat4 { top:13px; left:2px; ! -webkit-transform:rotate(-3deg); ! -moz-transform:rotate(-3deg); ! -ms-transform:rotate(-3deg); ! -o-transform:rotate(-3deg) } .feat4:hover { ! -webkit-transform:rotate(-2deg); ! -moz-transform:rotate(-2deg); ! -ms-transform:rotate(-2deg); ! -o-transform:rotate(-2deg) }
  36. 36. http://www.rdio.com/
  37. 37. http://www.rdio.com/
  38. 38. http://www.rdio.com/
  39. 39. http://www.rdio.com/
  40. 40. / layering opacity effectsl .Index .stripe#heroes .arrow.up { background-position: top left; left: 0; } .Index .stripe#heroes .arrow.down { background-position: top right; right: 0; } .Index .stripe#heroes .arrow { background-image: url(/media/marketing/images/heroes/ arrows.png); cursor: pointer; height: 460px; opacity: 0; position: absolute; width: 190px; z-index: 201; ! -webkit-transition: opacity 0.25s; ! -moz-transition: opacity 0.25s; ! -ms-transition: opacity 0.25s; ! -o-transition: opacity 0.25s; ! transition: opacity 0.25s; } .Index .stripe#heroes:hover .arrow.bottom { opacity: 1; } .Index .stripe#heroes .arrow.top:hover { opacity: 1; }
  41. 41. http://funnelbox.com
  42. 42. / Div mask & width transitionsl .marquee .ctaMask {! position:absolute; top:360px; overflow:hidden; width: 51px; ! transition: width 0.5s ease-out; ! -moz-transition: width 0.5s ease-out; ! -webkit-transition: width 0.5s ease-out; } .marqueeWrap.interactive:hover .ctaMask { width:550px; } .marquee .ctaLinks span.link, .marquee .ctaLinks span.arrow.secondary { opacity:0; filter:alpha(opacity=0); ! transition: opacity 0.5s ease-in-out; ! -moz-transition: opacity 0.5s ease-in-out; ! -webkit-transition: opacity 0.5s ease-in-out; } .marqueeWrap.interactive:hover .ctaLinks span.arrow.secondary { ! opacity:1; ! filter:alpha(opacity=100); }
  43. 43. http://www.emporiumpies.com/pies
  44. 44. http://www.emporiumpies.com/pies
  45. 45. css-tricks.com/almanac/properties/b/backface-visibility/
  46. 46. Experiments!!
  47. 47. http://mammothbooth.com/#/faq.html
  48. 48. http://mammothbooth.com/#/faq.html
  49. 49. http://codepen.io/Jenn/pen/qsklF
  50. 50. / Sliding Box (HTML)l <div> <h2>How Much Does It cost?</h2> <img src="http://placekitten.com/100/50" /> <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. </p> </div>
  51. 51. / Sliding Box (CSS)l div { background: #f90; width: 500px; padding: 20px; position: relative; overflow: hidden; } h2 {position: absolute; left: 10px; top: 0px; transition: top 0.2s linear; } position: absolute; right: 20px; bottom: 15px; transition: img { bottom 0.2s linear; } p { opacity: 0; transition: opacity 0.5s linear; }
  52. 52. http://codepen.io/Jenn/pen/qsklF
  53. 53. / Sliding Box HOvers(CSS)l div:hover { p {! ! opacity: 1; } img { bottom: -100px; } h2 { top: -100px; } }
  54. 54. http://circlesconference.com/
  55. 55. http://circlesconference.com/
  56. 56. http://codepen.io/Jenn/full/grjcd
  57. 57. http://codepen.io/Jenn/pen/grjcd
  58. 58. http://codepen.io/Jenn/pen/grjcd
  59. 59. http://codepen.io/Jenn/pen/grjcd
  60. 60. http://codepen.io/Jenn/pen/grjcd
  61. 61. / CSS Filters (grayscale)l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter: grayscale(100%); }
  62. 62. http://codepen.io/Jenn/pen/grjcd
  63. 63. / CSS Filters (sepia)l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter: grayscale(100%) sepia(90%); }
  64. 64. http://codepen.io/Jenn/pen/grjcd
  65. 65. / CSS Filters (hue-rotate)l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter: grayscale(100%) sepia(90%) hue-rotate(90deg); }
  66. 66. http://codepen.io/Jenn/pen/grjcd
  67. 67. / CSS Filters (contrast)l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter: grayscale(100%) sepia(90%) hue-rotate(90deg) contrast(110%); }
  68. 68. http://codepen.io/Jenn/pen/grjcd
  69. 69. / CSS Filters: Hoverl img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter: grayscale(100%) sepia(90%) hue-rotate(90deg) contrast(110%); -webkit-transition: all 0.5s linear; } a:hover, a:focus { img { ! ! -webkit-filter: grayscale(70%) sepia(100%) hue-rotate(0deg) contrast(110%); } span { color: #fff; } }
  70. 70. http://codepen.io/Jenn/full/grjcd
  71. 71. http://www.readability.com/
  72. 72. http://cog.gd/4hk
  73. 73. http://thenerdary.net/
  74. 74. http://codepen.io/Jenn/full/gCKex
  75. 75. http://codepen.io/Jenn/full/gCKex
  76. 76. / CSS Filters: Invertl body { background: #818291; font-family: arial; } .wrap { width: 600px; margin: 20px auto; padding: 20px; background: #fff; } h1 { text-transform: uppercase; margin: 0 0 20px; } p { margin-bottom: 20px; } .code-block { border: 5px solid #1d1f1d; background: #fff; font-family: monospace; box-shadow: 2px 2px 5px rgba(0,0,0,0.9);} .code-block:hover { -webkit-filter: invert(1); } .code-block ::selection { background: #3639d9; color: #fff; }
  77. 77. http://codepen.io/Jenn/full/HKoAl
  78. 78. http://codepen.io/Jenn/full/HKoAl
  79. 79. / CSS Filters: Invert (The Nerdary)l pre { -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #484742; border-radius: 5px; color: white; font-size: 10pt; font-size: 1rem; padding: 15px; max-width: 580px; overflow: auto; } pre:hover { -webkit-filter: invert(1); }
  80. 80. http://codepen.io/Jenn/full/eFcux
  81. 81. http://codepen.io/Jenn/full/eFcux
  82. 82. / CSS Filters: Blurl article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222; position: relative; -webkit-filter: blur(2px); }
  83. 83. http://codepen.io/Jenn/full/eFcux
  84. 84. / CSS Filters: Blurl article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222; position: relative; -webkit-filter: blur(2px); } article:hover { -webkit-filter: blur(0px); }
  85. 85. http://codepen.io/Jenn/full/eFcux
  86. 86. http://codepen.io/Jenn/full/eFcux
  87. 87. / CSS Filters: Blur, Invertl article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222; position: relative; -webkit-filter: blur(2px); } article:hover { -webkit-filter: blur(0px); } article:focus { -webkit-filter: blur(0px) invert(1); }
  88. 88. http://codepen.io/Jenn/full/eFcux
  89. 89. / CSS Generated Messagesl article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222; position: relative; -webkit-filter: blur(2px); } article:hover { -webkit-filter: blur(0px); } article:focus { -webkit-filter: blur(0px) invert(1); } article:hover:before { content: Click on/off to invert; position: absolute; right: 5px; top: 5px; background: #000; color: #fff; padding: 5px; font: bold 12px Arial; text-transform: uppercase; }
  90. 90. http://codepen.io/Jenn/full/eFcux
  91. 91. http://codepen.io/Jenn/full/eFcux
  92. 92. http://cog.gd/44c
  93. 93. http://cog.gd/44c
  94. 94. http://cog.gd/44d
  95. 95. http://cog.gd/44d
  96. 96. / Burt vs Tom HTMLl <header class="wrap"> ! <h1>Tom Selleck or Burt Reynolds?!?</h1> ! <p class="adjunct"><strong class="left">Tom Selleck</strong> <strong class="right">Burt Reynolds</strong></p> </header> <div role="main" class="wrap"> ! <div class="tom"><span><img src="i/1.jpeg" alt="1" width="" height="" /></span> <strong>Its Tom!!</strong></div> ! <div class="burt"><span><img src="i/3.jpeg" alt="1" width="" height="" /></span> <strong>Burt here!!</strong></div> ! <div class="tom"><span><img src="i/4.jpeg" alt="1" width="" height="" /></span> <strong>Tom strikes again!!</strong></div> ! <div class="burt"><span><img src="i/5.jpeg" alt="1" width="" height="" /></span> <strong>Burt is the word!!</strong></div> </div>
  97. 97. / Burt vs Tom CSSl div { width: 100%; position: relative; min-height: 95px; margin: 0 0 5px; } span { position: absolute; display: block; padding: 10px 0 5px; width: 100px; text- align: center; -webkit-transition: all 0.35s ease-in-out 0.5s; } .tom span { left: 330px; } .burt span { right: 330px; } .tom:hover span { left: 0; } .burt:hover span { right: 0; } img { display: inline-block; } div strong { display: block; padding: 15px 0 0 110px; opacity: 0; -webkit-transition: opacity 0.35s ease-in-out 0.6s; } div.burt strong { padding: 15px 110px 0 0; text-align: right; } div:hover > strong { opacity: 1; }
  98. 98. This cat totally loves hovers.

×