Reklama

Rotace textu o 90 stupnů ve formuláři Doporučený

(Čtení tohoto článku zabere přibližně: 1 minutu.)

Dnes jsem řešil pro klienta interaktivní formulář pro hliníkové profily. Grafik to navrhnul, já nachystal technicky. Klient chtěl ale zapisovat hodnoty otočené o 90 stupňů. Musím se přiznat, že prvně jsem s tímto rozlišení moc nesouhlasil, ale výsledek není špatný.

 

 

 Prvně jsem musel připravit třídu pro otočení o 90%. To se bohužel řeší pro každý prohlížeč samostatným zápisem. Právě to byl důvod, proč jsem se rozhodl zde tuto rotaci více rozepsat.

 

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

Jak vidíte, Internet Explorer má zase speciální zápis. Hodnoty 0, 1, 2, 3 odpovídají rotaci o 0, 90, 180, 270 stupňů.

Výsledek:

Výsledek mě samotného překvapil, nyní čekám co klient, ale především co návštěvníci webu, protože to bude to nejdůležitější. Což mi připomíná .. musím zanášet do Google Analytics. 

Sledujte nás na Facebooku

Další úryvky kódu na Twitteru

 

 

Programátor... občas normální, častěji tak trochu blázen.

Internetová stránka: www.valeas.cz

 

Zanechat komentář

Ujistěte se, že zadáte požadované informace, tam kde je vyznačeno (*). Kód HTML není povolen.