Skip to content

Instantly share code, notes, and snippets.

@jalexanderfox

jalexanderfox/dabblet.css

Created February 5, 2014 19:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jalexanderfox/8830992 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jalexanderfox/8830992 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jalexanderfox revised this gist Feb 5, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    */
    #testwrap { border:1px solid red; height:300px; position:relative; width:80% }

    #testwrap:before { content:"test"; }
    #testwrap:before { content:"test"; background:blue; color:orange; }
    #testwrap:before {

    transform: rotate(90deg);
    @@ -25,6 +25,6 @@ top: 0px;
    color:#000;
    }
    h2 {
    margin-top: -5px;
    /*margin-top: -5px;*/
    background: pink;
    }
  2. jalexanderfox revised this gist Feb 5, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    */
    #testwrap { border:1px solid red; height:300px; position:relative; width:80% }

    #testwrap:before { content:"test"; display:block; }
    #testwrap:before { content:"test"; }
    #testwrap:before {

    transform: rotate(90deg);
    @@ -14,13 +14,13 @@ transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:block;
    left: 100%;
    left: 103%;
    /*right: 0px;*/
    top: 0px;
    position: absolute;
    outline: solid 2px green; /* green outline for containing div */
    width:auto;
    height:20px;
    height:1.3em;
    font-family:inherit;
    color:#000;
    }
  3. jalexanderfox revised this gist Feb 5, 2014. 2 changed files with 15 additions and 7 deletions.
    18 changes: 13 additions & 5 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,22 @@
    /**
    * rotated heading
    */
    div {
    writing-mode:tb-rl;
    transform: rotate(-90deg);
    #testwrap { border:1px solid red; height:300px; position:relative; width:80% }

    #testwrap:before { content:"test"; display:block; }
    #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;
    bottom:0;
    left: 100%;
    /*right: 0px;*/
    top: 0px;
    position: absolute;
    outline: solid 2px green; /* green outline for containing div */
    width:auto;
    @@ -19,4 +27,4 @@ div {
    h2 {
    margin-top: -5px;
    background: pink;
    }
    }
    4 changes: 2 additions & 2 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    <!-- content to be placed inside <body>…</body> -->
    <div><h2>some longer text here bla bla you can add</h2></div>
    <!--add more text inside the h2 tag, or delete text and see what happens-->
    <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-->
  4. Ana Tudor revised this gist Jan 21, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    <!-- content to be placed inside <body>…</body> -->
    <div><h2>some longer text here bla bla you can add</h2></div>
    <!--add more text inside the h2 tag, or delete text and see wjat happens-->
    <!--add more text inside the h2 tag, or delete text and see what happens-->
  5. Ana Tudor revised this gist May 18, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,3 @@
    <!-- content to be placed inside <body>…</body> -->
    <div><h2>some longer text here bla bla you can add</h2></div>
    <!--add more text inside the h2 tag, or delete text and see wjat happens-->
  6. Ana Tudor revised this gist May 18, 2012. No changes.
  7. Ana Tudor revised this gist May 18, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@ div {
    display:block;
    bottom:0;
    position: absolute;
    outline: solid 2px green;
    outline: solid 2px green; /* green outline for containing div */
    width:auto;
    height:20px;
    font-family:inherit;
  8. Ana Tudor revised this gist May 18, 2012. 2 changed files with 7 additions and 3 deletions.
    8 changes: 6 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    /**
    * rotated heading
    */
    h2{
    div {
    writing-mode:tb-rl;
    transform: rotate(-90deg);
    transform-origin: top left;
    @@ -10,9 +10,13 @@ h2{
    display:block;
    bottom:0;
    position: absolute;
    outline: solid 1px red;
    outline: solid 2px green;
    width:auto;
    height:20px;
    font-family:inherit;
    color:#000;
    }
    h2 {
    margin-top: -5px;
    background: pink;
    }
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,2 @@
    <!-- content to be placed inside <body>…</body> -->
    <h2>some longer text here bla bla you can add more</h2>
    <div><h2>some longer text here bla bla you can add</h2></div>
  9. Ana Tudor created this gist May 18, 2012.
    18 changes: 18 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    /**
    * rotated heading
    */
    h2{
    writing-mode:tb-rl;
    transform: rotate(-90deg);
    transform-origin: top left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:block;
    bottom:0;
    position: absolute;
    outline: solid 1px red;
    width:auto;
    height:20px;
    font-family:inherit;
    color:#000;
    }
    2 changes: 2 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <!-- content to be placed inside <body>…</body> -->
    <h2>some longer text here bla bla you can add more</h2>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}