Skip to content

Instantly share code, notes, and snippets.

@bertobox
Created September 23, 2014 15:23
Show Gist options
  • Save bertobox/b9d32145b2ed0c70da1d to your computer and use it in GitHub Desktop.
Save bertobox/b9d32145b2ed0c70da1d to your computer and use it in GitHub Desktop.
Ejercicio con mi nombre - posicionamiento absoluto
/**
* Ejercicio con mi nombre - posicionamiento absoluto
*/
/**
* Roberto Valencia
* ejercicio CSS con mi nombre,
* inspirado en el ejercicio de Jon Tangerine
*
* Courier Regular
*
* R - 72px
* o - 12px
* b - 12px
* e - 27px
* r - 29px
* t - 22px
* o - 9px
*/
.envoltura {
width: 120px;
height: 72px;
background-color: #ddd;
position: relative;
font-family:Courier,monospace;
margin-left: 40px;
margin-top: 40px;
}
.letra{font-weight: normal;position: absolute;}
.R{font-size: 108px;top:-30px;}
.o_primera{font-size: 18px;left:50px;top:30px;}
.b{font-size: 18px;left:62px;top:35px;}
.e{font-size: 41px;left:65px;top:6px;}
.r_segunda{font-size: 43.5px;left:77px;top:16px;}
.t{font-size: 33px;left:99px;top:27px;}
.o_segunda{font-size: 13.5px;left:109px;top:26px;}
<h1 class="envoltura">
<span class="letra R">R</span>
<span class="letra o_primera">o</span>
<span class="letra b">b</span>
<span class="letra e">e</span>
<span class="letra r_segunda">r</span>
<span class="letra t">t</span>
<span class="letra o_segunda">o</span>
</h1>
// alert('Hello world!');
{"view":"split","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment