Posted By

jeremyjared74 on 11/22/11

Tagged

css
html

Versions (?)

Last Edited at 11/22/11 10:59am

Statistics

Viewed 568 times

Favorited by 1 user(s)

Related snippets

CSS and ASCII Icons

/ Published in: CSS

Just a little fun with ASCII Characters and CSS.

Highlighted TextExpand

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ascii Characters</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

html {
font:62.5%/1.5 "Lucida Grande", Verdana, sans-serif;
}

ul,ol,dl,p {
margin-bottom:1.5em;
font-size:1.2em;
}

li,dt,dd,p {
font-size:1.2em;
}

ul,ol,dl,p {
margin-bottom:1.5em;
}

li,dt,dd,p {
font-size:1.2em;
}

ul,ol,dl {
margin-bottom:1.8em;
}

p {
margin-bottom:1.5em;
}

/***** Global Settings *****/
html,body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}

/***** Headings *****/
h1,h2,h3,h4,h5,h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
padding:30px 0 25px;
letter-spacing:-1px;
font-size:2em;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}

h3 {
font-size:1em;
font-weight:bold;
}

/***** Common Formatting *****/
p,ul,ol {
margin:0;
padding:0 0 1.25em;
}

ul,ol {
padding:0 0 1.25em 2.5em;
}

blockquote {
margin:1.25em;
padding:1.25em 1.25em 0;
}

small {
font-size:.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-.2em;
vertical-align:baseline;
}

acronym,abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/
a,a:link,a:visited,a:hover {
text-decoration:underline;
}

/***** Forms *****/
form {
margin:0;
padding:0;
display:inline;
}

form input,form select,form textarea {
font:1em Arial, Helvetica, sans-serif;
}

form textarea {
width:100%;
line-height:1.25;
}

form label {
cursor:pointer;
}

/***** Tables *****/
table {
border:0;
margin:0 0 1.25em;
padding:0;
}

table tr td {
padding:2px;
}

/***** Wrapper *****/
#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/
.clear {
clear:both;
}

.float-left {
float:left;
}

.float-right {
float:right;
}

.text-left {
text-align:left;
}

.text-right {
text-align:right;
}

.text-center {
text-align:center;
}

.text-justify {
text-align:justify;
}

.bold {
font-weight:bold;
}

.italic {
font-style:italic;
}

.underline {
border-bottom:1px solid;
}

.highlight {
background:#ffc;
}

.wrap {
width:960px;
margin:0 auto;
}

.img-left {
float:left;
margin:4px 10px 4px 0;
}

.img-right {
float:right;
margin:4px 0 4px 10px;
}

.nopadding {
padding:0;
}

.noindent {
margin-left:0;
padding-left:0;
}

.nobullet {
list-style:none;
list-style-image:none;
}

* {
margin:0;
padding:0;
}

body {
font:13px Verdana, Sans-Serif;
}

#page-wrap {
margin:80px auto;
width:90%;
}

div {
font-family:HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
font-size:92px;
color:hsla(0,50%,50%,1);
}

div:hover {
color:black;
}

h1 {
font:bold 50px Sans-Serif;
letter-spacing:-1px;
}

h2 {
margin-top:30px;
}

h3 {
font-size:30px;
}

a {
text-decoration:none;
}

.section {
font-size:20px;
text-align:center;
font-weight:700;
padding:10px;
display:block;
border-radius:6px;
background:white;
border:3px solid hsla(0,50%,50%,1);
}

.clear {
width:100%;
height:10px;
padding:20px 0;
margin-bottom:10px;
float:left;
}

.clear:after {
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}

.clear {
display:inline-block;
}

html[xmlns] .clear {
display:block;
}

* html .clear {
height:1%;
}

.box {
display:inline-block;
padding:10px;
}

.box:after {
content:" ";
width:100%;
height:100%;
float:left;
clear:both;
margin:0;
padding:0;
}

strong {
font-weight:700;
font-size:120%;
}

div.section-wrap {
display:block;
height:100%;
width:80%;
padding:40px;
margin:0 auto;
border:4px solid hsla(0,50%,50%,1);
margin-bottom:70px;
border-radius:12px;
background:ghostwhite;
}

body {
background:#e5e6e6;
}
</style>
</head>
<body>
<div id="page-wrap">
  <div class="section-wrap">
    <div class="box">&#9774;</div>
    <div class="box">&#9745;</div>
    <div class="box">&#10004;</div>
    <div class="box">&#9760;</div>
    <div class="box">&copy;</div>
    <div class="box">&#9753;</div>
    <div class="box">&#x2766;</div>
    <div class="box">&#8470;</div>
    <div class="box">&reg;</div>
    <div class="box">&amp;</div>
    <div class="box">?</div>
    <div class="box">&ldquo;</div>
    <div class="box">&rdquo;</div>
    <div class="box">&ldquo;</div>
    <div class="box">&rdquo;</div>
    <div class="box">&laquo;</div>
    <div class="box">&raquo;</div>
    <div class="box">&lsquo;</div>
    <div class="box">&rsquo;</div>
    <div class="clear"></div>
  </div>
  <div class="section-wrap">
    <div class="section"><strong>Arrows</strong></div>
    <div class="box">&larr;</div>
    <div class="box">&uarr;</div>
    <div class="box">&rarr;</div>
    <div class="box">&rarr;</div>
    <div class="box">&darr;</div>
    <div class="box">&harr;</div>
    <div class="box">&#8597;</div>
    <div class="box">&crarr;</div>
    <div class="box">&lArr;</div>
    <div class="box">&uArr;</div>
    <div class="box">&rArr;</div>
    <div class="box">&dArr;</div>
    <div class="box">&hArr;</div>
    <div class="clear"></div>
  </div>
  <div class="section-wrap">
    <div class="section"><strong>Weather Elements</strong></div>
    <div class="box">&#9728;</div>
    <div class="box">&#9729;</div>
    <div class="box">&#9729;</div>
    <div class="box">&#9729;</div>
    <div class="box">&#9730;</div>
    <div class="box">&#9735;</div>
    <div class="box">&#9736;</div>
    <div class="box">&#9748;</div>
    <div class="box">&#9788;</div>
    <div class="box">&#9789;</div>
    <div class="box">&#9790;</div>
    <div class="box">&#8451;</div>
    <div class="box">&#8457;</div>
    <div class="clear"></div>
  </div>
  <div class="section-wrap">
    <div class="section"><strong>Astrology</strong></div>
    <div class="box">&#9776;</div>
    <div class="box">&#9777;</div>
    <div class="box">&#9778;</div>
    <div class="box">&#9779;</div>
    <div class="box">&#9780;</div>
    <div class="box">&#9781;</div>
    <div class="box">&#9782;</div>
    <div class="box">&#9783;</div>
    <div class="box">&#9791;</div>
    <div class="box">&#9792;</div>
    <div class="box">&#9793;</div>
    <div class="box">&#9794;</div>
    <div class="box">&#9795;</div>
    <div class="box">&#9796;</div>
    <div class="box">&#9797;</div>
    <div class="box">&#9798;</div>
    <div class="box">&#9799;</div>
    <div class="box">&#9800;</div>
    <div class="box">&#9801;</div>
    <div class="box">&#9802;</div>
    <div class="box">&#9803;</div>
    <div class="box">&#9804;</div>
    <div class="box">&#9805;</div>
    <div class="box">&#9806;</div>
    <div class="box">&#9807;</div>
    <div class="box">&#9808;</div>
    <div class="box">&#9809;</div>
    <div class="box">&#9810;</div>
    <div class="box">&#9811;</div>
    <div class="clear"></div>
  </div>
  <div class="section-wrap">
    <div class="section"><strong>Music Symbols</strong></div>
    <div class="box">&#9833;</div>
    <div class="box">&#9834;</div>
    <div class="box">&#9835;</div>
    <div class="box">&#9836;</div>
    <div class="box">&#9837;</div>
    <div class="box">&#9838;</div>
    <div class="box">&#9839;</div>
    <div class="clear"></div>
  </div>
  <div class="section-wrap">
    <div class="section"><strong>WingDings</strong></div>
    <div class="box">&#9825;</div>
    <div class="box">&#9826;</div>
    <div class="box">&clubs;</div>
    <div class="box">&#9828;</div>
    <div class="box">&hearts;</div>
    <div class="box">&diams;</div>
    <div class="box">&#9831;</div>
    <div class="box">&#10003;</div>
    <div class="box">&#10004;</div>
    <div class="box">&#10007;</div>
    <div class="box">&#10008;</div>
    <div class="clear"></div>
  </div>
  <div class="section-wrap">
    <div class="section"><strong>Fractions</strong></div>
    <div class="box">&frac14;</div>
    <div class="box">&frac12;</div>
    <div class="box">&frac34;</div>
    <div class="box">&frasl;</div>
    <div class="box">&#8531;</div>
    <div class="box">&#8532;</div>
    <div class="box">&#8539;</div>
    <div class="box">&#8540;</div>
    <div class="box">&#8541;</div>
    <div class="box">&#8542;</div>
    <div class="clear"></div>
  </div>
  <div class="section-wrap">
      <div class="section"><strong>Various</strong></div>
      <div class="box">&#9650;</div>
      <div class="box">&#9660;</div>
      <div class="box">&#9824;</div>
      <div class="box">&#9827;</div>
      <div class="box">&#9829;</div>
      <div class="box">&#9756; &#9758;</div>
      <div class="box">&#9754; &#9755;</div>
      <div class="box">&#9757;</div>
      <div class="box">&#9759;</div>
      <div class="box">&#9993;</div>
      <div class="box">&#9997;</div>
      <div class="box">&#9998;</div>
      <div class="box">&#9999;</div>
      <div class="box">&#10000;</div>
      <div class="box">&#10001;</div>
      <div class="box">&#10002;</div>
      <div class="box">&#9742;</div>
      <div class="box">&#9743;</div>
      <div class="box">&#9992;</div>
      <div class="box">&#9832;</div>
      <div class="box">&#9986;</div>
      <div class="box">&#9988;</div>
      <div class="box">&#9762;</div>
      <div class="box">&#9763;</div>
      <div class="box">&#9996;</div>
      <div class="box">&#13025;</div>
      <div class="box">&#13019;</div>
      <div class="box">&#9764;</div>
      <div class="box">&#9749;</div>
      <div class="box">&#9733;</div>
      <div class="box">&#9734;</div>
      <div class="box">&#9752;</div>
      <div class="box">&#9789;</div>
      <div class="box">&#9790;</div>
      <div class="box">&#10051;</div>
      <div class="box">&#10048;</div>
      <div class="box">&#10049;</div>
      <div class="box">&#10050;</div>
      <div class="box">&#9977;</div>
      <div class="box">&#10031;</div>
      <div class="box">&#10016;</div>
  </div>
</div>
</body>
</html>

Report this snippet Tweet