Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making Links Magical Again with CSS

3,098 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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.

×