2012-11-27 21:22:02
Доброго времени суток уважаемые читатели Хабра. Существуют замечательные CSS свойства с помощью ...
+ развернуть текстсохранённая копия
Доброго времени суток уважаемые читатели Хабра. Существуют замечательные CSS свойства с помощью которых можно задать реверсивное движение анимации — animation-direction: alternate и animation-direction: alternate-reverse (не путать со свойством animation-direction: reverse, которое задает реверсивное направление), но на сегодняшний день их не поддерживает большинство современных браузеров. Я хочу рассказать о том как сделать кроссбраузерную реверсивную анимацию фона.
При работе над очередным проектом, каждому мало-мальски поднабившему руку web-разработчику, приходится выполнять рутинные задачи. Немало сил и времени отнимает работа с таблицами CSS, а с появлением новых стандартов и функций CSS3, вместе с уникальными возможностями, прибавилось и работы по написанию кода. Благо на просторах глобальной сети находятся светлые головы, которые быстро подсуетившись, без лишних раздумий, [...]
2012-11-04 21:24:58
Всем привет! Сегодня Вы научитесь использовать псевдоэлемент ::select, с помощью которого можно ...
+ развернуть текстсохранённая копия
Всем привет! Сегодня Вы научитесь использовать псевдоэлемент ::select, с помощью которого можно управлять цветом выделенных элементов страницы сайта. Также я расскажу о новом способе защиты текстов от копирования. Приступим
Чтобы посмотреть урок полностью, кликните по названию урока.
Не так давно я показывал пример создания анимированного горизонтального меню. Сегодня продолжим и поговорим про вертикальное меню. Оно используется гораздо реже, нежели горизонтальное, но все же бывает. Попробуем сделать крутое вертикальное меню с круглыми кнопками.
Сначала - картинка для привлечения внимания, чтобы вам было интересно ;) Мы будем создавать меню, по стилю схожее с символом Инь-Янь, в черно-белых тонах.
Ну и сразу ссылка на демо-страницу.
Начнем традиционно - со структуры HTML:
[html]
<nav class="menu">
<ul>
<li>
<a href="#">
<h3 class="headline">главная</h3>
<h4 class="description">это ясно...</h4>
</a>
</li>
<li>
<a href="#">
<h3 class="headline">Работы</h3>
<h4 class="description">посмотреть...</h4>
</a>
</li>
<li>
<a href="#">
<h3 class="headline">блог</h3>
<h4 class="description">почитать...</h4>
</a>
</li>
</ul>
</nav>
[/html]
Как видите ничего сложного, все традиционно - список, в котором содержатся нужные нам элементы: cсылка, заголовок пункта меню и описание.
Перейдем к стилям, там самое интересное:
[css]
.menu{
width:200px;
margin:60px 0 0 30px; /* двигаем меню, 60 сверху и 30 слева */
float:left; /* обтекание слева */
}
.menu ul{
list-style:none;
margin:0;
padding:0;
}
.menu ul li{
width:140px; /* ширина элементов */
height:140px; /* высота элементов */
margin-bottom:-40px;
border-radius:100%; /* круглим, лучше в % */
overflow:hidden;
position:relative;
-webkit-box-shadow:0 1px 2px #999;
-moz-box-shadow:0 1px 2px #999;
box-shadow:0 1px 2px #999;
text-align:center; /* текст по центру */}
[/css]
Я комментирую свой код, чтобы потом было легче разбираться, это, кстати, очень хорошая практика ;) Собственно, этим кодом мы задаем общие стили для элементов списка. Сначала задаем ширину и высоту, потом превращаем квадраты в круги, используя border-radius.
Перейдем к формированию "каскада" из элементов:
[css]
.menu ul li:nth-child(even){
float:left;
-webkit-box-shadow:0 1px 2px #666;
-moz-box-shadow:0 1px 2px #666;
box-shadow:0 1px 2px #666;
background:#000;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2B2B2B), to(#000));
background:-webkit-linear-gradient(top, #2B2B2B, #000);
background:-moz-linear-gradient(top, #2B2B2B, #000);
background:-ms-linear-gradient(top, #2B2B2B, #000);
background:-o-linear-gradient(top, #2B2B2B, #000);
}
.menu ul li:nth-child(odd){
float:right; /* следующий - справа */
background:#FFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE));
background:-webkit-linear-gradient(top, #FFF, #EEE);
background:-moz-linear-gradient(top, #FFF, #EEE);
background:-ms-linear-gradient(top, #FFF, #EEE);
background:-o-linear-gradient(top, #FFF, #EEE);
}
[/css]
Используя псевдокласс ntn-child, мы можем применять стили к элементам, на основе их нумерации в дереве элементов. Допустим, наше вертикальное меню - список из 5 элементов. Используя ntn-child(even), мы назначаем стиль каждому четному элементу, nth-child(odd) - соответственно, нечетному. Код выше как раз это демонстрирует. Псевдокласс имеет достаточно гибкие и мощные "настройки", если будет интересно - дайте знать, расскажу подробнее об этом.
Закончили с элементами списка, перейдем к заголовку и описанию:
[css]
.menu .headline{
padding-top:45px; /* отступ сверху */
font-family: 'Ubuntu', sans-serif;/*Шрифт заголовка*/
font-size:1em; /* размер для заголовков */
color:#333; /* цвет заголовков */
text-transform:uppercase; /* Все в верхний регистр */
text-shadow:0 0 1px #CCC;
}
.menu ul li:nth-child(even) .headline{
color:#FFF;
}
.menu .description{
font-family: 'Ubuntu', sans-serif;/*Шрифт описания*/
font-size:16px; /* размер для подзаголовков */
color:#999; /* цвет */
text-shadow:1px 1px 1px #CCC;
}
.menu ul li:nth-child(even) .description{
color:#CCC;
text-shadow:none;
}
.menu ul li:hover .headline{
font-size:20px; /* размер при наведении*/
color:#888; /* Цвет при наведении */
text-shadow:none;
}
.menu ul li:active .headline{
color:#FFF; /* Цвет при клике */
}
[/css]
Оформили заголовок и описание, настроили их поведение при наведении. Теперь для плавности нужно добавить немного магии :)
[css]
.menu ul li a{
display:block;
width:100%;
height:100%;
text-decoration:none;
}
.menu .headline, .menu .description{
margin:0;
padding:0;
font-weight:normal;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
[/css]
Анимация очень простая, при наведении шрифт заголовка увеличивается, меняя цвет.
Вот и все... У нас получилось вертикальное меню, по стилю схожее с символом Инь-Янь, к чему я и стремился. Если у кого не получилось, или он "профилонил" - ссылка на исходники ниже.
2012-10-26 06:45:40
Недавно встала задача определить поддержку background-position-x(y) в браузере.
Для чего? Для ...
+ развернуть текстсохранённая копия
Недавно встала задача определить поддержку background-position-x(y) в браузере.
Для чего? Для того, чтобы применить css transition там,
где браузер не поддерживает анимацию background по определенной оси.
Вот сниппет для jQuery:
(function($){
// Проверяем поддержку background-position-x
var bgx = (function(el){
return typeof el.css('backgroundPositionX') !== 'undefined';
}(/* Ваш элемент */));
}(jQuery));
+ развернуть текст 
Ну и сразу ссылка на демо-страницу.
Начнем традиционно - со структуры HTML:
[html]
<nav class="menu">
<ul>
<li>
<a href="#">
<h3 class="headline">главная</h3>
<h4 class="description">это ясно...</h4>
</a>
</li>
<li>
<a href="#">
<h3 class="headline">Работы</h3>
<h4 class="description">посмотреть...</h4>
</a>
</li>
<li>
<a href="#">
<h3 class="headline">блог</h3>
<h4 class="description">почитать...</h4>
</a>
</li>
</ul>
</nav>
[/html]
Как видите ничего сложного, все традиционно - список, в котором содержатся нужные нам элементы: cсылка, заголовок пункта меню и описание.
Перейдем к стилям, там самое интересное:
[css]
.menu{
width:200px;
margin:60px 0 0 30px; /* двигаем меню, 60 сверху и 30 слева */
float:left; /* обтекание слева */
}
.menu ul{
list-style:none;
margin:0;
padding:0;
}
.menu ul li{
width:140px; /* ширина элементов */
height:140px; /* высота элементов */
margin-bottom:-40px;
border-radius:100%; /* круглим, лучше в % */
overflow:hidden;
position:relative;
-webkit-box-shadow:0 1px 2px #999;
-moz-box-shadow:0 1px 2px #999;
box-shadow:0 1px 2px #999;
text-align:center; /* текст по центру */}
[/css]
Я комментирую свой код, чтобы потом было легче разбираться, это, кстати, очень хорошая практика ;) Собственно, этим кодом мы задаем общие стили для элементов списка. Сначала задаем ширину и высоту, потом превращаем квадраты в круги, используя border-radius.
Перейдем к формированию "каскада" из элементов:
[css]
.menu ul li:nth-child(even){
float:left;
-webkit-box-shadow:0 1px 2px #666;
-moz-box-shadow:0 1px 2px #666;
box-shadow:0 1px 2px #666;
background:#000;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2B2B2B), to(#000));
background:-webkit-linear-gradient(top, #2B2B2B, #000);
background:-moz-linear-gradient(top, #2B2B2B, #000);
background:-ms-linear-gradient(top, #2B2B2B, #000);
background:-o-linear-gradient(top, #2B2B2B, #000);
}
.menu ul li:nth-child(odd){
float:right; /* следующий - справа */
background:#FFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE));
background:-webkit-linear-gradient(top, #FFF, #EEE);
background:-moz-linear-gradient(top, #FFF, #EEE);
background:-ms-linear-gradient(top, #FFF, #EEE);
background:-o-linear-gradient(top, #FFF, #EEE);
}
[/css]
Используя псевдокласс ntn-child, мы можем применять стили к элементам, на основе их нумерации в дереве элементов. Допустим, наше вертикальное меню - список из 5 элементов. Используя ntn-child(even), мы назначаем стиль каждому четному элементу, nth-child(odd) - соответственно, нечетному. Код выше как раз это демонстрирует. Псевдокласс имеет достаточно гибкие и мощные "настройки", если будет интересно - дайте знать, расскажу подробнее об этом.
Закончили с элементами списка, перейдем к заголовку и описанию:
[css]
.menu .headline{
padding-top:45px; /* отступ сверху */
font-family: 'Ubuntu', sans-serif;/*Шрифт заголовка*/
font-size:1em; /* размер для заголовков */
color:#333; /* цвет заголовков */
text-transform:uppercase; /* Все в верхний регистр */
text-shadow:0 0 1px #CCC;
}
.menu ul li:nth-child(even) .headline{
color:#FFF;
}
.menu .description{
font-family: 'Ubuntu', sans-serif;/*Шрифт описания*/
font-size:16px; /* размер для подзаголовков */
color:#999; /* цвет */
text-shadow:1px 1px 1px #CCC;
}
.menu ul li:nth-child(even) .description{
color:#CCC;
text-shadow:none;
}
.menu ul li:hover .headline{
font-size:20px; /* размер при наведении*/
color:#888; /* Цвет при наведении */
text-shadow:none;
}
.menu ul li:active .headline{
color:#FFF; /* Цвет при клике */
}
[/css]
Оформили заголовок и описание, настроили их поведение при наведении. Теперь для плавности нужно добавить немного магии :)
[css]
.menu ul li a{
display:block;
width:100%;
height:100%;
text-decoration:none;
}
.menu .headline, .menu .description{
margin:0;
padding:0;
font-weight:normal;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
[/css]
Анимация очень простая, при наведении шрифт заголовка увеличивается, меняя цвет.
Вот и все... У нас получилось вертикальное меню, по стилю схожее с символом Инь-Янь, к чему я и стремился. Если у кого не получилось, или он "профилонил" - ссылка на исходники ниже.
