Skip to content

Instantly share code, notes, and snippets.

@jampow

jampow/index.html

Created November 10, 2012 12:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jampow/4050947 to your computer and use it in GitHub Desktop.
Save jampow/4050947 to your computer and use it in GitHub Desktop.
Download ZIP
CSS icons framework
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS Icons framework</title>
</head>
<body>
<!-- http://cssdeck.com/labs/full/wejziql0/0 -->
<div class="triangle white-right small"></div>
<div class="triangle white-left small"></div>
<div class="triangle white-right medium"></div>
<div class="triangle white-left medium"></div>
<div class="triangle white-right big"></div>
<div class="triangle white-left big"></div>
<div class="triangle white-up small"></div>
<div class="triangle white-down small"></div>
<div class="triangle white-up medium"></div>
<div class="triangle white-down medium"></div>
<div class="triangle white-up big"></div>
<div class="triangle white-down big"></div>
<div class="triangle grey-right small"></div>
<div class="triangle grey-left small"></div>
<div class="triangle grey-right medium"></div>
<div class="triangle grey-left medium"></div>
<div class="triangle grey-right big"></div>
<div class="triangle grey-left big"></div>
<div class="triangle grey-up small"></div>
<div class="triangle grey-down small"></div>
<div class="triangle grey-up medium"></div>
<div class="triangle grey-down medium"></div>
<div class="triangle grey-up big"></div>
<div class="triangle grey-down big"></div>
<div class="triangle black-right small"></div>
<div class="triangle black-left small"></div>
<div class="triangle black-right medium"></div>
<div class="triangle black-left medium"></div>
<div class="triangle black-right big"></div>
<div class="triangle black-left big"></div>
<div class="triangle black-up small"></div>
<div class="triangle black-down small"></div>
<div class="triangle black-up medium"></div>
<div class="triangle black-down medium"></div>
<div class="triangle black-up big"></div>
<div class="triangle black-down big"></div>
<div class="arrow white right small"></div>
<div class="arrow white left small"></div>
<div class="arrow white right medium"></div>
<div class="arrow white left medium"></div>
<div class="arrow white right big"></div>
<div class="arrow white left big"></div>
<div class="arrow white up small"></div>
<div class="arrow white down small"></div>
<div class="arrow white up medium"></div>
<div class="arrow white down medium"></div>
<div class="arrow white up big"></div>
<div class="arrow white down big"></div>
<div class="arrow grey right small"></div>
<div class="arrow grey left small"></div>
<div class="arrow grey right medium"></div>
<div class="arrow grey left medium"></div>
<div class="arrow grey right big"></div>
<div class="arrow grey left big"></div>
<div class="arrow grey up small"></div>
<div class="arrow grey down small"></div>
<div class="arrow grey up medium"></div>
<div class="arrow grey down medium"></div>
<div class="arrow grey up big"></div>
<div class="arrow grey down big"></div>
<div class="arrow black right small"></div>
<div class="arrow black left small"></div>
<div class="arrow black right medium"></div>
<div class="arrow black left medium"></div>
<div class="arrow black right big"></div>
<div class="arrow black left big"></div>
<div class="arrow black up small"></div>
<div class="arrow black down small"></div>
<div class="arrow black up medium"></div>
<div class="arrow black down medium"></div>
<div class="arrow black up big"></div>
<div class="arrow black down big"></div>
<div class="arrow white down med check"></div>
<div class="arrow grey down med check"></div>
<div class="arrow black down med check"></div>
<div class="x white small"></div>
<div class="x grey small"></div>
<div class="x black small"></div>
<div class="x white medium"></div>
<div class="x grey medium"></div>
<div class="x black medium"></div>
<div class="option checked"></div>
<div class="option "></div>
</body>
</html>
Raw
style.css
body { background-color: #47519b; }
.triangle {
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
margin: 3px;
}
.triangle.white-right{border-left-color: #fff;border-right: 0;}
.triangle.white-left {border-right-color: #fff;border-left: 0;}
.triangle.white-up {border-bottom-color:#fff;border-top: 0;}
.triangle.white-down {border-top-color: #fff;border-bottom: 0;}
.triangle.grey-right{border-left-color: #999;border-right: 0;}
.triangle.grey-left {border-right-color: #999;border-left: 0;}
.triangle.grey-up {border-bottom-color:#999;border-top: 0;}
.triangle.grey-down {border-top-color: #999;border-bottom: 0;}
.triangle.black-right{border-left-color: #333;border-right: 0;}
.triangle.black-left {border-right-color: #333;border-left: 0;}
.triangle.black-up {border-bottom-color:#333;border-top: 0;}
.triangle.black-down {border-top-color: #333;border-bottom: 0;}
.triangle.small {border-width: 4px;}
.triangle.medium{border-width: 7px;}
.triangle.big {border-width: 9px;}
.arrow {
border-style: solid;
border-left: 0;
border-top: 0;
width: 10px;
height: 10px;
margin: 15px;
}
.arrow.right{
/*transform*/
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.arrow.left{
/*transform*/
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-o-transform:rotate(135deg);
transform:rotate(135deg);
}
.arrow.up {
/*transform*/
-webkit-transform:rotate(-135deg);
-moz-transform:rotate(-135deg);
-ms-transform:rotate(-135deg);
-o-transform:rotate(-135deg);
transform:rotate(-135deg);
}
.arrow.down{
/*transform*/
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.arrow.white {border-color:#fff;}
.arrow.grey {border-color:#999;}
.arrow.black {border-color:#333;}
.arrow.small {width: 5px; height: 5px; border-width:1px}
.arrow.medium{width: 6px; height: 6px; border-width:2px}
.arrow.big {width: 10px; height: 10px; border-width:2px}
.arrow.down.small.check {height: 10px;}
.arrow.down.medium.check{height: 13px; border-width: 3px;}
.arrow.down.big.check {height: 40px;}
.x:after {content: '\2715'};
.x.small {font-size: 14px;}
.x.medium{font-size: 18px;}
.x.big {font-size: 50px;}
.x.merda {font-size: 14px;}
.x.white{color: #fff;}
.x.grey {color: #999;}
.x.black{color: #333;}
.option {
border: 1px #777 solid;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 10px;
height: 10px;
background-color: #fff;
position: relative;
margin: 3px;
}
.option:hover::after {
content: '';
background-color: #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 6px;
height: 6px;
position: absolute;
top: 2px;
left: 2px;
}
.option.checked::after {
content: '';
background-color: #f00;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 6px;
height: 6px;
position: absolute;
top: 2px;
left: 2px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment