Skip to content

Instantly share code, notes, and snippets.

@ghanbari

ghanbari/css sans

Created April 15, 2019 21:00
Show Gist options
  • Save ghanbari/df85b5607e2777b1e80955311f5ea62e to your computer and use it in GitHub Desktop.
Save ghanbari/df85b5607e2777b1e80955311f5ea62e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css sans
/*!
* css-sans.css v1.0.0
* (c) 2015 Yusuke Sugomori
* MIT License | http://yusugomori.com/license/mit
*/
.A {
position: relative;
left: 30px;
width: 60px;
height: 91px;
border-bottom: solid 14px #000000;
}
.A:before {
-webkit-transform: skew(-19deg, 0);
-moz-transform: skew(-19deg, 0);
-ms-transform: skew(-19deg, 0);
-o-transform: skew(-19deg, 0);
transform: skew(-19deg, 0);
position: absolute;
content: '';
top: 12.5px;
left: 0;
width: 16px;
height: 125px;
background-color: #000000;
}
.A:after {
-webkit-transform: skew(19deg, 0);
-moz-transform: skew(19deg, 0);
-ms-transform: skew(19deg, 0);
-o-transform: skew(19deg, 0);
transform: skew(19deg, 0);
position: absolute;
content: '';
top: 12.5px;
left: 45px;
width: 16px;
height: 125px;
background-color: #000000;
}
.B {
position: relative;
top: 12.5px;
left: 10px;
width: 60px;
height: 125px;
border-left: solid 16px #000000;
}
.B:before {
position: absolute;
content: '';
width: 52px;
height: 39px;
border-width: 15px 15px 10px 0;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 0 240% 180% 0 / 0 180% 180% 0;
-moz-border-radius: 0 240% 180% 0 / 0 180% 180% 0;
-ms-border-radius: 0 240% 180% 0 / 0 180% 180% 0;
-o-border-radius: 0 240% 180% 0 / 0 180% 180% 0;
border-radius: 0 240% 180% 0 / 0 180% 180% 0;
}
.B:after {
position: absolute;
content: '';
bottom: 0;
width: 58px;
height: 43px;
border-width: 10px 15px 15px 0;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 0 180% 220% 0 / 0 180% 180% 0;
-moz-border-radius: 0 180% 220% 0 / 0 180% 180% 0;
-ms-border-radius: 0 180% 220% 0 / 0 180% 180% 0;
-o-border-radius: 0 180% 220% 0 / 0 180% 180% 0;
border-radius: 0 180% 220% 0 / 0 180% 180% 0;
}
.C {
position: relative;
top: 12.5px;
left: 10px;
width: 84px;
height: 95px;
border-width: 15px 12px 15px 16px;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.C:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
content: '';
top: 2px;
left: 49px;
background-color: #ffffff;
width: 90px;
height: 90px;
}
.D {
position: relative;
top: 12.5px;
left: 10px;
border-left: solid 15px #000000;
height: 125px;
}
.D:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 60px;
height: 95px;
border-width: 15px 15px 15px 0;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 0 300% 300% 0 / 0 180% 180% 0;
-moz-border-radius: 0 300% 300% 0 / 0 180% 180% 0;
-ms-border-radius: 0 300% 300% 0 / 0 180% 180% 0;
-o-border-radius: 0 300% 300% 0 / 0 180% 180% 0;
border-radius: 0 300% 300% 0 / 0 180% 180% 0;
}
.E {
position: relative;
top: 12.5px;
left: 10px;
width: 63px;
height: 95px;
border-width: 15px 0 15px 16px;
border-color: #000000;
border-style: solid;
}
.E:before {
position: absolute;
content: '';
top: 38px;
left: 0px;
width: 53px;
height: 15px;
background-color: #000000;
}
.F {
position: relative;
top: 12.5px;
left: 10px;
width: 63px;
height: 110px;
border-width: 15px 0 0 16px;
border-color: #000000;
border-style: solid;
}
.F:before {
position: absolute;
content: '';
top: 38px;
left: 0px;
width: 53px;
height: 15px;
background-color: #000000;
}
.G {
position: relative;
top: 12.5px;
left: 10px;
width: 84px;
height: 95px;
border-width: 15px 12px 15px 16px;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.G:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
content: '';
top: 2px;
left: 48px;
background-color: #ffffff;
width: 90px;
height: 90px;
}
.G:after {
position: absolute;
content: '';
bottom: 0.5px;
right: 7px;
width: 28px;
height: 36px;
border-width: 13px 14px 0 0;
border-color: #000000;
border-style: solid;
}
.H {
position: relative;
top: 12.5px;
left: 10px;
width: 60px;
height: 125px;
border-width: 0 16px 0 16px;
border-color: #000000;
border-style: solid;
}
.H:before {
position: absolute;
content: '';
top: 53px;
left: 0;
width: 60px;
height: 14px;
background-color: #000000;
}
.I {
z-index: 1;
position: relative;
top: 12.5px;
left: 20px;
width: 16px;
height: 125px;
background-color: #000000;
}
.J {
position: relative;
top: 12.5px;
left: -5px;
width: 75px;
height: 66px;
border-right: solid 16px #000000;
}
.J:before {
position: absolute;
content: '';
bottom: -60px;
right: -16px;
width: 50px;
height: 60px;
border-width: 0 16px 15px 14px;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 0 0 75% 75%;
-moz-border-radius: 0 0 75% 75%;
-ms-border-radius: 0 0 75% 75%;
-o-border-radius: 0 0 75% 75%;
border-radius: 0 0 75% 75%;
}
.J:after {
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
transform: rotate(-40deg);
position: absolute;
content: '';
top: 40px;
left: -20px;
width: 60px;
height: 60px;
background-color: #ffffff;
}
.K {
position: relative;
top: 12.5px;
left: 10px;
width: 80px;
height: 125px;
border-left: solid 16px #000000;
overflow: hidden;
}
.K:before {
-webkit-transform: skew(-43deg, 0);
-moz-transform: skew(-43deg, 0);
-ms-transform: skew(-43deg, 0);
-o-transform: skew(-43deg, 0);
transform: skew(-43deg, 0);
position: absolute;
content: '';
top: 0;
left: 16px;
width: 19px;
height: 84px;
background-color: #000000;
}
.K:after {
-webkit-transform: skew(30deg, 0);
-moz-transform: skew(30deg, 0);
-ms-transform: skew(30deg, 0);
-o-transform: skew(30deg, 0);
transform: skew(30deg, 0);
position: absolute;
content: '';
bottom: 0;
right: 25px;
width: 18px;
height: 80px;
background-color: #000000;
}
.L {
position: relative;
top: 12.5px;
left: 10px;
width: 63px;
height: 110px;
border-width: 0 0 15px 16px;
border-color: #000000;
border-style: solid;
}
.M {
position: relative;
top: 12.5px;
left: 10px;
width: 80px;
height: 125px;
border-width: 0 15px 0 15px;
border-color: #000000;
border-style: solid;
}
.M:before {
-webkit-transform: skew(20deg, 0);
-moz-transform: skew(20deg, 0);
-ms-transform: skew(20deg, 0);
-o-transform: skew(20deg, 0);
transform: skew(20deg, 0);
position: absolute;
content: '';
top: 0;
left: 14px;
width: 12px;
height: 110px;
background-color: #000000;
}
.M:after {
-webkit-transform: skew(-20deg, 0);
-moz-transform: skew(-20deg, 0);
-ms-transform: skew(-20deg, 0);
-o-transform: skew(-20deg, 0);
transform: skew(-20deg, 0);
position: absolute;
content: '';
top: 0;
right: 14px;
width: 12px;
height: 110px;
background-color: #000000;
}
.N {
position: relative;
top: 12.5px;
left: 10px;
width: 63px;
height: 125px;
border-width: 0 15px 0 15px;
border-color: #000000;
border-style: solid;
}
.N:before {
-webkit-transform: skew(30deg, 0);
-moz-transform: skew(30deg, 0);
-ms-transform: skew(30deg, 0);
-o-transform: skew(30deg, 0);
transform: skew(30deg, 0);
position: absolute;
content: '';
top: 0;
left: 24px;
width: 15px;
height: 125px;
background-color: #000000;
}
.O {
position: relative;
top: 12.5px;
left: 10px;
width: 70px;
height: 97px;
border-width: 14px 16px 14px 16px;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 55% / 52%;
-moz-border-radius: 55% / 52%;
-ms-border-radius: 55% / 52%;
-o-border-radius: 55% / 52%;
border-radius: 55% / 52%;
}
.P {
position: relative;
top: 12.5px;
left: 10px;
width: 60px;
height: 125px;
border-left: solid 16px #000000;
}
.P:before {
position: absolute;
content: '';
width: 56px;
height: 50px;
border-width: 13px 15px 13px 0;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
-moz-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
-ms-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
-o-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
border-radius: 0 220% 220% 0 / 0 180% 180% 0;
}
.Q {
z-index: -1;
position: relative;
top: 12.5px;
left: 10px;
width: 70px;
height: 97px;
border-width: 14px 16px 14px 16px;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 55% / 52%;
-moz-border-radius: 55% / 52%;
-ms-border-radius: 55% / 52%;
-o-border-radius: 55% / 52%;
border-radius: 55% / 52%;
}
.Q:before {
-webkit-transform: rotate(-84deg);
-moz-transform: rotate(-84deg);
-ms-transform: rotate(-84deg);
-o-transform: rotate(-84deg);
transform: rotate(-84deg);
position: absolute;
content: '';
top: 82px;
left: 49px;
width: 16px;
height: 48px;
border-width: 16px 0 13px 13px;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 200% 0 0 200% / 100% 0 0 100%;
-moz-border-radius: 200% 0 0 200% / 100% 0 0 100%;
-ms-border-radius: 200% 0 0 200% / 100% 0 0 100%;
-o-border-radius: 200% 0 0 200% / 100% 0 0 100%;
border-radius: 200% 0 0 200% / 100% 0 0 100%;
}
.Q:after {
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
transform: rotate(-18deg);
position: absolute;
content: '';
bottom: -35px;
right: -44px;
width: 30px;
height: 30px;
background-color: #ffffff;
}
.R {
position: relative;
top: 12.5px;
left: 10px;
width: 60px;
height: 125px;
border-left: solid 16px #000000;
}
.R:before {
position: absolute;
content: '';
width: 52px;
height: 44px;
border-width: 13px 15px 13px 0;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
-moz-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
-ms-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
-o-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
border-radius: 0 220% 220% 0 / 0 180% 180% 0;
}
.R:after {
-webkit-transform: skew(32deg, 0);
-moz-transform: skew(32deg, 0);
-ms-transform: skew(32deg, 0);
-o-transform: skew(32deg, 0);
transform: skew(32deg, 0);
position: absolute;
content: '';
bottom: 0;
left: 38px;
width: 18px;
height: 58px;
background-color: #000000;
}
.S {
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
-ms-transform: rotate(14deg);
-o-transform: rotate(14deg);
transform: rotate(14deg);
position: relative;
width: 105px;
height: 150px;
top: 10px;
left: 10px;
}
.S:before {
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
transform: rotate(18deg);
position: absolute;
content: '';
width: 44px;
height: 40px;
border-width: 14px 0 15px 15.5px;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 220% 0 0 150% / 150% 0 0 100%;
-moz-border-radius: 220% 0 0 150% / 150% 0 0 100%;
-ms-border-radius: 220% 0 0 150% / 150% 0 0 100%;
-o-border-radius: 220% 0 0 150% / 150% 0 0 100%;
border-radius: 220% 0 0 150% / 150% 0 0 100%;
}
.S:after {
-webkit-transform: rotate(198deg);
-moz-transform: rotate(198deg);
-ms-transform: rotate(198deg);
-o-transform: rotate(198deg);
transform: rotate(198deg);
position: absolute;
content: '';
top: 65px;
left: 21px;
width: 52px;
height: 44px;
border-width: 14px 0 15px 15px;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 240% 0 0 110% / 140% 0 0 100%;
-moz-border-radius: 240% 0 0 110% / 140% 0 0 100%;
-ms-border-radius: 240% 0 0 110% / 140% 0 0 100%;
-o-border-radius: 240% 0 0 110% / 140% 0 0 100%;
border-radius: 240% 0 0 110% / 140% 0 0 100%;
}
.T {
position: relative;
top: 12.5px;
left: 10px;
width: 100px;
height: 125px;
border-top: solid 15px #000000;
}
.T:before {
position: absolute;
content: '';
top: 0;
left: 42px;
width: 16px;
height: 110px;
background-color: #000000;
}
.U {
position: relative;
top: 12.5px;
left: 10px;
width: 60px;
height: 80px;
border-width: 0 16px 0 16px;
border-color: #000000;
border-style: solid;
}
.U:before {
position: absolute;
content: '';
top: 65px;
left: -16px;
width: 60px;
height: 45px;
border-width: 0 16px 15px 16px;
border-color: #000000;
border-style: solid;
-webkit-border-radius: 0 0 200% 200% / 0 0 300% 300%;
-moz-border-radius: 0 0 200% 200% / 0 0 300% 300%;
-ms-border-radius: 0 0 200% 200% / 0 0 300% 300%;
-o-border-radius: 0 0 200% 200% / 0 0 300% 300%;
border-radius: 0 0 200% 200% / 0 0 300% 300%;
}
.V {
position: relative;
top: 12.5px;
left: 30px;
width: 59px;
}
.V:before {
-webkit-transform: skew(18deg, 0);
-moz-transform: skew(18deg, 0);
-ms-transform: skew(18deg, 0);
-o-transform: skew(18deg, 0);
transform: skew(18deg, 0);
position: absolute;
content: '';
top: 0;
left: 0;
height: 125px;
border-left: solid 16px #000000;
}
.V:after {
-webkit-transform: skew(-18deg, 0);
-moz-transform: skew(-18deg, 0);
-ms-transform: skew(-18deg, 0);
-o-transform: skew(-18deg, 0);
transform: skew(-18deg, 0);
position: absolute;
content: '';
top: 0;
right: 0;
height: 125px;
border-left: solid 16px #000000;
}
.W {
position: relative;
top: 12.5px;
left: 25px;
width: 100px;
}
.W:before {
-webkit-transform: skew(11deg, 0);
-moz-transform: skew(11deg, 0);
-ms-transform: skew(11deg, 0);
-o-transform: skew(11deg, 0);
transform: skew(11deg, 0);
position: absolute;
content: '';
top: 0;
left: 0;
width: 42px;
height: 125px;
border-width: 0 13px 0 15px;
border-color: #000000;
border-style: solid;
}
.W:after {
-webkit-transform: skew(-11deg, 0);
-moz-transform: skew(-11deg, 0);
-ms-transform: skew(-11deg, 0);
-o-transform: skew(-11deg, 0);
transform: skew(-11deg, 0);
position: absolute;
content: '';
top: 0;
right: 0;
width: 42px;
height: 125px;
border-width: 0 15px 0 13px;
border-color: #000000;
border-style: solid;
}
.X {
position: relative;
top: 12.5px;
left: 50px;
width: 16px;
height: 125px;
}
.X:before {
-webkit-transform: skew(32deg, 0);
-moz-transform: skew(32deg, 0);
-ms-transform: skew(32deg, 0);
-o-transform: skew(32deg, 0);
transform: skew(32deg, 0);
position: absolute;
content: '';
top: 0;
left: 0;
width: 16px;
height: 125px;
background-color: #000000;
}
.X:after {
-webkit-transform: skew(-32deg, 0);
-moz-transform: skew(-32deg, 0);
-ms-transform: skew(-32deg, 0);
-o-transform: skew(-32deg, 0);
transform: skew(-32deg, 0);
position: absolute;
content: '';
top: 0;
right: 0;
width: 16px;
height: 125px;
background-color: #000000;
}
.Y {
position: relative;
top: 92.5px;
left: 52px;
width: 16px;
height: 50px;
background-color: #000000;
}
.Y:before {
-webkit-transform: skew(28deg, 0);
-moz-transform: skew(28deg, 0);
-ms-transform: skew(28deg, 0);
-o-transform: skew(28deg, 0);
transform: skew(28deg, 0);
position: absolute;
content: '';
top: -80px;
left: -21px;
width: 16px;
height: 80px;
background-color: #000000;
}
.Y:after {
-webkit-transform: skew(-28deg, 0);
-moz-transform: skew(-28deg, 0);
-ms-transform: skew(-28deg, 0);
-o-transform: skew(-28deg, 0);
transform: skew(-28deg, 0);
position: absolute;
content: '';
top: -80px;
right: -21px;
width: 16px;
height: 80px;
background-color: #000000;
}
.Z {
position: relative;
top: 12.5px;
left: 10px;
width: 90px;
height: 95px;
border-width: 15px 0 15px 0;
border-color: #000000;
border-style: solid;
}
.Z:before {
-webkit-transform: skew(-37deg, 0);
-moz-transform: skew(-37deg, 0);
-ms-transform: skew(-37deg, 0);
-o-transform: skew(-37deg, 0);
transform: skew(-37deg, 0);
position: absolute;
content: '';
top: 0;
left: 36px;
width: 18px;
height: 95px;
background-color: #000000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment