• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Making Links Magical Again with CSS
 

Making Links Magical Again with CSS

on

  • 1,414 views

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

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

Statistics

Views

Total Views
1,414
Views on SlideShare
1,392
Embed Views
22

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 22

http://lanyrd.com 21
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Making Links Magical Again with CSS Making Links Magical Again with CSS Presentation Transcript

    • 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 0.2s linear; ! -moz-transition: all 0.2s linear; ! -o-transition: all 0.2s linear; ! transition: all 0.2s linear; } a:hover { ! color: #96c0c2; }
    • 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); 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; }
    • 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 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>
    • / 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; }
    • http://omusicawards.com/vote
    • / 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>
    • / 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; }
    • 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; -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; }
    • 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; ! height: 5px; ! background: #fff; ! border-top: 20px #F0F1EC solid; ! left: 0; } #featured-products_block_center li:hover div.under { ! background: #d34132; }
    • http://codepen.io/Jenn/pen/ztHvx
    • / 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; }
    • 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-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; }
    • http://coworkchicago.com/
    • / 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) }
    • 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 .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; }
    • http://funnelbox.com
    • / 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); }
    • 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" /> <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>
    • / 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; }
    • http://codepen.io/Jenn/pen/qsklF
    • / Sliding Box HOvers(CSS)l div:hover { p {! ! opacity: 1; } img { bottom: -100px; } h2 { top: -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(100%); }
    • http://codepen.io/Jenn/pen/grjcd
    • / CSS Filters (sepia)l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter: grayscale(100%) sepia(90%); }
    • http://codepen.io/Jenn/pen/grjcd
    • / CSS Filters (hue-rotate)l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter: grayscale(100%) sepia(90%) hue-rotate(90deg); }
    • http://codepen.io/Jenn/pen/grjcd
    • / 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%); }
    • http://codepen.io/Jenn/pen/grjcd
    • / 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; } }
    • 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; 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; }
    • 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: #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); }
    • 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; position: relative; -webkit-filter: blur(2px); }
    • http://codepen.io/Jenn/full/eFcux
    • / 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); }
    • 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; position: relative; -webkit-filter: blur(2px); } article:hover { -webkit-filter: blur(0px); } article:focus { -webkit-filter: blur(0px) invert(1); }
    • http://codepen.io/Jenn/full/eFcux
    • / 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; }
    • 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"><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>
    • / 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; }
    • This cat totally loves hovers.