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

Označeno v

css
browsers

Václav

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

Internetová stránka: www.valeas.cz

Více z této kategorie: « Facebook stále otravnější? Je Google ten největší šmírák? »

Zanechat komentář

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