Making Links Magical Again with CSS

Making Links Magical Again with CSS

Re:build 2012
@jennlukas

/ 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;
}

/ 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; }

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; }

/ 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; }

/ Navigation and badge hovers
l 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; }

/ Product HTML
l #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 css
l 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; }

/ 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; }

/ Hover rotation
l .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)
}

/ layering opacity effects
l .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; }

/ Div mask & width transitions
l .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

css-tricks.com/almanac/properties/b/backface-visibility/

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; }

/ Sliding Box HOvers(CSS)
l div:hover {
p {!
! opacity: 1;
}
img {
bottom: -100px;
}
h2 {
top: -100px;
}
}

http://codepen.io/Jenn/full/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%); }

/ CSS Filters (sepia)
grayscale(100%) sepia(90%); }

/ CSS Filters (hue-rotate)
grayscale(100%) sepia(90%) hue-rotate(90deg); }

/ CSS Filters (contrast)
grayscale(100%) sepia(90%) hue-rotate(90deg) contrast(110%); }

/ CSS Filters: Hover
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/gCKex

/ CSS Filters: Invert
l 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

/ 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

/ CSS Filters: Blur
l article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222;
position: relative; -webkit-filter: blur(2px); }

/ CSS Filters: Blur

article:hover { -webkit-filter: blur(0px); }

/ CSS Filters: Blur, Invert

article:focus { -webkit-filter: blur(0px) invert(1); }

/ CSS Generated Messages

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; }

/ Burt vs Tom HTML
l <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>It's 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 CSS
l 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.

Making Links Magical Again with CSS

Related slideshows

More Related Content

Making Links Magical Again with CSS