Direkt zum Inhalt | Direkt zur Navigation

Benutzerspezifische Werkzeuge

Sie sind hier: Startseite / Tech-Blog / Text per CSS rotieren mit Compass

Text per CSS rotieren mit Compass

Im folgenden wird gezeigt, wie man mit dem CSS-Framework Compass, einen vertikalen Text erzeugt.

HTML Markup

<div id="box">
  <h1 id="parent-fieldname-title"
      class="documentFirstHeading">
    Spielplatzinspektion
  </h1>
</div>

Compass SCSS

@import "compass/css3/transform";

#box{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
}
.verticalHeadline{
  font-size: 12pt;
  margin: 0;
  text-align: center;
  border: 1px solid green;
  @include rotate(270deg);
  @include apply-origin(top right, false);
  position: relative;
  right: 2em;
}

Resultat

vertical-headline
abgelegt unter: ,