Your SlideShare is downloading. ×

Making Links Magical Again with CSS

2,442

Published on

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

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,442
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Making Links Magical Again with CSS Re:build 2012 @jennlukas
  • 2. http://owltastic.com/
  • 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. http://2012.dconstruct.org/
  • 5. http://2012.dconstruct.org/
  • 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. Don’t stallone It
  • 8. O Music Awards 2
  • 9. http://cog.gd/43y
  • 10. http://jsfiddle.net/Jenn/WG3NE/
  • 11. http://jsfiddle.net/Jenn/WG3NE/
  • 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. / 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. http://omusicawards.com/vote
  • 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. / 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. http://omusicawards.com/vote
  • 18. http://galleryofmo.co.uk/
  • 19. http://galleryofmo.co.uk/
  • 20. http://galleryofmo.co.uk/
  • 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. http://itsnumbered.com/
  • 23. http://itsnumbered.com/
  • 24. http://itsnumbered.com/
  • 25. http://itsnumbered.com/
  • 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. http://codepen.io/Jenn/pen/ztHvx
  • 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. http://codepen.io/Jenn/pen/ztHvx
  • 30. http://codepen.io/Jenn/pen/ztHvx
  • 31. http://coworkchicago.com/
  • 32. http://coworkchicago.com/
  • 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. http://coworkchicago.com/
  • 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. http://www.rdio.com/
  • 37. http://www.rdio.com/
  • 38. http://www.rdio.com/
  • 39. http://www.rdio.com/
  • 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. http://funnelbox.com
  • 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. http://www.emporiumpies.com/pies
  • 44. http://www.emporiumpies.com/pies
  • 45. css-tricks.com/almanac/properties/b/backface-visibility/
  • 46. Experiments!!
  • 47. http://mammothbooth.com/#/faq.html
  • 48. http://mammothbooth.com/#/faq.html
  • 49. http://codepen.io/Jenn/pen/qsklF
  • 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. / 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. http://codepen.io/Jenn/pen/qsklF
  • 53. / Sliding Box HOvers(CSS)l div:hover { p {! ! opacity: 1; } img { bottom: -100px; } h2 { top: -100px; } }
  • 54. http://circlesconference.com/
  • 55. http://circlesconference.com/
  • 56. http://codepen.io/Jenn/full/grjcd
  • 57. http://codepen.io/Jenn/pen/grjcd
  • 58. http://codepen.io/Jenn/pen/grjcd
  • 59. http://codepen.io/Jenn/pen/grjcd
  • 60. http://codepen.io/Jenn/pen/grjcd
  • 61. / CSS Filters (grayscale)l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter: grayscale(100%); }
  • 62. http://codepen.io/Jenn/pen/grjcd
  • 63. / CSS Filters (sepia)l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter: grayscale(100%) sepia(90%); }
  • 64. http://codepen.io/Jenn/pen/grjcd
  • 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. http://codepen.io/Jenn/pen/grjcd
  • 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. http://codepen.io/Jenn/pen/grjcd
  • 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. http://codepen.io/Jenn/full/grjcd
  • 71. http://www.readability.com/
  • 72. http://cog.gd/4hk
  • 73. http://thenerdary.net/
  • 74. http://codepen.io/Jenn/full/gCKex
  • 75. http://codepen.io/Jenn/full/gCKex
  • 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. http://codepen.io/Jenn/full/HKoAl
  • 78. http://codepen.io/Jenn/full/HKoAl
  • 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. http://codepen.io/Jenn/full/eFcux
  • 81. http://codepen.io/Jenn/full/eFcux
  • 82. / CSS Filters: Blurl article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222; position: relative; -webkit-filter: blur(2px); }
  • 83. http://codepen.io/Jenn/full/eFcux
  • 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. http://codepen.io/Jenn/full/eFcux
  • 86. http://codepen.io/Jenn/full/eFcux
  • 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. http://codepen.io/Jenn/full/eFcux
  • 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. http://codepen.io/Jenn/full/eFcux
  • 91. http://codepen.io/Jenn/full/eFcux
  • 92. http://cog.gd/44c
  • 93. http://cog.gd/44c
  • 94. http://cog.gd/44d
  • 95. http://cog.gd/44d
  • 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. / 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. This cat totally loves hovers.

×