В данном уроке я покажу как работает CSS анимация и как ее сделать, используя только HTML и CSS без использования JavaScript и изображений. CSS анимация – это когда мы с помощью свойств стилей заставляем HTML блоки изменять свои характеристики положения, размера и цвета.
Бывает так, что изменение размера шрифта Cufon не происходит в соответствии с данными установленных для блока параметров шрифтов из CSS. В этих случаях требуется явно указывать параметры в коде при инициализации Cufon.
Изменить размер шрифта можно например так:
Cufon.set('fontSize', '16px').replace('.selector');
В случае указания нескольких параметров можно писать так:
Cufon.replace('.selector', { fontSize: '16px', fontWeight: 'bold' } );
В действительности я бы вообще не рекомендовал пользоваться Cufon, так как с ним возникает масса проблем. Например, если вы указываете при инициализации блок, который содержит в себе какие-либо элементы, например список, то вы можете столкнуться с появлением дополнительных переводов строки там, где их быть не должно.
В этом случае необходимо убрать все разрывы между закрывающими и открывающими тегами и проблема будет решена – то есть надо вытянуть код в одну строку!
Так же часто бывает, что тексты Cufon располагаются немного ниже, чем должны.
В этом случае можно задать отрицательный margin-top, или указать свойство position со значением relative и задать значение свойства bottom.
.selector1 {
margin-top: -2px;
}
.selector2 {
position: relative;
bottom: 2px;
}
Помимо этого неудобно работать с Cufon, если цвет текста должен меняться при наведении, например. Разумеется это и изменение размера шрифта Cufon. Еще Cufon достаточно плохо выглядит после, так как рендеринг не самая сильная его сторона. Не забываем и про дополнительное количество подключений к серверу и вес подключаемых файлов. И это не все его недостатки.
Но все же, бывают ситуации, когда без него не обойтись.
Например в случае, когда надо использовать свой шрифт и чтобы он работал во всех браузерах. Если вы уверены, что ваши клиенты будут просматривать сайт через IE, как было в моей ситуации, то необходимо иметь ввиду, что IE не загружает подключаемые шрифты по умолчанию, а для того, чтобы он начал спрашивать можно ли их загрузить или нет – должна быть включена соответствующая опция.
В моем случае было точно известно, что опция эта не включена(корпоративные настройки безопасности у всех сотрудников компании) и именно поэтому мне пришлось использовать Cufon, против которого я был против до последнего.
Ссылка на сайт для подготовки и настройки своего набора шрифтов Cufon – тут.
Задача состоит в том, чтобы все блоки одного типа имели равную высоту.
Есть два правильных способа сделать блоки одинаковой высоты:
Для того, чтобы выстроить блоки в одну строку с помощью CSS необходимо понимать, что выстраиваемые блоки представляют собой не просто какие-то разрозненные блоки, а группу. Понимая это необходимо объединить их. Объединение осуществляется с помощью заключения всех блоков в какой-то другой блок, который будет “родительским” по отношению к этой группе.
По поводу того, как выравнивать блок по вертикали написано масса материалов и статей, но самым простым способом является использование решения, которое будет работать везде. И все благодаря CSS 3.
Помимо свойства display: table появилось есть свойство display: table-cell и именно комбинацию этих двух свойств мы будем использовать.
Схема работы очень проста – создается главный блок со свойством display: table, а в нем создается еще один блок, но уже со свойством display: table-cell и эта конструкция ведет себя как обычная таблица – высота вложенного блока занимает все пространство, то есть в данном случае становится равной высоте родительского блока. При этом содержимое блока выравнивается по вертикали по центру, если нет указания на иное, в том числе и блоки.
<div class="main_block">
<div>
<div class="block">Выравнивание - блок по вертикали</div>
</div>
</div>
Для наглядности окрасим родительский блок в красный, а дочерний в серый.
.main_block {
display: table;
width: 100%;
height: 200px;
background: #f00;
}
.main_block > div {
display: table-cell;
vertical-align: middle;
background: #eee;
height: 30px;
}
.block {
background: #ccc;
}
Мы увидим, что красного цвета не видно, это означает что дочерний блок имеет те же размеры, что и родительский и полностью его закрывает.
Разумеется, помимо этих основных моментов выровнять блок по вертикали потребуется еще указать высоту главного блока, если это будет необходимо. При данном варианте решения задачи выравнивания не придется “бороться” с Internet Explorer, как было бы, если бы использовалось свойство display:inline-block.
Данный метод является самым простым и компактным из всех существующих и работает везде.
Как известно, основной “строительный” материал HTML-страниц – это блоки. Любой элемент по сути является блоком, неким прямоугольником с четырьмя сторонами и четырьмя вершинами. Для изменения внешнего вида элементов мы используем свойства CSS, далее рассматриваются параметры свойств и их значения, и указывается то, на что эти параметры влияют.
.block {
border: 1px solid #ccc;
}
В данном случае каждая сторона блока будет иметь рамку серого цвета, толщиной 1px, но что делать, если рамки должны иметь отличную друг от друга ширину?
.block {
border-style: solid;
border-color: #ccc;
border-width: 1px;
}
Вы можете легко убедиться, что внешность блока и толщина рамок остались теми же, просто изменился вид записи. При этом наличие всего одного параметра в свойстве толщины рамки говорит о том, что рамки со всех сторон будут иметь толщину равную 1px.
Будем изменять значения свойства border-width.
border-width: 1px 2px;
В этом случае первый параметр отвечает за верх и низ, второй за право и лево. Таким образом получается, что рамка сверху и снизу будут шириной 1px, а справа и слева по 2px.
border-width: 1px 2px 3px;
Получается, что верхняя рамка имеет толщину 1px, правая 2px, нижняя 3px, а левая имеет ту же толщину, что и правая, то есть 2px.
border-width: 1px 2px 3px 4px;
Из этого примера видно, что рамка изменилась и теперь верхняя рамка имеет толщину 1px, правая 2px, нижняя 3px, левая 4px. Получается, что перечисление параметров, при указании четырех значений, начинается сверху и идет по часовой стрелке.
Эта схема так же работает со свойствами padding, margin и с любыми свойствами, где участвуют стороны или углы блока.
.block {
border-radius: 5px 10px 20px 40px;
-webkit-border-radius: 5px 10px 20px 40px;
-moz-border-radius: 5px 10px 20px 40px;
}
*для того, что бы скругления работали во всех современных браузерах мы используем соответствующие префиксы
Первый параметр отвечает за левый верхний угол и далее по часовой стрелке.
Есть несколько правильных способов расположить div блок по центру. В данной статье будет описано три, наиболее распространенных.
Первыми двумя пользуются те, кто хочет добиться правильного отображения в старых браузерах, третьим способом пользуются те, кто хочет просто выровнять div блок по центру.
.var_1 {
position: relative;
height: 30px;
background: #eee;
}
.var_1 > div {
left: 50%;
width: 500px;
margin-left: -250px;
position: absolute;
background: #e99;
}
.var_2 {
position: relative;
float: right;
right: 50%;
background: #e4e4e4;
}
.var_2 > div {
position: relative;
float: left;
left: 50%;
width: 500px;
background: #ee9;
}
.var_3 {
margin-left: auto;
margin-right: auto;
width: 500px;
background: #9e9;
}
В данном примере минусов нет. Все аккуратно и быстро. Может возникнуть резонный вопрос – что делать, если не известна ширина блока но надо расположить div блок по центру?
Все просто – нужно добавить свойство display: table; и проблема будет решена. Этот способ подходит, чтобы расположить любой div блок по центру, будь то меню, блок с контентом, изображение в виде блока и т.п.
Для того, чтобы применяемые на сайте цвета выглядели одинаково на всех устройствах, применяют, так называемые, безопасные цвета. Данные цвета будут одинаково смотреться в 256-цветном режиме(на старых мониторах) и в режиме True Color (32 бита).