Поворачиваем текст средствами CSS
Денек сегодня выдался просто сумасшедшим. На работе внедрял один новый модуль для “1С:Бухгалтерия” и просто замучился вносить изменения. Вроде все протестировал, но потом потребовалось опять допилить функционал (от пользователя поступил новый тикет) и понеслась жара. В итоге у меня все получилось, но к концу рабочего дня я окончательно выдохся. Писать длинный пост у меня желания нет, поэтому я просто решил поделиться с тобой небольшим css-снипетом. Буквально в двух строчках кода я покажу тебе как можно написать текст под определенным углом средствами css. Код под катом.
CSS:
.rotate-text {
/* Для Chrome и Safari */
-webkit-transform: rotate(-90deg);
/* Для FireFox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Древний IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}HTML:
<p class=”rotate-text”>Это перевернутый текст</p>
- Spider_NET's блог
- Войдите или зарегистрируйтесь, чтобы получить возможность отправлять комментарии
- 536 просмотров
Комментарии
9 комментария(ев)Дата: Втр, 14/02/2012 - 22:17
Плохо, что под каждый браузер своя музыка...
Дата: СР, 15/02/2012 - 07:19
Ага, это главный минус. Пока стандарт не примут окончательно придется терпеть.
Дата: СР, 15/02/2012 - 13:38
Даже если и примут, вряд ли все будут ему следовать. Лично я за то, чтобы делать несколько CSS-файлов. Один - с настройками, которые понимают все, а затем подгружать только те стили (файл стилей), который нужен конкретному браузеру. Хотя ошибки отлавливать в этом случае будет сложновато... много файлов, запутаться можно. Но машинам было бы удобнее.
Дата: СР, 15/02/2012 - 14:36
Тенденции к счастью есть. Тот же IE пытается нагнать упущенное и подстроится под новые тренды.
Несколько файлов это хорошо. Но поддерживать такую гору в разы сложнее.
Дата: СР, 15/02/2012 - 14:45
]]>тынц]]>, ]]>тынц]]>. Указанный мною сайт содержит исчерпывающую информацию по html и css (кому интересно).
Дата: ЧТ, 16/02/2012 - 07:37
Ага, есть интересные примеры. Таких сайтов за бугром навалом. Надо наш продвигать =)))))
Дата: ЧТ, 16/02/2012 - 19:58
А зачем? Что мешает воспользоваться указанными мною ресурсами?
ценность представляет информация, а не сайт сам по себе. Это относится к любому ресурсу.
Дата: ЧТ, 16/02/2012 - 22:25
Я немного не так выразился. Ты правильно говоришь, что на ценность любого ресурса выражается в информации. Вот я говорю, что надо изучать англоязычный контент и делать материалы (переводы, статьи по мотивам) на нашем родном языке.
Дата: Пнд, 27/02/2012 - 09:14
не подскажете почему в Гоогл Хроме текст не поворачивается
#topnav a{
background:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, sizingMethod='auto expand');
zoom: 1;
}