CSS3绘制各种图形图标样式特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3绘制各种图形图标样式特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS3绘制各种图形图标样式特效</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body class="cf">

<!-- 4 July 2016-->
<div id="zipper" class="entry">
  <div></div>
</div>
<div id="jeans-pocket" class="entry">
  <div></div>
</div>
<!-- 29 June 2016-->
<div id="embroidery" class="entry wide">
  <div></div>
</div>
<!-- 27 June 2016-->
<div id="inner-tube" class="entry">
  <div></div>
</div>
<div id="popsicle" class="entry">
  <div></div>
</div>
<!-- 18 June 2016-->
<div id="cactus1" class="entry threes cactus">
  <div></div>
</div>
<div id="cactus2" class="entry threes cactus">
  <div></div>
</div>
<div id="cactus3" class="entry threes cactus">
  <div></div>
</div>
<!-- 16 June 2016-->
<div id="graham-cracker" class="entry threes">
  <div></div>
</div>
<div id="marshmallow2" class="entry threes">
  <div></div>
</div>
<div id="chocolate" class="entry threes">
  <div></div>
</div>
<!-- 9 June 2016-->
<div id="vinyl-record" class="entry threes">
  <div></div>
</div>
<div id="cassette" class="entry threes">
  <div></div>
</div>
<div id="cd" class="entry threes">
  <div></div>
</div>
<!-- 28 April 2016-->
<div id="pizza-works" class="entry">
  <div></div>
</div>
<div id="pizza-marg" class="entry">
  <div></div>
</div>
<!-- 15 December 2015-->
<div id="bb8" class="entry wide tall">
  <div class="no-scale"></div>
</div>
<!-- 16 December 2015-->
<div id="lightsaber-luke" class="entry">
  <div></div>
</div>
<!-- 16 December 2015-->
<div id="lightsaber-darth" class="entry">
  <div></div>
</div>
<!-- 23 April 2015-->
<div id="moonrise-kingdom" class="entry">
  <div></div>
</div>
<!-- 23 April 2015-->
<div id="royal-tenenbaums" class="entry">
  <div></div>
</div>
<!-- 23 April 2015-->
<div id="grand-budapest" class="entry wide">
  <div></div>
</div>
<!-- 31 March 2015-->
<div id="luggage-tag1" class="entry">
  <div></div>
</div>
<!-- 31 March 2015-->
<div id="luggage-tag2" class="entry">
  <div></div>
</div>
<!-- 4 February 2015-->
<div id="button" class="entry">
  <div></div>
</div>
<!-- 3 February 2015-->
<div id="shirt-tag" class="entry">
  <div></div>
</div>
<!-- 11 November 2014-->
<div id="corn-dog" class="entry">
  <div></div>
</div>
<!-- 11 November 2014-->
<div id="candy-apple" class="entry">
  <div></div>
</div>
<!-- 20 October 2014-->
<div id="vacancy" class="entry wide">
  <div></div>
</div>
<!-- 20 October 2014-->
<div id="cupcake" class="entry wide">
  <div></div>
</div>
<!-- 14 August 2014-->
<div id="mario-mushroom" class="entry">
  <div></div>
</div>
<!-- 14 August 2014-->
<div id="mario-tube" class="entry">
  <div></div>
</div>
<!-- 5 August 2014-->
<div id="macarons" class="entry">
  <div class="no-scale"></div>
</div>
<!-- 14 July 2014-->
<div id="moleskine" class="entry">
  <div></div>
</div>
<!-- 26 June 2014-->
<div id="crayon" class="entry">
  <div></div>
</div>
<!-- 25 June 2014-->
<div id="marker" class="entry">
  <div></div>
</div>
<!-- 21 June 2014-->
<div id="tardis" class="entry">
  <div></div>
</div>
<!-- 20 June 2014-->
<div id="hobbit-door" class="entry">
  <div></div>
</div>
<!-- 16 June 2014-->
<div id="mickey-hat" class="entry wide">
  <div></div>
</div>
<!-- 12 June 2014-->
<div id="key" class="entry wide">
  <div></div>
</div>
<!-- 11 June 2014-->
<div id="soccer" class="entry">
  <div></div>
</div>
<!-- 11 June 2014-->
<div id="brazil" class="entry">
  <div></div>
</div>
<!-- 10 June 2014-->
<div id="sushi" class="entry">
  <div></div>
</div>
<!-- 9 June 2014-->
<div id="marshmallow" class="entry">
  <div></div>
</div>
<!-- 7 June 2014-->
<div id="battery" class="entry wide">
  <div></div>
</div>
<!-- 30 May 2014-->
<div id="breakfast" class="entry">
  <div></div>
</div>
<!-- 24 May 2014-->
<div id="cpt-america" class="entry">
  <div></div>
</div>
<!-- 23 May 2014-->
<div id="bloody-mary" class="entry">
  <div></div>
</div>
<!-- 22 May 2014-->
<div id="camera" class="entry">
  <div></div>
</div>
</body>
</html>

CSS代码(main.css):

header{padding:10px 80px 7px 15px;position:relative;background:#333;color:white;font-family:Georgia,Times,serif;font-size:15px;font-style:italic;}
header h1,header p{display:inline-block;}
header h1{margin-bottom:5px;}
header p{line-height:1.4;color:#bed4dc;}
header p a{color:#67b1cd;text-decoration:none;border-bottom:1px dotted;}
header .share-link{padding:15px 10px 7px;position:absolute;right:15px;top:-8px;background:#55acee;border-radius:5px;color:white;text-decoration:none;font-style:normal;font-size:12px;font-family:Helvetica,Arial,sans-serif;}
header .share-link:hover{background:#469cd1;}
@media (max-width:500px){header{padding:15px 80px 15px 15px;}
}
.entry{text-align:center;min-height:400px;position:relative;}
.entry.tall{min-height:450px;}
.entry div{position:absolute;left:50%;top:50%;}
.entry div:before,.entry div:after{display:block;content:'';position:absolute;}
@media (max-width:400px){.entry div:not(.no-scale){-webkit-transform:scale(0.8);transform:scale(0.8);}
}
.cf:before,.cf:after{content:" ";display:table;}
.cf:after{clear:both;}
@media all and (min-width:960px){.entry{float:left;width:50%;}
.entry.wide{width:100%;}
.entry.threes{width:33.333%;}
}
#camera{background:#ffa500;}
#camera div{width:300px;height:130px;margin-left:-150px;margin-top:-65px;z-index:1;background:linear-gradient(to right,#111 0%,#444 15%,#444 85%,#111 100%);border-top:15px solid #ccc;border-bottom:12px solid #ccc;border-image:linear-gradient(to right,#444,#ccc,#ccc,#ccc,#ccc,#444) 1% stretch;box-shadow:0 3px 4px -2px rgba(0,0,0,0.6),0 10px 7px -2px rgba(0,0,0,0.4);}
#camera div:before{width:33px;height:18px;margin-left:30px;top:-30px;left:50%;z-index:2;background:#333;box-shadow:0 0 0 2px #eee,-1px -1px 1px 3px #333,-95px 6px 0 0 #ccc,30px 3px 0 12px #ccc,-18px 37px 0 46px #ccc,-96px -6px 0 -6px #555,-96px -9px 0 -6px #ddd,-155px -10px 1px 3px #888,-165px -10px 1px 3px #999,-170px -10px 1px 3px #666,-162px -8px 0 5px #555,85px -4px 1px -3px #ccc,79px -4px 1px -3px #888,82px 1px 0 -4px #555;}
#camera div:after{width:100px;height:100px;margin-left:-20px;top:15px;left:50%;z-index:3;background:linear-gradient(45deg,#ccc 40%,#ddd 100%);border-radius:50%;box-shadow:0 3px 2px #999,1px -2px 0 white,-1px -3px 2px #555,0 0 0 15px #c2c2c2,0 -2px 0 15px white,-2px -5px 1px 17px #666,0 10px 10px 15px rgba(0,0,0,0.3),-90px -51px 1px -43px #aaa,-90px -50px 1px -40px #888,-90px -51px 0 -34px #ccc,-90px -50px 0 -30px #aaa,-90px -48px 1px -28px rgba(0,0,0,0.2),-124px -73px 1px -48px #eee,-125px -72px 0 -46px #666,-85px -73px 1px -48px #eee,-86px -72px 0 -46px #666,42px -82px 1px -48px #eee,41px -81px 0 -46px #777,67px -73px 1px -48px #eee,66px -72px 0 -46px #666,-46px -86px 1px -45px #444,-44px -87px 0 -38px #333,-44px -86px 0 -37px #ccc,-44px -85px 0 -34px #999,14px -89px 1px -48px #eee,12px -84px 1px -48px #999,23px -85px 0 -47px #444,23px -87px 0 -46px #888;}
#bloody-mary{background:#b0e0e6;}
#bloody-mary div{width:180px;height:100px;margin-left:-90px;margin-top:10px;z-index:2;background:linear-gradient(to right,#eee 0%,#db493e 3%,#b8423a 5%,#53646e 7%,#b8423a 9%,#53646e 11%,#53646e 14%,#bfc9ca 33%,#eee 41%,#eee 75%,#95a4a3 85%,#556168 90%,#7c8285 98%,white 100%);border-bottom-left-radius:80px 10px;border-bottom-right-radius:80px 10px;border-bottom:2px solid #ddd;box-shadow:0 3px 4px -3px rgba(0,0,0,0.4),0 8px 7px -3px rgba(0,0,0,0.2);}
#bloody-mary div:before{width:40px;height:95px;margin-left:40px;top:-140px;left:50%;z-index:1;background:#d7e17f;background:linear-gradient(to right,#cdeca8 10%,#a2d269 18%,#a2d269 25%,#bde192 45%,#bde192 55%,#95c260 75%,#95c260 82%,#bde192 90%);border-top-left-radius:20px 3px;border-top-right-radius:20px 3px;border-top:5px solid #95c260;box-shadow:-65px 111px 0 14px #eee;-webkit-transform:rotate(15deg);transform:rotate(15deg);}
#bloody-mary div:after{width:177px;height:170px;margin-left:-90px;top:-105px;left:50%;z-index:3;background:linear-gradient(to right,rgba(0,0,0,0.1) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,0) 45%,rgba(255,255,255,0.3) 55%,rgba(255,255,255,0.3) 65%,rgba(255,255,255,0) 80%,rgba(0,0,0,0.2) 100%),linear-gradient(to bottom,transparent 30%,#e04435 30%,#ab2e22 100%);border:1px solid #ddd;border-right-width:2px;border-bottom-width:5px;border-top-width:2px;border-top-color:#eee;border-bottom-left-radius:150px 15px;border-bottom-right-radius:150px 15px;border-top-left-radius:120px 15px;border-top-right-radius:120px 15px;}
#cpt-america{background:#899d4e;}
#cpt-america div{width:250px;height:250px;margin-left:-125px;margin-top:-140px;z-index:1;background:linear-gradient(45deg,rgba(255,255,255,0) 35%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 65%),linear-gradient(-45deg,rgba(255,255,255,0) 35%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 65%),linear-gradient(to right,rgba(0,0,0,0) 35%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0) 65%),linear-gradient(to bottom,rgba(0,0,0,0) 35%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0) 65%),radial-gradient(ellipse at center,#0033b0 20%,#ce0021 20%,#ce0021 35%,#bbb 35%,#bbb 55%,#ce0021 55%);border-radius:50%;box-shadow:0 3px 0 #a20917;}
#cpt-america div:before{width:70px;height:70px;margin-left:-35px;margin-top:-35px;top:50%;left:50%;z-index:2;background:rgba(0,80,170,0.5);border-radius:50%;content:'鈽�';font-size:70px;color:#ddd;line-height:65px;text-shadow:-1px 1px 0 #3e92ff,1px -1px 0 #1e436d;}
#cpt-america div:after{width:200px;height:30px;margin-left:-100px;top:215px;left:50%;border-radius:50%;box-shadow:0 50px 20px rgba(0,0,0,0.15);}
#breakfast{background:#008b8b;}
#breakfast div{width:210px;height:210px;margin-left:-105px;margin-top:-110px;border-radius:50%;background:#f7f7f7;box-shadow:inset 0 2px 8px rgba(0,0,0,0.1),0 0 0 20px white,0 6px 0 20px #eee,0 12px 4px 20px rgba(0,0,0,0.2);}
#breakfast div:before{width:140px;height:140px;left:70px;top:0px;border-radius:50%;background:#d6ab75;box-shadow:0 6px 0 #f1cb9a,0 8px 2px rgba(0,0,0,0.2),-132px 40px 0 -61px #f6c83e,-128px 40px 0 -54px #edb815,-128px 42px 2px -54px rgba(0,0,0,0.2),-115px 30px 0 -30px white,-62px 90px 0 -61px #f6c83e,-65px 90px 0 -54px #edb815,-65px 92px 2px -54px rgba(0,0,0,0.2),-80px 90px 0 -32px white,-115px 33px 2px -30px rgba(0,0,0,0.1),-80px 93px 2px -32px rgba(0,0,0,0.1),-8px 110px 0 -45px #8c7842,-8px 113px 2px -45px rgba(0,0,0,0.2),25px 103px 0 -45px #806c35,25px 106px 2px -45px rgba(0,0,0,0.2),-93px -40px 0 -45px #e4a5b6,-93px -39px 0 -42px #c97d91,-93px -37px 2px -42px rgba(0,0,0,0.2);}
#breakfast div:after{width:30px;height:30px;left:120px;top:50px;border-radius:2px;background:#fbf6bc;box-shadow:1px 1px 0 2px #dfd888,2px 2px 3px 2px rgba(0,0,0,0.2);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
#battery{background:black;}
#battery div{width:250px;height:120px;margin-left:-130px;margin-top:-60px;border-radius:10px/30px;border-left:2px solid rgba(255,255,255,0.2);border-right:2px solid rgba(255,255,255,0.2);background-image:linear-gradient(to right,transparent 5%,#316d08 5%,#316d08 7%,#60b939 8%,#60b939 10%,#51aa31 11%,#51aa31 60%,#64ce11 61%,#64ce11 63%,#255405 63%,black 68%,black 95%,transparent 95%),linear-gradient(to bottom,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.4) 4%,rgba(255,255,255,0.2) 7%,rgba(255,255,255,0.2) 14%,rgba(255,255,255,0.8) 14%,rgba(255,255,255,0.2) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 80%,rgba(255,255,255,0.2) 80%,rgba(255,255,255,0.4) 86%,rgba(255,255,255,0.6) 90%,rgba(255,255,255,0.1) 92%,rgba(255,255,255,0.1) 95%,rgba(255,255,255,0.5) 98%);}
#battery div:before{width:12px;height:55px;right:-14px;top:32px;border-top-right-radius:6px 10px;border-bottom-right-radius:6px 10px;background-image:linear-gradient(to bottom,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 14%,rgba(255,255,255,0.8) 14%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 80%,rgba(255,255,255,0.2) 80%,rgba(255,255,255,0.4) 86%,rgba(255,255,255,0.6) 90%,rgba(255,255,255,0.1) 92%,rgba(255,255,255,0.1) 95%,rgba(255,255,255,0.5) 98%);}
#battery div:after{width:220px;height:120px;left:10px;border-radius:5px/30px;border-left:4px solid black;border-right:4px solid black;background-image:linear-gradient(to bottom,rgba(255,255,255,0.3) 4%,rgba(255,255,255,0.2) 5%,transparent 5%,transparent 14%,rgba(255,255,255,0.3) 14%,rgba(255,255,255,0.12) 40%,rgba(0,0,0,0.05) 42%,rgba(0,0,0,0.05) 48%,transparent 60%,transparent 80%,rgba(255,255,255,0.3) 87%,rgba(255,255,255,0.3) 92%,transparent 92%,transparent 97%,rgba(255,255,255,0.4) 97%),linear-gradient(to left,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 2%,black 2%,black 6%,transparent 6%),linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,0.3) 90%,rgba(255,255,255,0) 90%);}
#marshmallow{background:#66cdaa;}
#marshmallow div{width:100px;height:120px;margin-left:-50px;margin-top:-70px;background:white;background-image:radial-gradient(circle at 50% -70px,transparent 50%,#f5f5f5 50%);border-top-left-radius:100px 40px;border-top-right-radius:100px 40px;border-bottom-left-radius:100px 40px;border-bottom-right-radius:100px 40px;border:4px solid #808080;}
#marshmallow div:before{width:8px;height:80px;margin-left:-4px;left:50%;top:125px;background:#d3d3d3;box-shadow:0 0 0 3px #808080,0 -193px 0 #d3d3d3,0 -193px 0 3px #808080;}
#marshmallow div:after{width:10px;height:10px;left:20px;top:50px;background:#808080;border-radius:50%;box-shadow:50px 0 0 #808080,25px 3px 0 16px #f5f5f5,25px 13px 0 11px #808080;}
#sushi{background:#87ceeb;}
#sushi div{width:250px;height:100px;margin-left:-125px;margin-top:-37px;background:white;border-top-left-radius:80px 50px;border-top-right-radius:80px 50px;border-bottom-left-radius:40px 50px;border-bottom-right-radius:40px 50px;background-image:linear-gradient(to bottom,rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.08) 32%,transparent 32%),linear-gradient(85deg,transparent 39%,rgba(0,0,0,0.05) 39%,rgba(0,0,0,0.05) 45%,transparent 45%);box-shadow:0 25px 0 -20px rgba(0,0,0,0.1);}
#sushi div:before{width:260px;height:25px;margin-left:-130px;left:50%;border-top-left-radius:90px 30px;border-top-right-radius:80px 20px;background:#f19861;background-image:linear-gradient(to bottom,transparent 70%,rgba(0,0,0,0.05) 70%),linear-gradient(to right,transparent 41%,rgba(0,0,0,0.1) 41%,rgba(0,0,0,0.1) 50%,transparent 50%),repeating-linear-gradient(45deg,#f19861,#f19861 20px,#ffcdaf 20px,#ffcdaf 25px);}
#sushi div:after{width:40px;height:103px;margin-left:-20px;left:50%;top:-2px;background:#465b45;background-image:linear-gradient(to right,transparent 60%,rgba(0,0,0,0.1) 60%);}
#brazil{background:#f0e68c;}
#brazil div{width:300px;height:200px;margin-left:-150px;margin-top:-100px;background:#fee63c;background-image:linear-gradient(30deg,#019f6f 30%,transparent 30%),linear-gradient(-30deg,#019f6f 30%,transparent 30%),linear-gradient(210deg,#019f6f 30%,transparent 30%),linear-gradient(-210deg,#019f6f 30%,transparent 30%);border-radius:5px;box-shadow:7px 7px 0 rgba(0,0,0,0.1);}
#brazil div:before{width:90px;height:90px;margin-left:-45px;margin-top:-45px;left:50%;top:50%;background:#2765ae;background-image:radial-gradient(circle at 0 175px,transparent 71%,white 72%,white 78%,transparent 79%);border-radius:50%;}
#brazil div:after{width:4px;height:4px;top:80px;left:160px;background:white;border-radius:50%;box-shadow:-45px 15px 0 0 white,-40px 30px 0 0 white,-27px 43px 0 0 white,-10px 36px 0 0 white,13px 38px 0 0 white,-47px 32px 0 -1px white,-35px 25px 0 -1px white,-25px 20px 0 -1px white,-33px 34px 0 -1px white,-35px 40px 0 -1px white,-5px 22px 0 -1px white,-15px 26px 0 -1px white,-17px 32px 0 -1px white,-10px 29px 0 -1px white,-12px 53px 0 -1px white,0px 42px 0 -1px white,5px 48px 0 -1px white,6px 43px 0 -1px white,8px 40px 0 -1px white,12px 45px 0 -1px white,17px 35px 0 -1px white,23px 37px 0 -1px white;}
#soccer{background:#afeeee;}
#soccer div{width:300px;height:70px;margin-left:-150px;border-top:3px solid white;border-bottom:3px solid white;}
#soccer div:before{width:150px;height:100px;margin-left:-80px;left:50%;top:-95px;background:repeating-linear-gradient(45deg,transparent,transparent 10px,white 10px,white 11px),repeating-linear-gradient(-45deg,transparent,transparent 10px,white 10px,white 11px);border-top-right-radius:5px;border-top-left-radius:5px;border:6px solid white;border-bottom:none;}
#soccer div:after{width:20px;height:20px;left:170px;top:20px;border:3px solid white;border-radius:50%;}
#key{background:#f7f7f7;}
#key div{width:80px;height:100px;margin-left:-180px;margin-top:-70px;border:15px solid #fdf1cd;border-radius:50%;box-shadow:-3px -3px 0 3px #fefffa,-4px -4px 1px 3px #c68628,-6px -5px 0 4px #feedac,3px 2px 0 3px #fdf1cd,7px 5px 3px 3px #2e1f07,10px 7px 0 3px #c68628,inset 4px 3px 3px #2e1f07,inset 7px 5px 0 #c68628,inset 9px 7px 2px rgba(0,0,0,0.4),inset 12px 10px 3px rgba(0,0,0,0.2),inset -2px -2px 0 #fefffa,12px 8px 3px 3px rgba(0,0,0,0.4),15px 12px 3px 3px rgba(0,0,0,0.2);}
@media (max-width:500px){#key div{-webkit-transform:scale(0.7);transform:scale(0.7);margin-left:-140px;}
}
#key div:before{width:250px;height:30px;left:85px;top:35px;background-image:linear-gradient(to bottom,#f8d675 3%,#f8d675 7%,#2e1f07 11%,#2e1f07 16%,#fefffa 23%,#fefffa 50%,#2e1f07 57%,#2e1f07 70%,#feedac 84%,#feedac 97%,#c68628 99%);border-top-right-radius:8px;border-bottom-right-radius:8px;border-top-left-radius:15px;border-bottom-left-radius:15px;border-left:1px solid #fefffa;border-right:1px solid #f8d675;box-shadow:-1px 0 0 #c68628,1px 0 0 #2e1f07,2px 0 0 #c68628,5px 4px 2px -1px rgba(0,0,0,0.4),11px 9px 4px rgba(0,0,0,0.2);}
#key div:after{width:40px;height:40px;top:30px;left:112px;background-image:linear-gradient(to bottom,#f8d675 3%,#f8d675 7%,#2e1f07 11%,#2e1f07 16%,#fefffa 23%,#fefffa 45%,#2e1f07 52%,#2e1f07 65%,#feedac 80%,#feedac 97%,#c68628 99%);box-shadow:-1px 0 1px #fefffa,1px 0 0 #f8d675,2px 0 0 #c68628,3px 3px 2px rgba(0,0,0,0.2),170px 37px 0 4px #f8e6b3,169px 37px 0 4px #fefffa,170px 34px 0 4px #2e1f07,171px 39px 2px 4px #2e1f07,172px 40px 0 5px #d69941,174px 43px 3px 4px rgba(0,0,0,0.4),178px 45px 4px 4px rgba(0,0,0,0.2);}
#mickey-hat{background:#ffb6c1;}
#mickey-hat div{width:200px;height:200px;margin-left:-100px;margin-top:-70px;border-radius:0 70% 0 100%;border-bottom:7px solid #333;border-left:7px solid #333;background:#222;background-image:radial-gradient(circle at 170px 220px,rgba(255,255,255,0) 70%,rgba(255,255,255,0.15) 90%),radial-gradient(circle at 50px 80px,transparent 60%,#000 90%);box-shadow:-7px 7px 6px -2px rgba(0,0,0,0.3);-webkit-transform:rotate(315deg);transform:rotate(-45deg);}
@media (max-width:500px){#mickey-hat div{-webkit-transform:scale(0.7) rotate(-45deg);transform:scale(0.7) rotate(-45deg);}
}
#mickey-hat div:before{width:110px;height:110px;top:-102px;left:29px;background:#333;background-image:radial-gradient(circle at 80px 0px,transparent 60%,rgba(255,255,255,0.2) 90%);border-radius:50%;box-shadow:-4px 4px 0 4px #222;}
#mickey-hat div:after{width:110px;height:110px;top:56px;left:192px;background:#333;background-image:radial-gradient(circle at 80px 0px,transparent 60%,rgba(255,255,255,0.2) 90%);border-radius:50%;box-shadow:-4px 4px 0 4px #222,-144px -45px 0 -44px #222,-115px -15px 0 -44px #222,-142px -22px 0 -53px #222,-138px -18px 0 -53px #222,-143px -17px 0 -54px white,-144px -16px 0 -51px #222,-142px -23px 0 -50px white,-137px -18px 0 -50px white,-151px -9px 0 -54px #e95b4f,-150px -10px 0 -52px #222,-142px -18px 0 -40px #d3b579,-141px -19px 0 -36px #222,-141px -19px 0 -28px white,-141px -18px 0 -11px #e95b4f;}
#hobbit-door{background:#d2b48c;}
#hobbit-door div{width:250px;height:250px;margin-left:-125px;margin-top:-140px;z-index:1;background-color:#825034;background-image:linear-gradient(to right,transparent 45%,#bb7a56 45%,#bb7a56 55%,transparent 55%),linear-gradient(76deg,transparent 45%,#ae6a46 45%,#ae6a46 55%,transparent 55%),linear-gradient(-76deg,transparent 45%,#b7714b 45%,#b7714b 55%,transparent 55%),linear-gradient(60deg,transparent 45%,#bb7a56 45%,#bb7a56 55%,transparent 55%),linear-gradient(-60deg,transparent 45%,#c48b6c 45%,#c48b6c 55%,transparent 55%),linear-gradient(42deg,transparent 45%,#ca977b 45%,#ca977b 55%,transparent 55%),linear-gradient(-42deg,transparent 45%,#bb7a56 45%,#bb7a56 55%,transparent 55%),linear-gradient(-24deg,transparent 45%,#ca977b 45%,#ca977b 55%,transparent 55%),linear-gradient(25deg,transparent 45%,#985d3d 45%,#985d3d 55%,transparent 55%),linear-gradient(-9deg,transparent 45%,#c48b6c 45%,#c48b6c 55%,transparent 55%),linear-gradient(7deg,transparent 44%,#bb7a56 44%,#bb7a56 55%,transparent 55%);border-radius:50%;box-shadow:0 5px #985d3d;}
#hobbit-door div:before{width:190px;height:190px;margin-left:-95px;margin-top:-95px;top:50%;left:50%;background:#468e60;background-image:repeating-linear-gradient(to right,transparent,transparent 22px,#26603b 22px,#26603b 24px,#73b38a 24px,#73b38a 25px);border-radius:50%;box-shadow:inset 0 5px 0 #6c422c,inset 0 12px 5px rgba(0,0,0,0.3),inset 0 -4px 3px rgba(0,0,0,0.2);}
#hobbit-door div:after{width:25px;height:25px;margin-left:-12.5px;margin-top:-12.5px;top:50%;left:50%;background:#ffeb8f;border-radius:50%;box-shadow:inset 0 -6px 5px rgba(111,74,24,0.5),0 5px 3px rgba(0,0,0,0.4);}
#tardis{background:#2f4f4f;}
#tardis div{width:170px;height:250px;margin-left:-85px;margin-top:-110px;background:#274d7e;background-image:linear-gradient(to right,#295185 15px,#21416a 15px,#21416a 17px,#264b7a 17px,#264b7a 20px,#21416a 20px,#21416a 22px,#274d7e 22px,#274d7e 32px,transparent 32px,transparent 83px,#1d395d 83px,#1d395d 85px,#21416a 85px,#21416a 87px,#1d395d 87px,#1d395d 89px,transparent 90px),linear-gradient(to left,#295185 15px,#21416a 15px,#21416a 17px,#264b7a 17px,#264b7a 20px,#21416a 20px,#21416a 22px,#274d7e 22px,#274d7e 32px,transparent 32px,transparent 75px,#274d7e 75px,#274d7e 95px,transparent 95px),linear-gradient(to bottom,transparent 85px,#244775 85px,#244775 130px,transparent 130px,transparent 140px,#244775 140px,#244775 185px,transparent 185px,transparent 195px,#244775 195px,#244775 240px,transparent 240px),linear-gradient(to bottom,transparent 52px,#274d7e 52px,#274d7e 54px,transparent 54px),linear-gradient(to right,transparent 44px,#274d7e 44px,#274d7e 46px,transparent 46px,transparent 60px,#274d7e 60px,#274d7e 62px,transparent 62px,transparent 108px,#274d7e 108px,#274d7e 110px,transparent 110px,transparent 124px,#274d7e 124px,#274d7e 126px,transparent 126px),linear-gradient(to bottom,transparent 30px,rgba(255,255,255,0.4) 30px,rgba(255,255,255,0.9) 75px,transparent 75px);border-bottom:8px solid #2b568d;box-shadow:0 12px 0 #21416a,0 18px 8px -3px rgba(0,0,0,0.3);}
#tardis div:before{width:150px;height:18px;margin-left:-75px;margin-top:-8px;left:50%;content:'POLICE BOX';font-family:Verdana,Helvetica,sans-serif;font-size:10px;letter-spacing:5px;line-height:18px;color:rgba(255,255,255,0.8);background:#333;box-shadow:0 0 0 4px #295185,0 4px 4px 4px rgba(0,0,0,0.3),0 -15px 0 #274d7e,0 -27px 0 -6px #295185,0 -32px 0 -6px #295185;}
#tardis div:after{width:15px;height:20px;margin-left:-7.5px;left:50%;top:-62px;background:rgba(255,255,255,0.7);background-image:linear-gradient(to right,transparent 5px,#31619f 5px,#31619f 6px,transparent 6px),linear-gradient(to bottom,transparent 5px,#31619f 5px,#31619f 6px,transparent 6px,transparent 13px,#31619f 13px,#31619f 14px,transparent 14px);border-bottom:3px solid #31619f;border-top:5px solid #31619f;box-shadow:0 -2px 10px -1px rgba(255,255,255,0.5),-39px 155px 0 rgba(255,255,255,0.6),-24px 155px 0 rgba(255,255,255,0.6);}
#marker{background:#dcdcdc;}
#marker div{width:80px;height:80px;margin-left:-80px;margin-top:-110px;background:#f00;background-image:radial-gradient(circle at 25px 23px,white 7%,rgba(255,255,255,0) 40%);box-shadow:inset -5px -5px 10px #f00,inset -18px -23px 15px rgba(0,0,0,0.2);border-radius:50%;}
#marker div:before{width:130px;height:150px;top:80px;left:34px;background-image:linear-gradient(to right,#eee 3px,#777 12px,transparent 12px),linear-gradient(-20deg,rgba(178,175,175,0) 37px,#b2afaf 44px,#b2afaf 45px,rgba(178,175,175,0) 52px);}
#marker div:after{width:60px;height:45px;top:152px;left:147px;background-image:linear-gradient(20deg,#b2afaf 30%,rgba(178,175,175,0) 90%);border-radius:50%;box-shadow:-1px 2px 3px #b2afaf;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
#crayon{background:#f3c114;}
#crayon div{width:250px;height:40px;margin-left:-110px;margin-top:-20px;z-index:1;background:#237449;background-image:radial-gradient(ellipse at top,rgba(0,0,0,0.6) 50px,transparent 54px),linear-gradient(to right,transparent 25px,rgba(0,0,0,0.6) 25px,rgba(0,0,0,0.6) 30px,transparent 30px,transparent 35px,rgba(0,0,0,0.6) 35px,rgba(0,0,0,0.6) 40px,transparent 40px,transparent 210px,rgba(0,0,0,0.6) 210px,rgba(0,0,0,0.6) 215px,transparent 215px,transparent 220px,rgba(0,0,0,0.6) 220px,rgba(0,0,0,0.6) 225px,transparent 225px),linear-gradient(to right,transparent 12px,rgba(41,237,133,0.6) 12px,rgba(41,237,133,0.6) 235px,transparent 235px),linear-gradient(to bottom,transparent 62%,rgba(0,0,0,0.3) 100%);border-radius:2px;box-shadow:2px 2px 3px rgba(0,0,0,0.3);}
#crayon div:before{height:10px;left:-48px;top:2px;border-right:48px solid #237449;border-bottom:13px solid transparent;border-top:13px solid transparent;}
#crayon div:after{width:251px;height:23px;content:'green';font-family:Arial,sans-serif;font-size:12px;font-weight:bold;color:rgba(0,0,0,0.3);text-align:right;padding-right:47px;padding-top:17px;left:-48px;background-image:linear-gradient(to right,transparent 46px,rgba(0,0,0,0.3) 48px,transparent 48px),linear-gradient(to bottom,rgba(255,255,255,0) 12px,rgba(255,255,255,0.2) 17px,rgba(255,255,255,0.2) 19px,rgba(255,255,255,0) 24px);}
#moleskine{background:#84c3c9;}
#moleskine div{width:170px;height:250px;margin-left:-85px;margin-top:-133px;background-image:linear-gradient(to bottom,#444 0,#222 100%);border-radius:3px 10px 10px 3px;box-shadow:0 5px 0 white,0 7px 0 #222,3px 10px 2px rgba(0,0,0,0.3);}
#moleskine div:before{width:170px;height:257px;background-image:linear-gradient(to right,transparent 130px,#333 130px,#333 140px,transparent 140px),linear-gradient(to bottom,transparent 33%,#ff8613 33%,#ff8613 68%,transparent 68%),linear-gradient(to right,#444 3px,rgba(255,255,255,0.1) 4px,rgba(255,255,255,0) 8px);}
#moleskine div:after{width:60px;height:40px;left:13px;top:105px;background:white;background-image:linear-gradient(to right,transparent 29px,#777 29px,#777 31px,transparent 31px);border:2px solid #777;box-shadow:-20px 125px 0 -21px #777;}
#macarons{background:#eee;}
#macarons div{width:110px;height:180px;margin-left:-55px;margin-top:-90px;background-image:linear-gradient(to top,transparent 20px,#7b5354 20px,#7b5354 25px,transparent 25px,transparent 65px,#ffd889 65px,#ffd889 70px,transparent 70px,transparent 109px,#548355 109px,#548355 114px,transparent 114px,transparent 154px,#965537 154px,#965537 159px,transparent 159px);}
#macarons div:before{width:110px;height:20px;bottom:0;border-radius:6px;border-bottom-left-radius:80px 20px;border-bottom-right-radius:80px 20px;background:#fa8780;box-shadow:0 -45px 0 #ffba10,0 -89px 0 #a8daa9,0 -134px 0 #d1a574;}
#macarons div:after{width:110px;height:20px;bottom:25px;border-radius:6px;border-top-left-radius:80px 20px;border-top-right-radius:80px 20px;background:#fa8780;box-shadow:0 -44px 0 #ffba10,0 -89px 0 #a8daa9,0 -134px 0 #d1a574;}
#mario-tube{background:#8cb4ff;}
#mario-tube div{width:170px;height:250px;margin-left:-85px;margin-top:-50px;background-image:linear-gradient(to bottom,rgba(0,0,0,0.5) 4%,rgba(0,0,0,0) 10%),linear-gradient(-150deg,rgba(0,0,0,0.4) 10%,rgba(0,0,0,0) 20%),linear-gradient(to right,#2a7d2f 0%,#78fc73 25%,#78fc73 35%,#113e15 95%);border-left:1px solid #236d22;}
#mario-tube div:before{width:210px;height:60px;margin-left:-20px;top:-60px;background-image:linear-gradient(to bottom,rgba(255,255,255,0) 1px,rgba(255,255,255,0.3) 2px,rgba(255,255,255,0.3) 3px,rgba(255,255,255,0) 4px),linear-gradient(to top,rgba(0,0,0,0.4) 3px,rgba(255,255,255,0.2) 5px,rgba(255,255,255,0) 6px),linear-gradient(to right,#2a7d2f 0%,#78fc73 25%,#78fc73 35%,#113e15 95%);border-radius:5px;}
#mario-tube div:after{width:40px;height:2px;background:linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,0.7) 20%,rgba(255,255,255,0.7) 80%,rgba(255,255,255,0) 95%);top:-58px;left:30px;}
@media (max-width:400px){#mario-tube div{margin-top:-25px;}
}
#mario-mushroom{background:#74ceff;}
#mario-mushroom div{width:170px;height:140px;margin-left:-85px;margin-top:-90px;background-image:radial-gradient(circle at 50% 120%,rgba(0,0,0,0.7) 23%,rgba(0,0,0,0) 48%),linear-gradient(30deg,rgba(0,0,0,0.4) 10%,rgba(0,0,0,0) 20%),radial-gradient(circle at 50% 33%,#f8f6f7 32%,rgba(255,255,255,0) 32%),radial-gradient(circle at -13% 55%,#f8f6f7 20%,rgba(255,255,255,0) 20%),radial-gradient(circle at 113% 55%,#f8f6f7 20%,rgba(255,255,255,0) 20%),linear-gradient(to bottom,#ef0015 20%,#b2000c 100%);border-radius:140px 140px 80px 80px;}
#mario-mushroom div:before{width:100px;height:66px;left:35px;bottom:-30px;background:#f1d38b;border-top-right-radius:180px 100px;border-top-left-radius:180px 100px;border-bottom-right-radius:140px 100px;border-bottom-left-radius:140px 100px;border-top:1px solid #53170f;box-shadow:inset 0 15px 10px rgba(0,0,0,0.25),inset -12px -5px 10px rgba(0,0,0,0.2),inset 5px -2px 10px rgba(0,0,0,0.2);}
#mario-mushroom div:after{width:8px;height:25px;top:120px;left:58px;background:rgba(0,0,0,0);box-shadow:8px 0 #312114,38px 0 #312114;border-radius:40%;}
#cupcake{background:#ffc0cb;}
#cupcake div{width:240px;height:150px;margin-left:-120px;margin-top:-30px;background:#61381c;background-image:radial-gradient(circle at top center,rgba(73,41,20,0) 55%,rgba(73,41,20,0.9) 75%),repeating-linear-gradient(to right,transparent,transparent 7px,rgba(0,0,0,0.7) 9px,rgba(0,0,0,0.7) 20px,transparent 22px),linear-gradient(to bottom,transparent 15px,rgba(255,255,255,0.5) 16px,rgba(255,255,255,0.3) 40px,transparent 42px);border-bottom-right-radius:120px 30px;border-bottom-left-radius:120px 30px;box-shadow:0 10px 5px -3px rgba(0,0,0,0.3);}
#cupcake div:before{width:240px;height:80px;margin-left:-120px;left:50%;top:-70px;background:#ffe4e1;border-radius:60% 60% 50px 50px;box-shadow:0 20px 0 6px #3d241c,inset 0 -15px 25px rgba(145,102,146,0.5);}
#cupcake div:after{width:60px;height:60px;margin-left:-30px;top:-95px;left:50%;background:#dc143c;border-radius:50%;box-shadow:inset 0 -10px 10px rgba(0,0,0,0.2);}
#vacancy{background:#111;}
#vacancy div{width:350px;height:200px;margin-left:-190px;margin-top:-100px;background:#222;background-image:linear-gradient(to right,#222 20px,transparent 20px,transparent 190px,#222 190px,#222 210px,transparent 210px,transparent 330px,#222 330px),linear-gradient(to bottom,#222 30px,transparent 30px,transparent 170px,#222 170px),linear-gradient(to bottom,#333 40px,transparent 40px,transparent 160px,#333 160px),linear-gradient(to right,#333 30px,transparent 30px,transparent 180px,#333 180px,#333 220px,transparent 220px,transparent 320px,#333 320px),repeating-linear-gradient(to bottom,transparent 7px,rgba(0,0,0,0.8) 9px,rgba(0,0,0,0.8) 13px,transparent 13px);border-top:15px solid #333;border-left:15px solid #111;border-right:15px solid #111;border-bottom:6px solid #222;}
#vacancy div:after{padding:50px;content:'VACANCY';left:-5px;top:35px;color:#faf37e;overflow:hidden;font-family:Verdana;font-size:23px;text-shadow:0 0 5px #ffa500,0 0 15px #ffa500,0 0 25px #ffa500,0 0 40px #ffa500,0 0 60px #f00,0 0 80px #f00,0 0 105px #f00;}
#vacancy div:before{padding:50px;content:'NO';left:10px;top:10px;color:#111;overflow:hidden;font-family:Verdana;font-size:18px;animation:blinky 10s infinite;-webkit-animation:blinky 10s infinite;}
@media (max-width:500px){#vacancy div{-webkit-transform:scale(0.75);transform:scale(0.75);}
}
@-webkit-keyframes blinky{21%,39%,45%,47%,53%{color:#111;text-shadow:none;}
26%,38%,40%,44%,46%,48%{color:#faf37e;text-shadow:0 0 5px #ffa500,0 0 15px #ffa500,0 0 25px #ffa500,0 0 35px #f00,0 0 50px #f00,0 0 65px #f00,0 0 100px #f00;}
}
@-moz-keyframes blinky{21%,39%,45%,47%,53%{color:#111;text-shadow:none;}
26%,38%,40%,44%,46%,48%{color:#faf37e;text-shadow:0 0 5px #ffa500,0 0 15px #ffa500,0 0 25px #ffa500,0 0 35px #f00,0 0 50px #f00,0 0 65px #f00,0 0 100px #f00;}
}
@-webkit-keyframes blinky{21%,39%,45%,47%,53%{color:#111;text-shadow:none;}
26%,38%,40%,44%,46%,48%{color:#faf37e;text-shadow:0 0 5px #ffa500,0 0 15px #ffa500,0 0 25px #ffa500,0 0 35px #f00,0 0 50px #f00,0 0 65px #f00,0 0 100px #f00;}
}
@-o-keyframes blinky{21%,39%,45%,47%,53%{color:#111;text-shadow:none;}
26%,38%,40%,44%,46%,48%{color:#faf37e;text-shadow:0 0 5px #ffa500,0 0 15px #ffa500,0 0 25px #ffa500,0 0 35px #f00,0 0 50px #f00,0 0 65px #f00,0 0 100px #f00;}
}
@-ms-keyframes blinky{21%,39%,45%,47%,53%{color:#111;text-shadow:none;}
26%,38%,40%,44%,46%,48%{color:#faf37e;text-shadow:0 0 5px #ffa500,0 0 15px #ffa500,0 0 25px #ffa500,0 0 35px #f00,0 0 50px #f00,0 0 65px #f00,0 0 100px #f00;}
}
@keyframes blinky{21%,39%,45%,47%,53%{color:#111;text-shadow:none;}
26%,38%,40%,44%,46%,48%{color:#faf37e;text-shadow:0 0 5px #ffa500,0 0 15px #ffa500,0 0 25px #ffa500,0 0 35px #f00,0 0 50px #f00,0 0 65px #f00,0 0 100px #f00;}
}
#candy-apple{background:#cbe3ed;}
#candy-apple div{width:150px;height:150px;margin-left:-75px;margin-top:-20px;background:#dc143c;background-image:radial-gradient(ellipse at 22% 30%,rgba(255,255,255,0.9) 0,rgba(255,255,255,0) 15%);border-radius:80px 80px 100px 100px;box-shadow:inset -8px -8px 8px rgba(0,0,0,0.1);}
#candy-apple div:before{width:130px;height:26px;margin-left:-65px;left:50%;top:125px;background:#dc143c;border-radius:50%;box-shadow:inset 0 -10px 8px #dc143c,inset -5px -18px 8px rgba(0,0,0,0.1);}
#candy-apple div:after{width:40px;height:150px;margin-left:-20px;left:50%;top:-130px;background-image:linear-gradient(to right,transparent 30%,#deb887 30%,#c88937 70%,transparent 70%);border-bottom-right-radius:30px 10px;border-bottom-left-radius:30px 10px;box-shadow:0 3px 0 rgba(0,0,0,0.2);}
#corn-dog{background:#ffe4c4;}
#corn-dog div{width:16px;height:150px;margin-left:-8px;margin-top:0;background:#deb887;background-image:linear-gradient(to right,#deb887,#d3a05f);border-radius:20px;}
#corn-dog div:before{width:80px;height:220px;margin-left:-40px;left:50%;top:-150px;z-index:2;background:#cd853f;box-shadow:inset -5px -5px 30px rgba(0,0,0,0.25);border-radius:50px/70px 70px 100px 100px;}
#corn-dog div:after{width:18px;height:23px;margin-left:-9px;left:50%;top:65px;background:#cd853f;background-image:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.2));border-bottom-right-radius:15px;border-bottom-left-radius:5px;}
#shirt-tag{background:#666;}
#shirt-tag div{width:180px;height:136px;margin-left:-90px;margin-top:-68px;background:#aaa;border-radius:6px/60px;box-shadow:inset 0 -15px 30px rgba(0,0,0,0.35),inset -170px 0 0 #eee,inset 0 25px 5px rgba(0,0,0,0.3),inset 0 40px 5px rgba(0,0,0,0.2),-4px 7px 5px rgba(0,0,0,0.4);}
#shirt-tag div:before{width:220px;height:100px;margin-left:-25px;margin-top:-4px;padding:35px 0 4px 10px;content:'100% COTTON';font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:bold;color:#bbb;text-shadow:1px 2px 1px #fff;background-image:linear-gradient(to bottom,#666 5px,rgba(0,0,0,0.5) 5px,transparent 10px);border-top:1px dashed #999;}
#shirt-tag div:after{width:40px;height:40px;margin-left:-20px;left:50%;top:65px;background-image:radial-gradient(circle at center,rgba(255,255,255,0) 10px,#bbb 10px,#bbb 14px,rgba(255,255,255,0) 14px),radial-gradient(circle at center,#bbb 3px,rgba(255,255,255,0) 3px);border:4px solid #bbb;box-shadow:1px 2px 1px #eee;}
#button{background:#555;}
#button div{width:180px;height:180px;margin-left:-90px;margin-top:-90px;background:#87ceeb;border-radius:50%;box-shadow:inset 0 5px 5px #87ceeb,inset 0 17px 5px rgba(255,255,255,0.7),inset 0 -3px 3px rgba(255,255,255,0.3),inset 0 -10px 10px rgba(0,0,0,0.3),inset 0 -15px 10px #45b3e0,0 7px 10px rgba(0,0,0,0.3);}
#button div:before{width:110px;height:106px;left:50%;top:50%;margin-left:-55px;margin-top:-55px;background-image:radial-gradient(circle at 38px 38px,#333 10px,transparent 10px),radial-gradient(circle at 73px 73px,#333 10px,transparent 10px),radial-gradient(circle at 38px 73px,#333 10px,transparent 10px),radial-gradient(circle at 73px 38px,#333 10px,transparent 10px);border-radius:50%;border-top:1px solid rgba(0,0,0,0.6);border-bottom:1px solid rgba(255,255,255,0.6);box-shadow:inset 0 20px 2px rgba(255,255,255,0.3),3px -15px 7px -4px rgba(0,0,0,0.3),0 -14px 10px 5px #45b3e0,0 2px 5px 5px #87ceeb,0 10px 5px 5px rgba(255,255,255,0.6);}
#button div:after{width:50px;height:50px;left:50%;top:50%;margin-left:-25px;margin-top:-23px;background-image:linear-gradient(to right,transparent 35%,#000080 35%,#4682b4 40%,#000080 45%,#4682b4 50%,#000080 55%,#4682b4 60%,#000080 65%,transparent 65%),linear-gradient(to bottom,transparent 35%,#000080 35%,#4682b4 40%,#000080 45%,#4682b4 50%,#000080 55%,#4682b4 60%,#000080 65%,transparent 65%);border-radius:50%;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
#luggage-tag1{background:#87ceeb;}
#luggage-tag1 div{width:180px;height:220px;margin-left:-90px;margin-top:-90px;box-shadow:3px 5px 0 rgba(0,0,0,0.1);color:#f2353b;}
#luggage-tag1 div:before{width:180px;height:180px;padding-top:80px;margin-top:-40px;content:'PHX';font-family:Impact,Arial,sans-serif;font-size:80px;background-image:linear-gradient(to bottom,transparent 45px,#f2353b 45px,#f2353b 60px,#f7c791 60px),linear-gradient(135deg,transparent 30px,#f2353b 30px,#f2353b 95px,transparent 95px),linear-gradient(225deg,transparent 30px,#f2353b 30px,#f2353b 95px,transparent 95px);}
#luggage-tag1 div:after{width:180px;height:65px;padding-top:160px;bottom:35px;background-image:radial-gradient(ellipse at center,#87ceeb 20%,#df2228 21%,#df2228 45%,transparent 45%);background-size:65px 65px;background-position:50% 0;background-repeat:no-repeat;border-bottom:1px dashed #666;content:'PHOENIX';font-family:Helvetica,Arial,sans-serif;font-size:27px;font-weight:bold;}
#luggage-tag2{background:#f6dfc6;}
#luggage-tag2 div{width:200px;height:250px;margin-left:-100px;margin-top:-125px;background:white;background-image:linear-gradient(to bottom,#f7f7f7 30%,#71bad7 30%,#71bad7 70%,#f7f7f7 70%);box-shadow:3px 5px 0 rgba(0,0,0,0.1);border-radius:10px;font-family:Helvetica,Arial,sans-serif;font-weight:bold;color:white;}
#luggage-tag2 div:before{width:200px;height:112px;padding-top:68px;margin-top:-40px;bottom:30px;background-image:linear-gradient(to right,transparent 100px,#71bad7 100px,#71bad7 101px,transparent 101px);border-bottom:1px solid #71bad7;content:'SFO';font-size:70px;}
#luggage-tag2 div:after{width:200px;height:30px;padding-top:85px;top:0;background-image:radial-gradient(ellipse at center,#f8e9d8 20%,white 21%,white 45%,transparent 45%);background-size:65px 65px;background-position:50% 0;background-repeat:no-repeat;content:'SAN FRANCISCO';font-size:16px;}
#grand-budapest{background:#efabb3;}
#grand-budapest div{width:100px;height:100px;margin-left:-50px;top:0;background:transparent;box-shadow:0 205px 0 -6px #fbd0e4,0 205px 0 -5px #f93050,0 205px #fbd0e4,-105px 205px 0 -6px #fbd0e4,-105px 205px 0 -5px #f93050,-105px 205px #fbd0e4,115px 205px 0 -6px #fbd0e4,115px 205px 0 -5px #f93050,115px 205px #fbd0e4,-80px 104px 0 -6px #fbd0e4,-80px 104px 0 -5px #f93050,-80px 104px #fbd0e4,40px 104px 0 -6px #fbd0e4,40px 104px 0 -5px #f93050,40px 104px #fbd0e4;}
@media (max-width:400px){#grand-budapest div{top:30px;}
}
#grand-budapest div:before{content:'MENDL鈥橲';display:inline-block;top:250px;left:-82px;font-size:12px;font-family:'Lucida Grande';font-weight:bold;color:#f93050;text-shadow:220px 0 0 #f93050,24px -101px #f93050;}
#grand-budapest div:after{width:8px;height:100px;top:206px;left:-60px;background:#90baff;box-shadow:220px 0 #90baff,145px -101px #90baff;}
#royal-tenenbaums{background:#a86e4a;}
#royal-tenenbaums div{width:150px;height:120px;margin-left:-75px;margin-top:-25px;background:#f9a688;border-radius:60px 50px 40px 40px;}
#royal-tenenbaums div:before{width:30px;height:130px;right:35px;top:-120px;background-image:linear-gradient(to bottom,#f9a688 40px,transparent 40px,transparent 70px,#f9a688 70px);border-radius:30px 25px 0 0;box-shadow:35px 50px #f9a688,-35px 15px #f9a688,-70px 35px #f9a688,-65px 142px #f9a688,-36px 142px #f9a688,-7px 142px #f9a688,13px 142px #f9a688;}
#royal-tenenbaums div:after{width:30px;height:130px;left:-12px;top:-32px;background:#f9a688;border-radius:25px 30px 0 0;-webkit-transform:rotate(-15deg);transform:rotate(-15deg);}
#moonrise-kingdom{background:#deb887;}
#moonrise-kingdom div{width:180px;height:250px;margin-left:-90px;margin-top:-125px;background-image:linear-gradient(to top,transparent 100px,#63cbe4 100px),linear-gradient(to right,#fff8dc 15px,transparent 15px),linear-gradient(to left,#fff8dc 15px,transparent 15px),linear-gradient(to top,#fff8dc 15px,transparent 15px,transparent 42px,#e0d9bf 42px,#e0d9bf 50px,#fff8dc 50px,#fff8dc 100px,transparent 100px);border-radius:7px 7px 3px 3px;}
#moonrise-kingdom div:before{width:12px;height:12px;bottom:68px;left:33px;background:#666;border-radius:50%;box-shadow:0 0 0 7px #ddd,0 0 0 11px #666,50px 0 0 #666,50px 0 0 7px #ddd,50px 0 0 11px #666,100px 0 0 #666,100px 0 0 7px #ddd,100px 0 0 11px #666,-5px -75px 0 -2px rgba(0,0,0,0.4),-5px -60px 0 -2px rgba(0,0,0,0.4),-5px -45px 0 -2px rgba(0,0,0,0.4),10px -75px 0 -2px rgba(0,0,0,0.4),10px -60px 0 -2px rgba(0,0,0,0.4),10px -45px 0 -2px rgba(0,0,0,0.4),27px -75px 0 -2px rgba(0,0,0,0.4),27px -60px 0 -2px rgba(0,0,0,0.4),27px -45px 0 -2px rgba(0,0,0,0.4),44px -75px 0 -2px rgba(0,0,0,0.4),44px -60px 0 -2px rgba(0,0,0,0.4),44px -45px 0 -2px rgba(0,0,0,0.4),60px -75px 0 -2px rgba(0,0,0,0.4),60px -60px 0 -2px rgba(0,0,0,0.4),60px -45px 0 -2px rgba(0,0,0,0.4),75px -75px 0 -2px rgba(0,0,0,0.4),75px -60px 0 -2px rgba(0,0,0,0.4),75px -45px 0 -2px rgba(0,0,0,0.4),90px -75px 0 -2px rgba(0,0,0,0.4),90px -60px 0 -2px rgba(0,0,0,0.4),90px -45px 0 -2px rgba(0,0,0,0.4),105px -75px 0 -2px rgba(0,0,0,0.4),105px -60px 0 -2px rgba(0,0,0,0.4),105px -45px 0 -2px rgba(0,0,0,0.4);}
#moonrise-kingdom div:after{width:120px;margin-left:-62px;padding:2px;left:50%;top:70px;content:'BARRINGTON';background:white;font-family:Helvetica;font-size:10px;font-weight:bold;color:#666;}
#lightsaber-darth{background:#aaa;}
#lightsaber-darth div{width:40px;height:250px;margin-left:-20px;margin-top:-125px;background-color:#ccc;background-image:linear-gradient(to right,rgba(0,0,0,0.2) 0,transparent 30%,transparent 70%,rgba(0,0,0,0.2) 100%),radial-gradient(circle at 26px 75px,#444 5px,transparent 5px),radial-gradient(circle at 26px 62px,#444 5px,transparent 5px),linear-gradient(to bottom,transparent 37px,rgba(0,0,0,0.2) 37px,rgba(0,0,0,0.2) 39px,transparent 39px),linear-gradient(to bottom,#444 20%,transparent 20%),linear-gradient(to right,rgba(255,255,255,0) 20%,rgba(255,255,255,0.4) 25%,rgba(255,255,255,0.4) 35%,rgba(255,255,255,0) 40%),linear-gradient(to bottom,transparent 37%,#444 37%,#444 50%,transparent 50%),linear-gradient(to bottom,#ccc 50%,transparent 50%,transparent 98%,#ddd 98%),linear-gradient(to right,#444 20%,transparent 20%,transparent 35%,#444 35%,#444 65%,transparent 65%,transparent 80%,#444 80%),linear-gradient(to top,transparent 10px,#888 10px,#888 12px,transparent 12px,transparent 14px,#888 14px,#888 16px,transparent 16px,transparent 18px,#888 18px,#888 20px,transparent 20px,transparent 22px,#888 22px,#888 24px,transparent 24px);border-top-right-radius:80px 60px;border-bottom-right-radius:40px 10px;border-bottom-left-radius:40px 10px;}
#lightsaber-darth div:before{width:8px;height:55px;background:#444;left:-8px;top:20px;border-top-left-radius:10px 20px;}
#lightsaber-darth div:after{width:12px;height:34px;right:-12px;top:91px;background:#444;background-image:radial-gradient(circle at center center,#888 3px,transparent 3px);}
#lightsaber-luke{background:#f7f7f7;}
#lightsaber-luke div{width:24px;height:96px;margin-left:-12px;margin-top:-125px;background-image:linear-gradient(to bottom,#ccc 20px,#daa520 20px,#daa520 60px,#444 60px);}
#lightsaber-luke div:before{width:40px;height:250px;margin-left:-20px;left:50%;background-image:linear-gradient(to right,rgba(255,255,255,0) 25%,rgba(255,255,255,0.4) 35%,rgba(255,255,255,0) 45%,rgba(255,255,255,0) 55%,rgba(255,255,255,0.4) 65%,rgba(255,255,255,0) 75%),linear-gradient(to bottom,#ccc 10px,transparent 10px,transparent 45px,#daa520 45px,#daa520 60px,#ccc 60px,#ccc 65px,transparent 65px),linear-gradient(to top,transparent 20px,rgba(0,0,0,0.1) 20px,rgba(0,0,0,0.1) 22px,transparent 22px),linear-gradient(to top,#ccc 90px,#444 90px,#444 98px,#ccc 98px,#ccc 102px,#444 102px,#444 106px,#ccc 106px,#ccc 110px,#444 110px,#444 114px,#ccc 114px,#ccc 118px,#444 118px,#444 122px,#ccc 122px,#ccc 126px,#444 126px,#444 130px,#ccc 130px,#ccc 134px,#444 134px,#444 138px,#ccc 138px,#ccc 142px,#444 142px,#444 146px,#ccc 146px,#ccc 150px,#444 150px,#444 154px,#ccc 154px,#ccc 158px,transparent 158px);border-bottom-right-radius:40px 10px;border-bottom-left-radius:40px 10px;}
#lightsaber-luke div:after{width:10px;height:44px;background-image:radial-gradient(circle at 7px 15px,#ff6347 2px,transparent 2px),radial-gradient(circle at 7px 7px,#0f0 2px,transparent 2px),linear-gradient(to bottom,#ccc 50%,#444 50%);left:-24px;bottom:-112px;border-left:4px solid #daa520;border-right:4px solid #ccc;box-shadow:1px 0 0 rgba(0,0,0,0.2);}
#bb8{background:#444;z-index:-3;}
#bb8 div{width:120px;height:78px;margin-left:-60px;margin-top:-145px;background-color:white;background-image:radial-gradient(circle at 85px 50px,#555 5px,transparent 6px),radial-gradient(circle at 85px 50px,white 7px,transparent 8px),radial-gradient(circle at 85px 50px,#555 10px,transparent 11px),radial-gradient(circle at 58px 32px,rgba(255,255,255,0.9) 2px,transparent 3px),radial-gradient(circle at 52px 36px,#333 12px,transparent 13px),radial-gradient(circle at 52px 36px,#555 16px,transparent 17px),radial-gradient(circle at 52px 37px,white 20px,transparent 20px),linear-gradient(to top,#aaa 7px,transparent 7px),linear-gradient(to bottom,white 7px,#ccc 7px,#aaa 15px,white 15px,white 18px,#ffa500 18px,#ffa500 24px,transparent 24px),linear-gradient(to right,transparent 29px,#ccc 30px,#ccc 31px,transparent 31px,transparent 60px,#ccc 61px,#ccc 62px,transparent 62px),linear-gradient(to right,transparent 5px,white 5px,white 10px,transparent 10px,transparent 30px,white 30px,white 40px,transparent 40px,transparent 50px,white 50px,white 100px,transparent 100px,transparent 115px,white 115px),linear-gradient(to top,#ffa500 16px,transparent 16px);border-radius:50%/60px;border-bottom-right-radius:50px 10px;border-bottom-left-radius:50px 10px;border-bottom:8px solid #ccc;box-shadow:inset -5px -2px 20px rgba(0,0,0,0.4);}
#bb8 div:before{width:200px;height:200px;margin-left:-100px;margin-top:79px;left:50%;background-color:white;background-image:radial-gradient(ellipse at top right,#ffa500 50px,transparent 50px),radial-gradient(ellipse at bottom right,#ffa500 50px,transparent 50px),radial-gradient(ellipse at top left,#ffa500 50px,transparent 50px),radial-gradient(ellipse at bottom left,#ffa500 50px,transparent 50px),radial-gradient(circle at 100px 100px,transparent 60px,white 61px),radial-gradient(circle at 100px 100px,transparent 44px,#ffa500 45px),linear-gradient(to bottom,transparent 90px,white 90px,white 93px,transparent 93px,transparent 99px,white 99px,white 103px,transparent 103px,transparent 108px,white 108px,white 112px,transparent 112px),radial-gradient(circle at 100px 100px,#aaa 24px,transparent 25px),radial-gradient(circle at 100px 100px,white 28px,transparent 29px),linear-gradient(-45deg,transparent 132px,white 132px,white 136px,#ffa500 136px,#ffa500 152px,white 152px,white 155px,transparent 155px),linear-gradient(45deg,transparent 129px,white 129px,white 133px,#ffa500 133px,#ffa500 150px,white 150px,white 153px,transparent 153px),linear-gradient(to bottom,transparent 75px,white 75px,white 119px,transparent 119px),radial-gradient(circle at 100px 100px,#aaa 40px,transparent 41px),radial-gradient(circle at 100px 100px,white 44px,transparent 45px);border-radius:50%;z-index:-2;animation:spin 0.8s infinite linear;}
#bb8 div:after{width:200px;height:200px;margin-left:-100px;margin-top:79px;left:50%;border-radius:50%;background-image:linear-gradient(to bottom,rgba(0,0,0,0.6) 10px,transparent 15px);box-shadow:inset 0 -20px 30px rgba(0,0,0,0.5);z-index:-1;-webkit-transform:translate3d(0,0,0);}
@-moz-keyframes spin{0{transform:rotate(0deg) translateZ(0);}
100%{transform:rotate(-360deg) translateZ(0);}
}
@-webkit-keyframes spin{0{transform:rotate(0deg) translateZ(0);}
100%{transform:rotate(-360deg) translateZ(0);}
}
@-o-keyframes spin{0{transform:rotate(0deg) translateZ(0);}
100%{transform:rotate(-360deg) translateZ(0);}
}
@-ms-keyframes spin{0{transform:rotate(0deg) translateZ(0);}
100%{transform:rotate(-360deg) translateZ(0);}
}
@keyframes spin{0{transform:rotate(0deg) translateZ(0);}
100%{transform:rotate(-360deg) translateZ(0);}
}
#pizza-works{background:#fff8dc;}
#pizza-works div{width:200px;height:200px;margin-left:-100px;margin-top:-100px;background:#d2b48c;background-image:radial-gradient(circle,rgba(255,215,0,0.24) 30%,transparent 58%),radial-gradient(circle,#fffacd 55%,transparent 58%),radial-gradient(circle,#b22222 60%,transparent 61%),radial-gradient(circle,rgba(139,69,19,0.4) 58%,transparent 64%),radial-gradient(circle,transparent 66%,#8b4513 81%);border-radius:50%;box-shadow:2px 2px 5px rgba(0,0,0,0.2);}
#pizza-works div:before{width:25px;height:25px;left:50px;top:50px;background:#b22222;border-radius:50%;box-shadow:20px 20px 0 -5px #cd853f,30px -20px 0 -5px #cd853f,-15px 25px 0 -5px #cd853f,30px 60px 0 -5px #cd853f,68px 25px 0 -5px #cd853f,85px 80px 0 -5px #cd853f,45px 25px 0 #b22222,60px -15px 0 #b22222,-10px 50px 0 #b22222,90px 30px 0 #b22222,20px 90px 0 #b22222,65px 70px 0 #b22222;}
#pizza-works div:after{width:6px;height:6px;left:80px;top:60px;background:#2e8b57;border-radius:2px;box-shadow:50px 10px 0 #2e8b57,-20px 30px 0 #2e8b57,-10px 55px 0 #2e8b57,-25px 80px 0 #2e8b57,35px 50px 0 #2e8b57,40px 90px 0 #2e8b57,70px 60px 0 #2e8b57,70px 0px 0 white,25px -10px 0 white,-10px -15px 0 white,-15px 40px 0 white,10px 30px 0 white,20px 70px 0 white,50px 50px 0 white,55px 85px 0 white;}
#pizza-marg{background:#ffebcd;}
#pizza-marg div{width:200px;height:200px;margin-left:-100px;margin-top:-100px;background:#deb887;background-image:radial-gradient(circle,rgba(139,0,0,0.3) 25%,transparent 58%),radial-gradient(circle,#b22222 63%,transparent 65%),radial-gradient(circle,transparent 65%,#8b4513 84%);border-radius:50%;box-shadow:2px 2px 5px rgba(0,0,0,0.2);}
#pizza-marg div:before{width:32px;height:32px;left:45px;top:48px;background:white;border-radius:50%;box-shadow:50px -23px 0 white,91px 20px 0 white,36px 30px 0 white,-10px 60px 0 white,25px 89px 0 white,80px 80px 0 white,20px -30px 0 -14px rgba(0,0,0,0.4),-30px 10px 0 -14px rgba(0,0,0,0.5),-5px 35px 0 -14px rgba(0,0,0,0.4),16px 16px 0 -14px rgba(0,0,0,0.5),90px -10px 0 -14px rgba(0,0,0,0.4),58px 10px 0 -14px rgba(0,0,0,0.5),60px 60px 0 -14px rgba(0,0,0,0.5),105px 55px 0 -14px rgba(0,0,0,0.4),-5px 90px 0 -14px rgba(0,0,0,0.5),55px 105px 0 -14px rgba(0,0,0,0.5);}
#pizza-marg div:after{width:20px;height:20px;left:65px;top:45px;background:#2e8b57;border-radius:35px 5px;box-shadow:50px 55px 0 #2e8b57,70px -10px 0 -2px #2e8b57,-10px 80px 0 -2px #2e8b57,40px 105px 0 -2px #2e8b57;}
#vinyl-record{background:#ddd;}
#vinyl-record div{width:160px;height:160px;margin-left:-80px;margin-top:-140px;background:linear-gradient(50deg,rgba(255,255,255,0) 40%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 60%),linear-gradient(-50deg,rgba(255,255,255,0) 40%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 60%),repeating-radial-gradient(circle,#333 0,#333 2px,#444 2px,#444 4px);border-radius:50%;box-shadow:-3px -3px 2px rgba(0,0,0,0.2);}
#vinyl-record div:before{width:45px;height:45px;margin-left:-22.5px;margin-top:-22.5px;top:50%;left:50%;background-color:#f5f5dc;background-image:radial-gradient(circle,#333 5px,transparent 5px),linear-gradient(to bottom,#d2b48c 35%,transparent 35%);border-radius:50%;box-shadow:0 0 0 10px rgba(0,0,0,0.3);}
#vinyl-record div:after{width:160px;height:160px;margin-left:-8px;top:100px;background-color:#f7f7f7;background-image:linear-gradient(-45deg,#be0974 20px,#da6a57 20px,#da6a57 40px,#eebc31 40px,#eebc31 60px,#92a25b 60px,#92a25b 80px,#46a7c0 80px,#46a7c0 100px,transparent 100px);border-radius:4px;border:8px solid #f7f7f7;box-shadow:0 -2px 3px rgba(0,0,0,0.1),0 -12px 0 -3px white,-4px -4px 2px rgba(0,0,0,0.1);}
#cassette{background:#ccc;}
#cassette div{width:180px;height:120px;margin-left:-90px;margin-top:-60px;border-radius:5px;background-image:linear-gradient(to right,#444 10px,transparent 10px),linear-gradient(to left,#444 10px,transparent 10px),linear-gradient(135deg,#444 20px,transparent 20px),linear-gradient(-135deg,#444 20px,transparent 20px),linear-gradient(to bottom,transparent 35px,#be0974 35px,#be0974 43px,#da6a57 43px,#da6a57 51px,#eebc31 51px,#eebc31 59px,#92a25b 59px,#92a25b 67px,#46a7c0 67px,#46a7c0 75px,transparent 75px),linear-gradient(to bottom,transparent 10px,#f7f7f7 10px,#f7f7f7 85px,transparent 85px),linear-gradient(to top,transparent 26px,#444 26px),linear-gradient(105deg,#444 70px,#333 70px,#333 73px,transparent 73px),linear-gradient(-105deg,#444 70px,#333 70px,#333 73px,transparent 73px),linear-gradient(to top,#444 24px,#777 24px,#777 26px,#444 26px);box-shadow:-4px -4px 2px rgba(0,0,0,0.2);}
#cassette div:before{width:90px;height:26px;margin-left:-45px;left:50%;top:41px;background-color:#ccc;background-image:linear-gradient(to bottom,#444 5px,transparent 5px),linear-gradient(to top,#444 5px,transparent 5px),linear-gradient(to right,#444 30px,transparent 30px),linear-gradient(to left,#444 30px,transparent 30px),radial-gradient(circle at 10px 12px,#a0522d 32px,transparent 32px);border-radius:30px;}
#cassette div:after{width:5px;height:5px;background:#999;border-radius:50%;box-shadow:165px 0 0 #999,0 104px 0 #999,165px 104px 0 #999,55px 101px 0 1px #222,68px 98px 0 1px #222,98px 98px 0 1px #222,110px 101px 0 1px #222,51px 38px 0 #444,114px 38px 0 #444,44px 46px 0 #444,58px 46px 0 #444,107px 46px 0 #444,121px 46px 0 #444,51px 53px 0 #444,114px 53px 0 #444,51px 46px 0 6px #ccc,114px 46px 0 6px #ccc;left:5px;top:5px;}
#cd{background:#bbb;}
#cd div{width:140px;height:140px;margin-left:-70px;margin-top:-140px;border-radius:50%;background-color:#eee;background-image:radial-gradient(circle,#bbb 10px,#ddd 10px,#ddd 20px,#999 20px,#999 23px,transparent 23px),linear-gradient(55deg,transparent 40%,rgba(0,0,0,0.1) 50%,transparent 60%),linear-gradient(-80deg,rgba(255,255,255,0) 35%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0) 65%),linear-gradient(20deg,rgba(255,255,255,0) 35%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0) 65%);box-shadow:0 0 0 4px #ccc,-6px -6px 2px rgba(0,0,0,0.2);}
#cd div:before{width:160px;height:146px;left:-12px;top:114px;background-color:#eee;background-image:linear-gradient(to right,rgba(0,0,0,0.15),transparent 10px),linear-gradient(to top,#eee 60%,transparent 60%),linear-gradient(to left,transparent 35px,#be0974 35px,#be0974 55px,#da6a57 55px,#da6a57 75px,#eebc31 75px,#eebc31 95px,#92a25b 95px,#92a25b 115px,#46a7c0 115px,#46a7c0 135px,transparent 135px);box-shadow:-2px -1px 2px 0 rgba(0,0,0,0.2);}
#cd div:after{width:186px;height:154px;left:-34px;top:110px;background-color:rgba(255,255,255,0.2);background-image:linear-gradient(to right,rgba(255,255,255,0) 14px,rgba(255,255,255,0.4) 14px,rgba(255,255,255,0.4) 16px,rgba(255,255,255,0) 16px),linear-gradient(30deg,rgba(255,255,255,0) 30px,rgba(255,255,255,0.4) 60px,rgba(255,255,255,0) 90px);border:1px solid rgba(255,255,255,0.2);box-shadow:-3px -3px 2px rgba(0,0,0,0.2),inset -5px -5px 2px rgba(0,0,0,0.15),inset 3px 3px 2px rgba(0,0,0,0.1);}
#graham-cracker{background:#afeeee;}
#graham-cracker div{width:170px;height:170px;margin-left:-85px;margin-top:-85px;background:linear-gradient(140deg,#d2b48c,#c59f6b);border-radius:4px;box-shadow:7px 7px 0 -2px rgba(0,0,0,0.1),inset 5px 5px 4px rgba(255,255,255,0.4),inset -5px -5px 5px rgba(0,0,0,0.17);}
#graham-cracker div:before{height:170px;margin-left:85px;border-right:2px dashed rgba(255,255,255,0.15);border-left:2px dashed rgba(0,0,0,0.15);}
#graham-cracker div:after{width:6px;height:6px;left:20px;top:19px;background:#88734e;border-radius:50%;box-shadow:0 3px 2px 3px rgba(255,255,255,0.15),37px 0 0 #88734e,37px 3px 2px 3px rgba(255,255,255,0.15),87px 0 0 #88734e,87px 3px 2px 3px rgba(255,255,255,0.15),120px 0 0 #88734e,120px 3px 2px 3px rgba(255,255,255,0.15),19px 25px 0 #88734e,19px 28px 2px 3px rgba(255,255,255,0.15),104px 25px 0 #88734e,104px 28px 2px 3px rgba(255,255,255,0.15),0 50px 0 #88734e,2px 53px 2px 3px rgba(255,255,255,0.15),37px 50px 0 #88734e,37px 53px 2px 3px rgba(255,255,255,0.15),87px 50px 0 #88734e,87px 53px 2px 3px rgba(255,255,255,0.15),120px 50px 0 #88734e,120px 53px 2px 3px rgba(255,255,255,0.15),19px 75px 0 #88734e,19px 78px 2px 3px rgba(255,255,255,0.15),104px 75px 0 #88734e,104px 78px 2px 3px rgba(255,255,255,0.15),0 100px 0 #88734e,0 103px 2px 3px rgba(255,255,255,0.15),37px 100px 0 #88734e,37px 103px 2px 3px rgba(255,255,255,0.15),87px 100px 0 #88734e,87px 103px 2px 3px rgba(255,255,255,0.15),120px 100px 0 #88734e,120px 103px 2px 3px rgba(255,255,255,0.15),19px 125px 0 #88734e,19px 128px 2px 3px rgba(255,255,255,0.15),104px 125px 0 #88734e,104px 128px 2px 3px rgba(255,255,255,0.15);}
#marshmallow2{background:#97e9e9;}
#marshmallow2 div{width:100px;height:120px;margin-left:-50px;margin-top:-62px;background-color:#eee;background-image:radial-gradient(circle at 50% -70px,rgba(255,255,255,0.85) 48%,rgba(255,255,255,0) 53%),linear-gradient(-80deg,rgba(0,0,0,0.09),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 60%,rgba(255,255,255,0.8) 100%);border-top-left-radius:100px 32px;border-top-right-radius:100px 32px;border-bottom-left-radius:100px 40px;border-bottom-right-radius:100px 40px;box-shadow:6px 6px 0 -2px rgba(0,0,0,0.07);}
#chocolate{background:#7ce3e3;}
#chocolate div{width:150px;height:150px;margin-left:-75px;margin-top:-80px;background:linear-gradient(140deg,#8b4513,#793c11);border-radius:5px;border:3px solid rgba(255,255,255,0.35);border-right-color:rgba(0,0,0,0.3);border-bottom-color:rgba(0,0,0,0.3);box-shadow:7px 7px 0 -2px rgba(0,0,0,0.1);}
#chocolate div:before{top:4px;}
#chocolate div:after{bottom:3px;}
#chocolate div:before,#chocolate div:after{width:133px;height:20px;padding:22px 0 18px;left:4px;background:#7d3e11;border:5px solid rgba(255,255,255,0.35);border-right-color:rgba(0,0,0,0.3);border-bottom-color:rgba(0,0,0,0.3);border-radius:3px;box-shadow:inset 0 0 0 14px #8b4513,inset 0 -16px 1px rgba(255,255,255,0.3),inset 17px 17px 1px rgba(0,0,0,0.25);content:'HERSHEY鈥橲';font-family:Tahoma,Geneva,sans-serif;font-size:15px;color:rgba(0,0,0,0.4);text-shadow:1px 1px 0 rgba(255,255,255,0.15);}
.cactus div{width:120px;height:24px;margin-left:-60px;margin-top:50px;background:rgba(0,0,0,0.1);border-radius:50%;}
.cactus div:before{left:50%;z-index:2;background-image:linear-gradient(to left,rgba(0,0,0,0.1) 25%,rgba(0,0,0,0.05) 25%,rgba(0,0,0,0.05) 50%,rgba(0,0,0,0) 50%);border:5px solid #b8860b;}
.cactus div:after{left:50%;z-index:1;background:#90ee90;background-image:linear-gradient(to left,rgba(0,0,0,0.1) 20%,rgba(0,0,0,0.05) 20%,rgba(0,0,0,0.05) 46%,rgba(0,0,0,0) 46%),radial-gradient(rgba(255,255,255,0.8) 15%,rgba(255,255,255,0) 16%),repeating-linear-gradient(to right,#90ee90,#90ee90 8px,#5ee65e 8px,#5ee65e 16px);background-size:auto auto,15px 15px,auto auto;background-position:0 0,30px 30px,0 0;border:5px solid #b8860b;}
#cactus1{background:#f5deb3;}
#cactus1 div:before{width:100px;height:60px;margin-left:-55px;top:-56px;background-color:#f4a460;border-radius:8px 8px 30px 30px;}
#cactus1 div:after{width:60px;height:90px;margin-left:-35px;top:-140px;border-radius:44px 44px 0 0;}
#cactus2{background:#f2d399;}
#cactus2 div:before{width:100px;height:40px;margin-left:-55px;top:-36px;background-color:#d3d3d3;border-radius:8px 8px 50px 50px;}
#cactus2 div:after{width:70px;height:70px;margin-left:-40px;top:-80px;border-radius:50%;box-shadow:0 -45px 0 -33px #ffb6c1,-10px -38px 0 -33px #ffb6c1,10px -38px 0 -33px #ffb6c1,0 -45px 0 -28px #b8860b,-10px -38px 0 -28px #b8860b,10px -38px 0 -28px #b8860b;}
#cactus3{background:#eec77f;}
#cactus3 div:before{width:86px;height:50px;margin-left:-48px;top:-47px;background-color:#eee8aa;border-radius:8px 8px 14px 14px;}
#cactus3 div:after{width:60px;height:75px;margin-left:-35px;top:-120px;border-top-right-radius:40px 45px;border-top-left-radius:40px 45px;border-bottom-right-radius:40px 50px;border-bottom-left-radius:40px 50px;box-shadow:0 -48px 0 -30px #fa8072,0 -48px 0 -25px #b8860b;}
#inner-tube{background:#87ceeb;}
#inner-tube div,#inner-tube div:before,#inner-tube div:after{box-sizing:border-box;width:150px;height:150px;border-radius:50%;}
#inner-tube div{margin-left:-116px;margin-top:-40px;border:42px solid rgba(0,0,0,0.05);}
#inner-tube div:before{margin-top:-90px;border:42px solid #ff1493;border-top-color:#ffffe0;border-bottom-color:#ffffe0;box-shadow:inset -5px 5px 0 rgba(0,0,0,0.15),-5px 5px 0 rgba(0,0,0,0.15),-30px 0 0 2px rgba(255,255,255,0.1),0 -30px 0 -2px rgba(255,255,255,0.15),30px 0 0 2px rgba(255,255,255,0.1),0 30px 0 -2px rgba(255,255,255,0.15),120px 90px 0 -60px rgba(255,255,255,0.1),100px 100px 0 -50px rgba(255,255,255,0.1),110px -90px 0 -60px rgba(255,255,255,0.1),-120px -120px 0 -50px rgba(255,255,255,0.1);}
#inner-tube div:after{left:0;top:-90px;background:radial-gradient(circle,rgba(0,0,0,0) 32px,rgba(0,0,0,0.06) 32px,rgba(0,0,0,0.06) 40px,rgba(0,0,0,0) 40px,rgba(255,255,255,0) 55px,rgba(255,255,255,0.7) 55px,rgba(255,255,255,0.7) 62px,rgba(255,255,255,0) 62px,rgba(0,0,0,0) 70px,rgba(0,0,0,0.06) 70px);border-radius:50%;}
#popsicle{background:#abddf1;}
#popsicle div{width:90px;height:150px;margin-left:-45px;margin-top:-110px;background:#ff1493;border-radius:40px 40px 9px 9px;box-shadow:0 9px 0 white,-5px 13px 0 0 rgba(0,0,0,0.1),inset -10px 5px 0 -4px rgba(255,255,255,0.5),inset 7px -2px 0 rgba(0,0,0,0.05);}
#popsicle div:before{width:24px;height:60px;margin-left:-12px;left:50%;bottom:-64px;background:#ebbd68;background-image:linear-gradient(to bottom,rgba(0,0,0,0.15) 12px,rgba(0,0,0,0) 12px);border-radius:0 0 15px 15px;box-shadow:0 4px 0 #e4a530,-8px 9px 0 rgba(0,0,0,0.1);}
#popsicle div:after{width:18px;height:110px;left:20px;top:24px;background:rgba(0,0,0,0.05);border-radius:7px;box-shadow:30px 0 0 rgba(0,0,0,0.05);}
#embroidery{background:#faf0e6;z-index:-3;}
#embroidery div{width:50px;height:20px;margin-left:-25px;margin-top:-125px;background:linear-gradient(to right,transparent 5px,#cd853f 5px,#f0dac5 15px,#d9a46f 20px,transparent 20px,transparent 25px,#cd853f 25px,#f0dac5 30px,#d9a46f 35px,transparent 35px),linear-gradient(to bottom,transparent 7px,#c96d41 7px,#804224 11px,transparent 11px),radial-gradient(ellipse at bottom center,rgba(0,0,0,0.1),rgba(0,0,0,0) 60%);border-radius:50%;box-shadow:50px 20px 10px rgba(0,0,0,0.05),80px 45px 10px rgba(255,255,255,0.4),90px 70px 4px -9px rgba(0,0,0,0.2),100px 70px 10px -4px rgba(0,0,0,0.07),100px 95px 10px rgba(255,255,255,0.4),97px 120px 10px -7px rgba(0,0,0,0.2),100px 120px 20px rgba(0,0,0,0.1),110px 165px 40px rgba(255,255,255,0.8),60px 200px 18px -2px rgba(0,0,0,0.1),80px 200px 25px rgba(0,0,0,0.1),0 230px 20px rgba(0,0,0,0.1),-65px 45px 30px 5px rgba(0,0,0,0.1),-100px 70px 10px -9px rgba(0,0,0,0.2),-97px 70px 20px -4px rgba(0,0,0,0.1),-100px 90px 10px rgba(255,255,255,0.4),-108px 120px 10px -7px rgba(0,0,0,0.15),-120px 120px 25px rgba(0,0,0,0.1),-80px 200px 30px -5px rgba(0,0,0,0.3),-50px 220px 10px rgba(255,255,255,0.4);}
#embroidery div:before{box-sizing:border-box;width:220px;height:220px;margin-left:-110px;left:50%;top:14px;background:#fbf4ec;border:6px solid #d7bc98;border-radius:50%;box-shadow:inset -2px 2px 0 rgba(255,255,255,0.9),inset 2px -2px 5px rgba(0,0,0,0.15),0 5px 0 1px #be935a,-6px 8px 3px rgba(0,0,0,0.2),-12px 14px 5px rgba(0,0,0,0.1);}
#embroidery div:after{content:'脳';font-size:12px;line-height:1;font-weight:bold;color:#4682b4;top:120px;left:-42px;text-shadow:0 8px,0 16px,0 24px,0 32px,7px -8px,7px 40px,14px -8px,14px 40px,21px -8px,21px 40px,28px 0,28px 32px,42px 0,42px 8px,42px 40px,49px -8px,49px 16px,49px 32px,56px -8px,56px 16px,56px 40px,63px -8px,63px 16px,63px 40px,70px 0,70px 16px,70px 40px,77px -8px,77px 24px,77px 32px,91px 0,91px 8px,91px 40px,98px -8px,98px 16px,98px 32px,105px -8px,105px 16px,105px 40px,112px -8px,112px 16px,112px 40px,119px 0,119px 16px,119px 40px,126px -8px,126px 24px,126px 32px,42px -64px #c71585,42px -56px #c71585,49px -72px #c71585,49px -64px #c71585,49px -56px #c71585,49px -48px #c71585,56px -72px #c71585,56px -64px #c71585,56px -56px #c71585,56px -48px #c71585,56px -40px #c71585,63px -64px #c71585,63px -56px #c71585,63px -48px #c71585,63px -40px #c71585,63px -32px #c71585,70px -72px #c71585,70px -64px #c71585,70px -56px #c71585,70px -48px #c71585,70px -40px #c71585,77px -72px #c71585,77px -64px #c71585,77px -56px #c71585,77px -48px #c71585,84px -64px #c71585,84px -56px #c71585;}
@media (max-width:400px){#embroidery div{margin-top:-100px;}
}
#zipper{background:#4e6590;}
#zipper div{width:46px;height:240px;margin-left:-23px;margin-top:-115px;background:rgba(0,0,0,0.06) no-repeat;background-image:linear-gradient(to top,transparent 10px,#aaa 10px,#aaa 15px,#ccc 15px,#ccc 30px,transparent 30px),repeating-linear-gradient(to bottom,transparent,transparent 5px,#ddd 5px,#ddd 10px),repeating-linear-gradient(to bottom,#ccc,#ccc 5px,transparent 5px,transparent 10px);background-size:26px 100%,15px 230px,15px 230px;background-position:10px 0,10px 0,21px 0;border-radius:0 0 5px 5px;border:2px dashed #8fa1c2;border-top:none;}
#zipper div:before{width:40px;height:24px;margin-left:-20px;left:50%;top:-10px;background:linear-gradient(to right,transparent 35%,#ddd 35%,#ddd 50%,#ccc 50%,#ccc 65%,rgba(0,0,0,0.1) 65%,rgba(0,0,0,0.1) 75%,transparent 75%),linear-gradient(to right,#aaa 50%,#999 50%);border-radius:50px/15px;box-shadow:0 5px 0 rgba(0,0,0,0.2);}
#zipper div:after{box-sizing:border-box;width:32px;height:70px;margin-left:-16px;left:50%;top:8px;background:rgba(0,0,0,0.4) no-repeat;background-image:linear-gradient(to bottom,transparent 16px,#ccc 16px,#ccc 50px,transparent 50px),linear-gradient(to right,transparent 3px,#ddd 3px,#ddd 9px,#ccc 9px,#ccc 15px,rgba(0,0,0,0.1) 15px,rgba(0,0,0,0.1) 18px,transparent 18px),linear-gradient(to bottom,#ccc 7px,transparent 7px);background-size:100% 100%,100% 12px;border-radius:2px 2px 4px 4px;border:7px solid #ccc;border-top:none;box-shadow:0 5px 0 rgba(0,0,0,0.3);}
#jeans-pocket{background:#5872a3;}
#jeans-pocket div,#jeans-pocket div:before,#jeans-pocket div:after{box-sizing:border-box;}
#jeans-pocket div{width:200px;height:200px;margin-left:-100px;margin-top:-94px;background:#536c99;border-bottom-right-radius:80px 40px;border-bottom-left-radius:80px 40px;border:2px dashed #8fa1c2;box-shadow:0 0 0 8px #5872a3,0 0 0 10px rgba(0,0,0,0.1),5px 5px 0 8px rgba(0,0,0,0.2);}
#jeans-pocket div:before{width:220px;height:100px;left:50%;top:-15px;margin-left:-110px;background:#556e9d no-repeat;background-image:linear-gradient(to bottom,#8fa1c2 3px,transparent 3px),linear-gradient(to right,#8fa1c2 3px,rgba(0,0,0,0.3) 3px,rgba(0,0,0,0.3) 6px,#8fa1c2 6px,#8fa1c2 9px,transparent 9px);background-size:9px 3px,9px 40px;background-position:center 35%,center 60%;border-radius:5px 5px 50% 50%;border:2px dashed #8fa1c2;box-shadow:0 0 0 8px #5872a3,0 0 0 10px rgba(0,0,0,0.1),0 8px 0 8px rgba(0,0,0,0.2);}
#jeans-pocket div:after{width:34px;height:34px;left:50%;top:36px;margin-left:-17px;background:#b68c70;background-image:radial-gradient(circle,#a88b51 2px,rgba(0,0,0,0.3) 2px,rgba(0,0,0,0.3) 5px,#b79c59 5px,#b79c59 8px,rgba(0,0,0,0.4) 8px);border-radius:50%;border:3px solid #948042;border-top-color:#dbc178;box-shadow:2px 3px 0 rgba(0,0,0,0.15);}

CSS代码(reset.css):

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

附件:下载该文件资源,减少时间成本(增值服务)