Created
December 27, 2011 16:16
-
-
Save vshan/1524216 to your computer and use it in GitHub Desktop.
\
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ul {position: relative; width: 300px; height: 140px; margin: 0 auto; } | |
ul:hover {position: relative; width: 340px; height: 140px; margin: 0 auto; } | |
ul li { | |
width: 7px; | |
height: 75px; | |
background: black; | |
margin: 0; | |
display: inline-block; | |
border-radius:50px; | |
transition: all 0.5s ease-in-out; | |
border: 4px solid white; | |
transition: all 0.2s ease-in-out; | |
} | |
ul:hover li { | |
transition: all 0.2s ease-in-out; | |
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.4); | |
box-shadow: none !important; | |
width: 75px; | |
height: 75px; | |
background: black !important; | |
} | |
li:nth-child(11n+1) { | |
position: absolute; top: 40px; left:100px;} | |
li:nth-child(11n+2) { | |
position: absolute; left: 150px; top: 50px; } | |
li:nth-child(11n+3) { | |
position: absolute; top: 40px; left: 200px; } | |
li:nth-child(11n+4) { | |
position: absolute;} | |
li:nth-child(11n+5) { | |
position: absolute; z-index: -1; top: -20px; left: 80px; z-index: 5;} | |
li:nth-child(11n+6) { | |
position: absolute; left: 130px;} | |
li:nth-child(11n+7) { | |
position: absolute; top: -30px; left: 175px;} | |
li:nth-child(11n+8) { | |
position: absolute; left: 235px;} | |
li:nth-child(11n+9) { | |
position: absolute; | |
top: -50px; left: 250px;} | |
li:nth-child(11n+10) { | |
position: absolute; top: 40px; left: 270px;} | |
li:nth-child(11n+11) { | |
position: absolute; left: 300px; | |
} | |
ul:hover li:nth-child(11n+1) { | |
position: absolute; top: 40px; left:80px; border: 4px solid white;} | |
ul:hover li:nth-child(11n+2) { | |
position: absolute; left: 140px; top: 50px; } | |
ul:hover li:nth-child(11n+3) { | |
position: absolute; top: 40px; left: 200px;} | |
ul:hover li:nth-child(11n+4) { | |
position: absolute;} | |
ul:hover li:nth-child(11n+5) { | |
position: absolute; z-index: -1; top: -20px; left: 80px; z-index: 5;} | |
ul:hover li:nth-child(11n+6) { | |
position: absolute; left: 130px;} | |
ul:hover li:nth-child(11n+7) { | |
position: absolute; top: -30px; left: 170px;} | |
ul:hover li:nth-child(11n+8) { | |
position: absolute; left: 230px;} | |
ul:hover li:nth-child(11n+9) { | |
position: absolute; | |
top: -50px; left: 250px;} | |
ul:hover li:nth-child(11n+10) { | |
position: absolute; top: 40px; left: 270px;} | |
ul:hover li:nth-child(11n+11) { | |
position: absolute; left: 300px; | |
} | |
/************************************\ | |
\*************************************/ | |
ul:hover li:nth-child(11n+1) { background: #cedce7; /* Old browsers */background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #cedce7 0%,#596a72 100%); /* IE10+ */background: linear-gradient(top, #cedce7 0%,#596a72 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */} | |
ul:hover li:nth-child(11n+2) { background: background: #fbff0b; /* Old browsers */ | |
background: -moz-linear-gradient(top, #fbff0b 0%, #d2d814 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbff0b), color-stop(100%,#d2d814)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #fbff0b 0%,#d2d814 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #fbff0b 0%,#d2d814 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, #fbff0b 0%,#d2d814 100%); /* IE10+ */ | |
background: linear-gradient(top, #fbff0b 0%,#d2d814 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbff0b', endColorstr='#d2d814',GradientType=0 ); /* IE6-9 */ | |
box-shadow: inset 0px 0px 10px yellow;} | |
ul:hover li:nth-child(11n+3) { background: background: #ed9eb8; /* Old browsers */ | |
background: -moz-linear-gradient(top, #ed9eb8 0%, #bc0d1e 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed9eb8), color-stop(100%,#bc0d1e)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #ed9eb8 0%,#bc0d1e 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #ed9eb8 0%,#bc0d1e 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, #ed9eb8 0%,#bc0d1e 100%); /* IE10+ */ | |
background: linear-gradient(top, #ed9eb8 0%,#bc0d1e 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed9eb8', endColorstr='#bc0d1e',GradientType=0 ); /* IE6-9 */ | |
box-shadow: inset 0px 0px 10px #DB0F1C;} | |
ul:hover li:nth-child(11n+4) { background: background: #f21010; /* Old browsers */background: -moz-linear-gradient(top, #f21010 0%, #960a0a 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f21010), color-stop(100%,#960a0a)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #f21010 0%,#960a0a 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #f21010 0%,#960a0a 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #f21010 0%,#960a0a 100%); /* IE10+ */background: linear-gradient(top, #f21010 0%,#960a0a 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f21010', endColorstr='#960a0a',GradientType=0 ); /* IE6-9 */ | |
box-shadow: inset 0px 0px 10px red;} | |
ul:hover li:nth-child(11n+5) {background: #fefcea; /* Old browsers */ | |
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */ | |
background: linear-gradient(top, #fefcea 0%,#f1da36 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */ | |
} | |
ul:hover li:nth-child(11n+6) { background: #cb60b3; /* Old browsers */background: -moz-linear-gradient(top, #cb60b3 0%, #db36a4 29%, #c146a1 50%, #a80077 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(29%,#db36a4), color-stop(50%,#c146a1), color-stop(100%,#a80077)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #cb60b3 0%,#db36a4 29%,#c146a1 50%,#a80077 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #cb60b3 0%,#db36a4 29%,#c146a1 50%,#a80077 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #cb60b3 0%,#db36a4 29%,#c146a1 50%,#a80077 100%); /* IE10+ */background: linear-gradient(top, #cb60b3 0%,#db36a4 29%,#c146a1 50%,#a80077 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#a80077',GradientType=0 ); /* IE6-9 */ | |
box-shadow: inset 0px 0px 10px purple;} | |
ul:hover li:nth-child(11n+7) { background: #17f20c; /* Old browsers */ | |
background: -moz-linear-gradient(top, #17f20c 0%, #49aa11 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#17f20c), color-stop(100%,#49aa11)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #17f20c 0%,#49aa11 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #17f20c 0%,#49aa11 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, #17f20c 0%,#49aa11 100%); /* IE10+ */ | |
background: linear-gradient(top, #17f20c 0%,#49aa11 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17f20c', endColorstr='#49aa11',GradientType=0 ); /* IE6-9 */ | |
box-shadow: inset 0px 0px 10px green;} | |
ul:hover li:nth-child(11n+8) { background: #c98028; /* Old browsers */background: -moz-linear-gradient(top, #c98028 0%, #664d09 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c98028), color-stop(100%,#664d09)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #c98028 0%,#664d09 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #c98028 0%,#664d09 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #c98028 0%,#664d09 100%); /* IE10+ */background: linear-gradient(top, #c98028 0%,#664d09 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c98028', endColorstr='#664d09',GradientType=0 ); /* IE6-9 */ | |
box-shadow: inset 0px 0px 10px brown;} | |
ul:hover li:nth-child(11n+9) { background: #fbff0b; /* Old browsers */ | |
background: -moz-linear-gradient(top, #fbff0b 0%, #d2d814 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbff0b), color-stop(100%,#d2d814)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #fbff0b 0%,#d2d814 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #fbff0b 0%,#d2d814 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, #fbff0b 0%,#d2d814 100%); /* IE10+ */ | |
background: linear-gradient(top, #fbff0b 0%,#d2d814 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbff0b', endColorstr='#d2d814',GradientType=0 ); /* IE6-9 */ | |
box-shadow: inset 0px 0px 10px yellow;} | |
ul:hover li:nth-child(11n+10) {background: #ffb76b; /* Old browsers */background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 49%, #ff7f04 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(49%,#ffa73d), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 49%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 49%,#ff7f04 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 49%,#ff7f04 100%); /* IE10+ */background: linear-gradient(top, #ffb76b 0%,#ffa73d 49%,#ff7f04 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */ | |
box-shadow: inset 0px 0px 10px orange; | |
} | |
ul:hover li:nth-child(11n+11) { background: #e4f5fc; /* Old browsers */ | |
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 31%, #2ab0ed 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(31%,#bfe8f9), color-stop(100%,#2ab0ed)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 31%,#2ab0ed 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 31%,#2ab0ed 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 31%,#2ab0ed 100%); /* IE10+ */ | |
background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 31%,#2ab0ed 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */ | |
box-shadow: inset 0px 0px 10px skyblue;} | |
body #blog { | |
width: 450px; | |
float: right; | |
} | |
body > #blog { | |
; | |
} | |
h1, h2, h3 { | |
font-family: 'Mate SC', serif; | |
font-size: 2em; | |
text-align: center; | |
} | |
h1 + p { | |
text-align: center; | |
font-family: 'Mate Sc', serif; | |
font-size: 14px; | |
} | |
h1 { | |
text-shadow: | |
white 0 1px, | |
rgba(23, 234, 242, 1) | |
0 0 0.2em; | |
} | |
h2 { | |
font-size: 1.5em; | |
text-shadow: | |
white 0 1px, | |
rgba(238, 242, 24, 1) | |
0 0 0.2em; | |
} | |
h3 { | |
font-size: 1.2em; | |
text-shadow: | |
white 0 1px, | |
rgba(24, 247, 50, 1) | |
0 0 0.2em; | |
} | |
p { | |
font-family: | |
'Josefin slab' | |
, serif; | |
line-height: 1.5; | |
font-size: 1em; | |
text-align: justify; | |
color: black; | |
text-shadow: | |
0px 2px rgba(220,220,220,0.75) | |
} | |
img { | |
border-radius: 5px; | |
width: 100%; | |
box-shadow: | |
rgba(39, 197, 236, 0.5) | |
0 0 0.2em; | |
} | |
#logo p { | |
line-height: 1.2; | |
text-align: center; | |
margin: 0 auto; | |
text-align: center; | |
font-family: 'Mate Sc'; | |
font-size: 40px; | |
color: white; | |
transition: all 0.2s ease-in-out; | |
text-shadow: 1px 0px black, 0px 1px black, | |
2px 1px black, 1px 2px black, | |
3px 2px black, 2px 3px black; | |
} | |
div#logo { | |
width: 150px; | |
height: 106px; | |
padding: 22px 0px; | |
margin: 0 auto; | |
margin-top: 25px; | |
border: 3px solid | |
rgba(23, 234, 242, 1) | |
; | |
border-radius: 160px; | |
transition: all 0.2s ease-in-out; | |
; | |
} | |
div#logo:hover { | |
transition: all 0.2s ease-in-out; | |
border: 3px solid black; | |
} | |
div#logo:hover p { | |
text-shadow: 1px 0px | |
rgba(23, 234, 242, 1) | |
, 0px 1px | |
rgba(23, 234, 242, 1) | |
, | |
2px 1px | |
rgba(23, 234, 242, 1) | |
, 1px 2px | |
rgba(23, 234, 242, 1) | |
, | |
3px 2px | |
rgba(23, 234, 242, 1) | |
, 2px 3px | |
rgba(23, 234, 242, 1) | |
, | |
4px 3px | |
rgba(23, 234, 242, 1) | |
, 3px 4px | |
rgba(23, 234, 242, 1) | |
, | |
5px 4px | |
rgba(23, 234, 242, 1) | |
,4px 5px | |
rgba(23, 234, 242, 1) | |
, | |
6px 5px | |
rgba(23, 234, 242, 1) | |
, 5px 6px | |
rgba(23, 234, 242, 1) | |
, | |
7px 6px | |
rgba(23, 234, 242, 1) | |
, 6px 7px | |
rgba(23, 234, 242, 1) | |
, | |
8px 7px | |
rgba(23, 234, 242, 1) | |
,7px 8px | |
rgba(23, 234, 242, 1) | |
, | |
8px 8px | |
rgba(23, 234, 242, 1) | |
; } | |
#logo p + p {font-family: 'Josefin Slab';} | |
#logo {float: left;} | |
body {width: 650px; margin: 0 auto; margin-top: 50px;} | |
rgba(23, 234, 242, 1) | |
0 0 0.2em |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- content to be placed inside <body>…</body> --> | |
<head> | |
<link href='http://fonts.googleapis.com/css?family=Trykker' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Mate+SC' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Buenard' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Podkova' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Stoke' rel='stylesheet' type='text/css'> | |
</head> | |
<!-- content to be placed inside <body>…</body> --> | |
<!-- <ul> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
</ul> --> | |
<body> | |
<div id="logo"> <p> Life </p> <p> Psyche </p> </div> | |
<div id="blog"> | |
<h1> Why I Believe That We Are The Future </h1> | |
<p> By <a href="/">Vinay Bhat</a> on <a href="/">21 Dec 2011</a> in <a href="/">School Life </a> </p> | |
<img src="http://lorempixel.com/g/450/200" alt="Nothing" /> | |
<p> | |
Today was an exception day. I loved it. The prospect of loving someone should come from within. There is no pain you are receding, a distant ship smoke on the horizon. Oh I've got that all in my head. Baby I love you, I really do. | |
</p> | |
<h2> The Damning Effect of Life </h2> | |
<h3> "Baby, I think we are dead." </h3> | |
<p> | |
I love powder applicake I love. Sweet roll tootsie roll I love macaroon pastry chocolate I love chupa chups caramels. Jelly fruitcake liquorice gummies I love chocolate sweet. Dessert liquorice carrot cake macaroon I love caramels gingerbread I love sesame snaps. Sweet sweet I love I love biscuit gummi bears. Jelly gingerbread carrot cake cupcake jujubes candy brownie dragée. I love jelly-o jelly faworki chocolate cake soufflé jelly caramels. Jujubes pie apple pie caramels I love. I love croissant sesame snaps chocolate powder marshmallow sweet roll. Bonbon I love biscuit. Lemon drops lemon drops apple pie apple pie marzipan sugar plum cheesecake faworki gingerbread. Candy biscuit chocolate cake. | |
</p> | |
<h3> "I guess, you were right, after all." </h3> | |
<p> | |
Sesame snaps tootsie roll donut danish cupcake dessert applicake. Candy applicake sweet toffee lemon drops. Sweet roll soufflé sesame snaps I love dessert cake tart. Sweet muffin croissant I love gummies marshmallow. Sugar plum tootsie roll carrot cake muffin cupcake cotton candy dessert dragée gummies. I love gummi bears dessert chocolate muffin dessert. Apple pie toffee jujubes lollipop. Gingerbread jujubes wafer I love ice cream cookie. Apple pie sesame snaps muffin donut chupa chups I love gingerbread cotton candy. Applicake liquorice jelly. Candy cookie gingerbread icing cookie. Wafer powder tiramisu ice cream pudding marshmallow sweet roll. | |
</p> | |
<h2> How To Live With It </h2> | |
<p> | |
Sesame snaps tootsie roll donut danish cupcake dessert applicake. Candy applicake sweet toffee lemon drops. Sweet roll soufflé sesame snaps I love dessert cake tart. Sweet muffin croissant I love gummies marshmallow. Sugar plum tootsie roll carrot cake muffin cupcake cotton candy dessert dragée gummies. I love gummi bears dessert chocolate muffin dessert. Apple pie toffee jujubes lollipop. Gingerbread jujubes wafer I love ice cream cookie. Apple pie sesame snaps muffin donut chupa chups I love gingerbread cotton candy. Applicake liquorice jelly. Candy cookie gingerbread icing cookie. Wafer powder tiramisu ice cream pudding marshmallow sweet roll. | |
</p> | |
</div> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment