Skip to content

Instantly share code, notes, and snippets.

@girvan

girvan/gist:4160133

Created November 28, 2012 09:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save girvan/4160133 to your computer and use it in GitHub Desktop.
Save girvan/4160133 to your computer and use it in GitHub Desktop.
Download ZIP
OO邦如何產生 icons
Raw
gistfile1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-Hant" xmlns:fb="http://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#" >
<!-- 1352565810 generated -->
<head>
<meta charset="utf-8" />
<style type="text/css">
.site {
width:126px;
height:126px;
border: 1px solid gray;
float:left;
margin-left:20px;
margin-bottom:10px;
position:relative;
overflow:hidden;
}
.w {
display:inline-block;
position:absolute;
font-family:微軟正黑體;
font-weight:bold;
font-size:20px;
}
.w1 {
font-size:96px;
width:126px;
text-align:center;
text-shadow: 6px 5px 10px;
-webkit-transform:
scale(1) rotate(8deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
top:5px;
}
.badget {
-webkit-transform:
scale(1) rotate(-45deg) translateX(-20px) translateY(-20px) skewX(0deg) skewY(0deg);
font-size:20px;
font-family:微軟正黑體;
font-weight:bold;
padding:3px 5px;
padding-left:20px;
background: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/hot-sneaks/images/ui-bg_diagonals-small_50_93c3cd_40x40.png);
}
.fashion {
/*
background:
#FEEEBD url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/sunny/images/ui-bg_highlight-soft_100_feeebd_1x100.png) 50% top repeat-x;
*/
background:
url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/hot-sneaks/images/ui-bg_diagonals-small_40_db4865_40x40.png);
}
.fashion .w1 {
color: MistyRose ;
text-shadow:none;
text-shadow: 3px 5px 4px black;
}
.fashion .badget {
border-top: 1px dashed black;
border-bottom: 1px dashed black;
background: plum;
}
.comic {
background-color: khaki;
}
.comic .w1 {
color: brown;
text-shadow: 5px 3px 15px;
}
.comic .badget {
background: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/sunny/images/ui-bg_highlight-soft_100_feeebd_1x100.png);
border-top: 1px dashed gray;
border-bottom: 1px dashed gray;
}
.recipe {
background-color:seashell;
}
.recipe .w1 {
color:darkgreen;
text-shadow: 6px 5px 7px gray;
}
.recipe .badget {
color:white;
background:#CC0000;
}
.food {
background: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/blitzer/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png);
}
.food .w1 {
color:purple;
text-shadow: 3px 5px 4px gray;
}
.food .badget {
background: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/hot-sneaks/images/ui-bg_diagonals-small_40_db4865_40x40.png);
color: whitesmoke;
}
.travel {
background-color: PaleGoldenRod ;
}
.travel .w1 {
color:MidnightBlue;
text-shadow: 6px 5px 7px DimGray ;
}
.travel .badget {
background: orange ;
border-top: 1px dashed black;
border-bottom: 1px dashed black;
}
.notice { color:red; }
.demo { display:none; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
.notice { display:none; }
.demo { display:block; }
}
</style>
</head>
<body>
<script>
var sites = {"fashion":{"badget":"\u7f8e\u599d\u90a6","w1":"\u599d"},"comic":{"badget":"\u6f2b\u756b\u90a6","w1":"\u6f2b"},"recipe":{"badget":"\u98df\u8b5c\u90a6","w1":"\u716e"},"food":{"badget":"\u7f8e\u98df\u90a6","w1":"\u5403"},"travel":{"badget":"\u65c5\u904a\u90a6","w1":"\u65c5"},"software":{"badget":"\u8edf\u9ad4\u90a6","w1":"\u8edf"}};
</script>
<h1 class="notice">Error!! Webkit(chrome / safari) only</h1>
<div class="demo">
<div class="fashion site">
<div class="w w1">妝</div>
<div class="badget">美妝邦</div>
</div>
<div class="comic site">
<div class="w w1">漫</div>
<div class="badget">漫畫邦</div>
</div>
<div class="recipe site">
<div class="w w1">煮</div>
<div class="badget">食譜邦</div>
</div>
<div class="food site">
<div class="w w1">吃</div>
<div class="badget">美食邦</div>
</div>
<div class="travel site">
<div class="w w1">旅</div>
<div class="badget">旅遊邦</div>
</div>
<div class="software site">
<div class="w w1">軟</div>
<div class="badget">軟體邦</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment