Skip to content

Instantly share code, notes, and snippets.

@qmmr

qmmr/index.html

Created November 13, 2012 20:04
Show Gist options
  • Save qmmr/4068041 to your computer and use it in GitHub Desktop.
Save qmmr/4068041 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Marcin Kumorek.
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>Fun with border radius</title>
</head>
<body>
<div class="container"></div>
</body>
</html>
Raw
style.sass
@import "compass"
body
background-color: #fff
.container
-webkit-transition: all 1s ease-in-out
-moz-transition: all 1s ease-in-out
-ms-transition: all 1s ease-in-out
-o-transition: all 1s ease-in-out
transition: all 1s ease-in-out
width: 450px
height: 70px
border-radius: 0 10px 10px 0
position: relative
margin: 20px auto
background: #d2ff52
background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%)
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842))
background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%)
background: -o-linear-gradient(top, #d2ff52 0%,#91e842 100%)
background: -ms-linear-gradient(top, #d2ff52 0%,#91e842 100%)
background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 )
.container:before
content: ''
position: absolute
top: -5px
left: -100px
background: url('http://beyonce.pl/wp-content/uploads/2012/06/Rihanna-300x3002-150x150.jpg') no-repeat scroll 50% 50% transparent
//margin: 10px auto
//border: 1px solid red
border-radius: 50%
-webkit-box-shadow: inset 0px 0px 4px 2px #fff, 2px 2px 5px 0px #444
box-shadow: inset 0px 0px 4px 2px #fff, 2px 2px 5px 0px #444
//text-align: center
width: 150px
height: 150px
//opacity: .7
.container:before:hover
opacity: 1
.container:after
content: ''
position: absolute
top: -5px
right: -50px
background: url('http://beyonce.pl/wp-content/uploads/2012/07/lady-gaga-150x150.jpg') no-repeat 50% 50% transparent
border-radius: 50%
-webkit-box-shadow: inset 0px 0px 4px 2px #fff, 2px 2px 5px 0px #444
box-shadow: inset 0px 0px 4px 2px #fff, 2px 2px 5px 0px #444
width: 150px
height: 150px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment