Skip to content

Instantly share code, notes, and snippets.

@johannaruiz
Created April 15, 2013 08:17
Show Gist options
  • Save johannaruiz/5386640 to your computer and use it in GitHub Desktop.
Save johannaruiz/5386640 to your computer and use it in GitHub Desktop.
A CodePen by Johanna Ruiz. Background-Clips in Space. (Webkit only) - I had an idea about draggable elements with static background images and utilizing the background-clip:text css3 property, I wanted to see if the background image would remain static and the element would drag. A little jQuery UI and voila, it did what I thought it would. Unfo…
<h1>Space</h1>
$(function() {
$( "h1" ).draggable();
});
html {
overflow-y: scroll;
overflow-x:hidden;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
background:black;
background-image:url(http://johannabruiz.com/images/codepen-images/space-test-2.jpg);
background-repeat:no-repeat;
background-position:0, 0;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body:before{
width:100%;
height:100%;
content:" ";
position:absolute;
z-index:1;
background-color:rgba(0, 0, 0, 0.8);
}
h1{
font-family:"Helvetica";
font-weight:500;
font-size:20em;
color:black;
margin:0 auto;
background-image:url(http://johannabruiz.com/images/codepen-images/space-test.jpg);
background-size:100%;
color:transparent;
background-repeat:no-repeat;
background-position:0 0;
background-attachment:fixed;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.5));
z-index:2;
cursor:pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment