Adesea, inspirația vine după ce ați citit un alt articol interesant pe web, iar astăzi vă oferim un articol de predare despre rotația textului utilizând CSS.
În articolul nostru de astăzi, vă oferim un exemplu de utilizare a sprite și un pic de cod CSS pentru a aranja toate elementele corect. Deși, poate nu atât de puțin. Situația se aseamănă atunci când doriți să ardeți o farfurie de mâncare, dar capacul zboară și veți obține o grămadă de ardei. De obicei, după strănut.
Din fericire, multe browsere moderne acceptă funcția de rotire a elementelor HTML. În plus, putem face ca exemplul nostru să funcționeze în Internet Explorer (chiar și în versiunea 5.5). Voi întrebați: "cum?". Să aruncăm o privire la codul HTML.
Cod frumos și curat și nimic inutil. Am ales subconstient acest ordin de date pentru a evita virgulele. În caz contrar, s-ar putea să avem nevoie de o extindere suplimentară pentru a elimina virgulele din versiunea finală de proiectare.
În browserele familiei WebKit și în browserul Firefox (în ceea ce privește versiunea 3.5), puteți profita de funcția de transformare propusă utilizând parametrii pentru controlul rotației. Fiecare browser necesită un prefix înaintea parametrilor.
Când vine vorba de efectele din Internet Explorer, există posibilități uimitoare de a folosi filtrele. Există un filtru numit BasicImage (deși înșelător), care ne oferă posibilitatea de a roti orice element care are marcaj.
Parametrii de rotație ai filtrului BasicImage pot include 4 valori: 0, 1, 2, 3 - vor roti elementele la 0, 90, 180 și respectiv 270 de grade.
De asemenea, parametrul filtru BasicImage poate fi setat pentru a reflecta, masca, decolora și așa mai departe. De asemenea, puteți profita de filtrul Matrix. dar coordonatele nu sunt chiar clare pentru noi.
Cum se comportă în acțiune? Uită-te la această pagină prin Safari, Firefox sau IE și probabil vei vedea ceva similar cu această imagine. Singura problemă, teoretic, nu poate fi decât lipsa de claritate a textului creat. Internet Explorer va reseta stilul ClearType pentru tot textul la care este atașat filtrul. De asemenea, puteți observa că spațiile dintre numere diferă în Firefox și Safari. Astfel de diferențe în afișarea textului creează o barieră în crearea unui șablon clar clar.