Skip to content

Instantly share code, notes, and snippets.

@synecdocheNORTH

synecdocheNORTH/beautiful-textual-map-of-the-usa-with-css.markdown

Created January 4, 2019 16:38
Show Gist options
  • Save synecdocheNORTH/a78e466f063f93e6c970a07f00899610 to your computer and use it in GitHub Desktop.
Save synecdocheNORTH/a78e466f063f93e6c970a07f00899610 to your computer and use it in GitHub Desktop.
Download ZIP
Beautiful Textual Map of the USA with CSS
Raw
beautiful-textual-map-of-the-usa-with-css.markdown
Raw
index.html
<!--
If You use this pen on any website,
please send the link in comment :)
-->
<section class="usa">
<a class="alab" href="#" title="Alabama">
<span class="s001">Ala</span><span class="s002">ba</span><span class="s003">ma</span>
</a>
<a class="alas" href="#" title="Alaska">
<span class="s004">Ala</span><span class="s005">ska</span>
</a>
<a class="ariz" href="#" title="Arizona">
<span class="s006">Ari</span><span class="s007">z</span><span class="s008">o</span><span class="s009">n</span><span class="s010">a</span>
</a>
<a class="arka" href="#" title="Arkansas">
<span class="s011">Arkan</span><span class="s012">sas</span>
</a>
<a class="cali" href="#" title="California">
<span class="s013">Ca</span><span class="s014">lif</span><span class="s015">or</span><span class="s016">nia</span>
</a>
<a class="colo" href="#" title="Colorado">
<span class="s017">Colo</span><span class="s018">rado</span>
</a>
<a class="conn" href="#" title="Connecticut">
<span class="s019">Conne</span><span class="s020">cticut</span>
</a>
<a class="dela" href="#" title="Delaware">
<span class="s021">Del</span><span class="s022">aw</span><span class="s023">are</span>
</a>
<a class="flor" href="#" title="Florida">
<span class="s024">Flor</span><span class="s025">id</span><span class="s026">a</span>
</a>
<a class="geor" href="#" title="Georgia">
<span class="s027">Ge</span><span class="s028">or</span><span class="s029">gia</span>
</a>
<a class="hawa" href="#" title="Hawaii">
<span class="s030">H</span><span class="s031">a</span><span class="s032">w</span><span class="s033">a</span><span class="s034">i</span><span class="s035">i</span>
</a>
<a class="idah" href="#" title="Idaho">
<span class="s036">I</span><span class="s037">d</span><span class="s038">aho</span>
</a>
<a class="illi" href="#" title="Illinois">
<span class="s039">Ill</span><span class="s040">ino</span><span class="s041">is</span>
</a>
<a class="indi" href="#" title="Indiana">
<span class="s042">Ind</span><span class="s043">ia</span><span class="s044">na</span>
</a>
<a class="iowa" href="#" title="Iowa">
<span class="s045">Io</span><span class="s046">w</span><span class="s047">a</span>
</a>
<a class="kans" href="#" title="Kansas">
<span class="s048">Ka</span><span class="s049">ns</span><span class="s050">as</span>
</a>
<a class="kent" href="#" title="Kentucky">
<span class="s051">Ke</span><span class="s052">nt</span><span class="s053">u</span><span class="s054">ck</span><span class="s055">y</span>
</a>
<a class="loui" href="#" title="Louisiana">
<span class="s056">Lo</span><span class="s057">uisiana</span>
</a>
<a class="main" href="#" title="Maine">
<span class="s058">M</span><span class="s059">ain</span><span class="s060">e</span>
</a>
<a class="mary" href="#" title="Maryland">
<span class="s061">Mary</span><span class="s062">land</span>
</a>
<a class="mass" href="#" title="Massachusetts">
<span class="s063">Massa</span><span class="s064">chusett</span><span class="s065">s</span>
</a>
<a class="mich" href="#" title="Michigan">
<span class="s066">Mi</span><span class="s067">ch</span><span class="s068">ig</span><span class="s069">an</span>
</a>
<a class="minn" href="#" title="Minnesota">
<span class="s070">Min</span><span class="s071">nes</span><span class="s072">ot</span><span class="s073">a</span>
</a>
<a class="missi" href="#" title="Mississippi">
<span class="s074">Mi</span><span class="s075">ssi</span><span class="s076">ssip</span><span class="s077">pi</span>
</a>
<a class="misso" href="#" title="Missouri">
<span class="s078">Mis</span><span class="s079">so</span><span class="s080">u</span><span class="s081">ri</span>
</a>
<a class="mont" href="#" title="Montana">
<span class="s082">M</span><span class="s083">on</span><span class="s084">tan</span><span class="s085">a</span>
</a>
<a class="nebr" href="#" title="Nebraska">
<span class="s086">Nebr</span><span class="s087">ask</span><span class="s088">a</span>
</a>
<a class="neva" href="#" title="Nevada">
<span class="s089">Nev</span><span class="s090">ad</span><span class="s091">a</span>
</a>
<a class="newh" href="#" title="New Hampshire">
<span class="s092">N</span><span class="s093">ew</span><span class="visuallyhidden"> </span><span class="s094">Ha</span><span class="s095">mp</span><span class="s096">shire</span>
</a>
<a class="newj" href="#" title="New Jersey">
<span class="s097">Ne</span><span class="s098">w</span><span class="visuallyhidden"> </span><span class="s099">Jer</span><span class="s100">sey</span>
</a>
<a class="newm" href="#" title="New Mexico">
<span class="s101">New</span><span class="visuallyhidden"> </span><span class="s102">Me</span><span class="s103">xico</span>
</a>
<a class="newy" href="#" title="New York">
<span class="s104">New</span><span class="visuallyhidden"> </span><span class="s105">Yo</span><span class="s106">rk</span>
</a>
<a class="ncar" href="#" title="North Carolina">
<span class="s107">North</span><span class="visuallyhidden"> </span><span class="s108">Ca</span><span class="s109">rol</span><span class="s110">ina</span>
</a>
<a class="ndak" href="#" title="North Dakota">
<span class="s111">North</span><span class="visuallyhidden"> </span><span class="s112">Dakota</span>
</a>
<a class="ohio" href="#" title="Ohio">
<span class="s113">Oh</span><span class="s114">io</span>
</a>
<a class="okla" href="#" title="Oklahoma">
<span class="s115">Okla</span><span class="s116">homa</span>
</a>
<a class="oreg" href="#" title="Oregon">
<span class="s117">Ore</span><span class="s118">gon</span>
</a>
<a class="penn" href="#" title="Pennsylvania">
<span class="s119">Pennsy</span><span class="s120">lvania</span>
</a>
<a class="rhod" href="#" title="Rhode Island">
<span class="s121">Rho</span><span class="s122">de Is</span><span class="s123">land</span>
</a>
<a class="scar" href="#" title="South Carolina">
<span class="s124">South</span><span class="visuallyhidden"> </span><span class="s125">Caroli</span><span class="s126">na</span>
</a>
<a class="sdak" href="#" title="South Dakota">
<span class="s127">South</span><span class="visuallyhidden"> </span><span class="s128">Dakota</span>
</a>
<a class="tenn" href="#" title="Tennessee">
<span class="s129">Te</span><span class="s130">nn</span><span class="s131">es</span><span class="s132">see</span>
</a>
<a class="texa" href="#" title="Texas">
<span class="s133">T</span><span class="s134">exa</span><span class="s135">s</span>
</a>
<a class="utah" href="#" title="Utah">
<span class="s136">U</span><span class="s137">t</span><span class="s138">ah</span>
</a>
<a class="verm" href="#" title="Vermont">
<span class="s139">Ver</span><span class="s140">mo</span><span class="s141">nt</span>
</a>
<a class="virg" href="#" title="Virginia">
<span class="s142">Vir</span><span class="s143">g</span><span class="s144">in</span><span class="s145">ia</span>
</a>
<a class="wash" href="#" title="Washington">
<span class="s146">Washi</span><span class="s147">ngton</span>
</a>
<a class="wvir" href="#" title="West Virginia">
<span class="s148">West</span><span class="visuallyhidden"> </span><span class="s149">Virgi</span><span class="s150">nia</span>
</a>
<a class="wisc" href="#" title="Wisconsin">
<span class="s151">Wis</span><span class="s152">con</span><span class="s153">sin</span>
</a>
<a class="wyom" href="#" title="Wyoming">
<span class="s154">Wyo</span><span class="s155">ming</span>
</a>
</section>
<!-- Another Pen? codepen.io/Twikito -->
Raw
script.js
/*
Obviously no JS ;)
*/
Raw
style.scss
.usa {
/* OPTIONS ====== */
$ratio:1;
$theme:#069075;
$hover:#e74c3c;
/* BASE ========= */
width:$ratio * 900px;
height:$ratio * 555px;
font-size:$ratio * 10px;
margin:3em auto;
font-family:"Open Sans Condensed",sans-serif;
font-weight:700;
text-transform:uppercase;
a {
color:grey;
text-decoration:none;
transition:all .15s ease-in-out;
&.alas, &.colo, &.illi, &.missi, &.minn, &.neva, &.newy, &.ohio, &.scar, &.wash {
color:rgba($theme,.2);
}
&.alab, &.main, &.mary, &.mass, &.mich, &.misso, &.mont, &.ncar, &.oreg, &.sdak, &.texa, &.utah {
color:rgba($theme,.4);
}
&.arka, &.cali, &.conn, &.flor, &.hawa, &.indi, &.kans, &.newh, &.newj, &.newm, &.virg, &.wisc {
color:rgba($theme,.6);
}
&.geor, &.idah, &.kent, &.loui, &.ndak, &.nebr, &.okla, &.penn, &.verm {
color:rgba($theme,.8);
}
&.ariz, &.dela, &.iowa, &.rhod, &.tenn, &.wvir, &.wyom {
color:rgba($theme,1);
}
&:hover, &:focus {
color:$hover;
}
}
/* THE MAGIC ==== */
position:relative;overflow:hidden;span{position:absolute;z-index:0;line-height:70%}a:hover span,a:focus span{z-index:1}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.s001{top:63.5%;left:67%;font-size:3.3em}.s002{top:68.4%;left:66.6%;font-size:5.9em}.s003{top:77.1%;left:66.8%;font-size:3.5em}.s004{top:80.1%;left:1.7%;font-size:6.5em}.s005{top:89.1%;left:.2%;font-size:7.6em}.s006{top:52.2%;left:15.7%;font-size:6.9em}.s007{top:62.4%;left:14.9%;font-size:5.8em}.s008{top:62.4%;left:17.7%;font-size:7.7em}.s009{top:62.4%;left:22.8%;font-size:3.7em}.s010{top:68%;left:22.8%;font-size:4.1em}.s011{top:58.2%;left:54.4%;font-size:2.8em}.s012{top:63.4%;left:54.4%;font-size:5.1em}.s013{top:28.5%;left:.2%;font-size:6.7em}.s014{top:38%;left:1.1%;font-size:6.4em}.s015{top:46.8%;left:2.7%;font-size:7em}.s016{top:56.5%;left:5.4%;font-size:5.5em}.s017{top:37.8%;left:26.3%;font-size:6em}.s018{top:46.3%;left:26.4%;font-size:5.5em}.s019{top:27.7%;left:91.1%;font-size:1em}.s020{top:29.6%;left:91.3%;font-size:1.03em}.s021{top:40%;left:88.8%;font-size:1em}.s022{top:41.5%;left:89.2%;font-size:1em}.s023{top:42.9%;left:89.6%;font-size:1em}.s024{top:79.3%;left:73.7%;font-size:3.8em}.s025{top:84.8%;left:80%;font-size:4.9em}.s026{top:91.5%;left:83%;font-size:4.9em}.s027{top:61.8%;left:72.4%;font-size:3.5em}.s028{top:66.5%;left:73.8%;font-size:3.7em}.s029{top:71.8%;left:73.8%;font-size:5.4em}.s030{top:86%;left:16%;font-size:3em}.s031{top:87.2%;left:18.1%;font-size:3em}.s032{top:89.5%;left:20.4%;font-size:2.6em}.s033{top:90.8%;left:22.8%;font-size:2.8em}.s034{top:93.8%;left:24.4%;font-size:3.2em}.s035{top:94.9%;left:25.5%;font-size:3.2em}.s036{top:1.8%;left:16.8%;font-size:7.2em}.s037{top:11.6%;left:15.2%;font-size:7.7em}.s038{top:21.8%;left:13.6%;font-size:6.2em}.s039{top:33.9%;left:61%;font-size:4.6em}.s040{top:40.9%;left:60.1%;font-size:4.2em}.s041{top:47%;left:63%;font-size:4.8em}.s042{top:35.4%;left:66.7%;font-size:3em}.s043{top:39.6%;left:66.9%;font-size:5.55em}.s044{top:47.9%;left:67%;font-size:2.7em}.s045{top:30.8%;left:51.3%;font-size:7.7em;letter-spacing:-0.04em}.s046{top:33.8%;left:58.7%;font-size:2.6em}.s047{top:37.8%;left:58.4%;font-size:2.3em}.s048{top:43.6%;left:39.9%;font-size:4.1em}.s049{top:49.7%;left:39.7%;font-size:3.9em}.s050{top:43.2%;left:44.2%;font-size:9em}.s051{top:54%;left:64.1%;font-size:2.25em}.s052{top:52.2%;left:66.6%;font-size:3.3em}.s053{top:47.7%;left:70.7%;font-size:5.7em}.s054{top:47.7%;left:74%;font-size:3em}.s055{top:52.3%;left:74.5%;font-size:2.3em}.s056{top:71.6%;left:54.9%;font-size:5.8em}.s057{top:80%;left:55.2%;font-size:2.7em}.s058{top:5.4%;left:94.5%;font-size:3.7em}.s059{top:10.8%;left:94%;font-size:3.7em}.s060{top:16%;left:95.1%;font-size:3.7em}.s061{top:40%;left:84%;font-size:1.8em}.s062{top:42.5%;left:85%;font-size:1.8em}.s063{top:23.9%;left:92.7%;font-size:1.2em}.s064{top:25.7%;left:91.7%;font-size:1.2em}.s065{top:25.7%;left:96.1%;font-size:2.1em}.s066{top:13.8%;left:61.9%;font-size:4.3em}.s067{top:13.7%;left:66.9%;font-size:2.5em}.s068{top:20%;left:68.9%;font-size:6.1em}.s069{top:28.2%;left:68.1%;font-size:5em}.s070{top:9.6%;left:49.5%;font-size:4.7em}.s071{top:15.8%;left:50.3%;font-size:4.4em}.s072{top:22.2%;left:50.1%;font-size:5.7em}.s073{top:25.2%;left:56.1%;font-size:3.35em}.s074{top:63.6%;left:62.3%;font-size:3.8em}.s075{top:69%;left:61.9%;font-size:3.8em}.s076{top:75%;left:61.2%;font-size:3.1em}.s077{top:79.4%;left:64.9%;font-size:2.3em}.s078{top:41.6%;left:53.4%;font-size:4em}.s079{top:47.3%;left:53.4%;font-size:7.2em}.s080{top:49.2%;left:61.4%;font-size:2.9em}.s081{top:53.7%;left:61.4%;font-size:2.6em}.s082{top:3.9%;left:19.3%;font-size:5.9em}.s083{top:5.9%;left:24.3%;font-size:4.3em}.s084{top:12.9%;left:20.8%;font-size:5.9em}.s085{top:7.5%;left:31%;font-size:9.9em}.s086{top:32%;left:37%;font-size:4.1em}.s087{top:38%;left:40.5%;font-size:3.7em}.s088{top:32.2%;left:46.8%;font-size:8.1em}.s089{top:30.1%;left:8.4%;font-size:5.5em}.s090{top:38.1%;left:9.4%;font-size:6.4em}.s091{top:46.8%;left:11.8%;font-size:7em}.s092{top:14.8%;left:92.9%;font-size:1.2em}.s093{top:16.6%;left:93.3%;font-size:1.2em}.s094{top:18.4%;left:93.3%;font-size:1.2em}.s095{top:20.2%;left:93.3%;font-size:1.2em}.s096{top:22%;left:93%;font-size:1.2em}.s097{top:31.2%;left:89.3%;font-size:1.4em}.s098{top:33.5%;left:89.3%;font-size:1.5em}.s099{top:35.9%;left:89.2%;font-size:1.2em}.s100{top:37.9%;left:89.4%;font-size:1.2em}.s101{top:54.3%;left:25.7%;font-size:5.6em}.s102{top:62%;left:25.2%;font-size:8.7em}.s103{top:73.8%;left:29.3%;font-size:3.6em}.s104{top:26.8%;left:80.7%;font-size:2.7em}.s105{top:17.7%;left:85.1%;font-size:4.6em}.s106{top:24.1%;left:86.1%;font-size:4.6em}.s107{top:58.5%;left:76%;font-size:1.2em}.s108{top:53.8%;left:79.4%;font-size:4.6em}.s109{top:52.1%;left:84.7%;font-size:3.8em}.s110{top:57.3%;left:84.7%;font-size:2.3em}.s111{top:8.6%;left:37%;font-size:4.2em}.s112{top:15%;left:37%;font-size:3.7em}.s113{top:35.3%;left:71.4%;font-size:5.9em}.s114{top:43.6%;left:73.3%;font-size:2.8em}.s115{top:56.2%;left:42.8%;font-size:5em}.s116{top:63.2%;left:42.2%;font-size:4.4em}.s117{top:11.8%;left:3.2%;font-size:6.4em}.s118{top:20.4%;left:1.9%;font-size:5.9em}.s119{top:31.2%;left:79.4%;font-size:2.9em}.s120{top:35.5%;left:79.1%;font-size:3em}.s121{top:27.7%;left:94.4%;font-size:.8em}.s122{top:28.9%;left:94.5%;font-size:.8em}.s123{top:30.1%;left:94.6%;font-size:.8em}.s124{top:60.7%;left:76.6%;font-size:3.2em}.s125{top:65.5%;left:78.4%;font-size:2em}.s126{top:68.8%;left:80.6%;font-size:1.8em}.s127{top:20.4%;left:37.4%;font-size:4.5em}.s128{top:26.6%;left:37.2%;font-size:3.8em}.s129{top:57.8%;left:63%;font-size:4em}.s130{top:57%;left:66.7%;font-size:4em}.s131{top:55.7%;left:72.1%;font-size:4em}.s132{top:54.3%;left:76%;font-size:2.5em}.s133{top:55.1%;left:37.5%;font-size:10.4em}.s134{top:69.4%;left:36.2%;font-size:11.8em}.s135{top:85.7%;left:43.7%;font-size:10.4em}.s136{top:30.5%;left:18.7%;font-size:7.6em}.s137{top:37.1%;left:23.5%;font-size:3em}.s138{top:41.2%;left:16.9%;font-size:7.8em}.s139{top:16.4%;left:90.3%;font-size:1.7em}.s140{top:18.9%;left:90.5%;font-size:1.7em}.s141{top:21.4%;left:90.8%;font-size:1.7em}.s142{top:51.5%;left:78.7%;font-size:1.6em}.s143{top:47.3%;left:81%;font-size:4.4em}.s144{top:45.2%;left:83.5%;font-size:4.8em}.s145{top:48.3%;left:88.3%;font-size:2.5em}.s146{top:.2%;left:4.5%;font-size:4.2em}.s147{top:6.2%;left:3.9%;font-size:4.0em}.s148{top:40.5%;left:79.2%;font-size:2em}.s149{top:43.6%;left:76.4%;font-size:2.7em}.s150{top:47.6%;left:77.2%;font-size:2.3em}.s151{top:16.1%;left:57.5%;font-size:2.6em}.s152{top:20%;left:57.3%;font-size:4.2em}.s153{top:26.4%;left:58.4%;font-size:5.3em}.s154{top:21.8%;left:25.1%;font-size:6em}.s155{top:30.2%;left:24.5%;font-size:4.9em}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment