Skip to content

Instantly share code, notes, and snippets.

@jalexanderfox

jalexanderfox/dabblet.css

Created February 5, 2014 19:15
Show Gist options
  • Save jalexanderfox/8830992 to your computer and use it in GitHub Desktop.
Save jalexanderfox/8830992 to your computer and use it in GitHub Desktop.
Download ZIP
rotated heading
Raw
dabblet.css
/**
* rotated heading
*/
#testwrap { border:1px solid red; height:300px; position:relative; width:80% }
#testwrap:before { content:"test"; background:blue; color:orange; }
#testwrap:before {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform-origin: top left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
white-space:nowrap;
display:block;
left: 103%;
/*right: 0px;*/
top: 0px;
position: absolute;
outline: solid 2px green; /* green outline for containing div */
width:auto;
height:1.3em;
font-family:inherit;
color:#000;
}
h2 {
/*margin-top: -5px;*/
background: pink;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="testwrap"><div id="test"><h2>some longer text here bla bla you can add</h2></div></div>
<!--add more text inside the h2 tag, or delete text and see what happens-->
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment