[CSS] Inhalte skalieren

Drucken
( 0 Votes ) 
Hauptkategorie: Programmieren Kategorie: CSS
Erstellt am 21.01.2013 Zuletzt aktualisiert am 21.01.2013 Geschrieben von Jonny132
Oftmals wird auf Seiten im Internet angeboten die Inhalte zu skalieren. Oder anderst ausgedrückt, Inhalte zu verkleinern oder zu vergrößern.
Dies ist vor allem für Menschen mit Sehschwäche von Vorteil, denn somit können sie einfach selbst einstellen mit welcher Schriftgröße sie sich wohl fühlen.

Früher hat diese Funktionalität noch einiges an Programmieraufwand erfordert. In der neuen CSS3-Spezifikation ist es nun aber schon von Haus aus dabei.

Die Rede ist von der transform:scale - Eigenschaft. Ihr kann man zwei Parameter mitgeben jeweils für die Breite und die Höhe.
Um eine Seite nun z.B. doppelt so groß anzeigen zu lassen, könnte man der Eigenschaft scale zwei mal die 2 übergeben.

Beispiel:
      #Original
      {
        border: 1px solid;
	background-color:green;
	width: 200px;
      }

      #Beispiel
      {
        transform:scale(1,3);
        -ms-transform:scale(1,3); /* für ältere IE Versionen */
        -moz-transform:scale(1,3); /* für ältere FireFox Versionen */
        -webkit-transform:scale(1,3); /* für ältere Safari und Chrome Versionen */
        -o-transform:scale(1,3); /* für ältere Opera Versionen */
        border: 1px solid;
	background-color:green;
	width: 200px;
	margin: 50px;
      }
    <div id="Original">
      Hier kommt der Inhalt, <br/>
      der normal <br/>
      dargestellt wird
    </div>

    <div id="Beispiel">
      Hier kommt der Inhalt, <br/>
      der skaliert <br/>
      dargestellt werden soll
    </div>
Inhalte mittels CSS auf die 3fache Höhe skaliert
Wie ihr im Beispiel seht, wurde der Inhalt einfach auf die dreifache Höhe skaliert bzw. vergrößert.
Dies funktioniert genauso mit Gleitkommazahlen.
   

    Veröffentlichen Sie ihre Kommentare ...