Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
Сегодня мы разберем яркий пример того, как использовать CSS3. Мы начнем с создания очень реалистичного 3D шара на чистом CSS3 и добавим немного анимации для того, чтобы придать шару «живой» эффект.
ДЕМО
Исходные файлы
Недавно я писал, что Greensock, прекрасная библиотека для скриптовой анимации на Flash,
теперь поддерживает и JavaScript. В этой статье я продемонстрирую основы работы с GSAP v12 (beta). Результат будет примерно таким:
Сразу оговорюсь, что графику и идею для примера я взял из
документации $fx(), ведь кто из нас откажется

Вчера
был опубликован черновик стандарта Media Queries level 4. Главные нововведения будущего стандарта — свойства
pointer и
hover — направлены на улучшение поддержки устройств, управляемых пальцами.
Свойство
hover равно 1, если у устройства есть указатель, который можно навести на элемент без нажатия, и 0, если нет. Привычное для десктопных компьютеров поведение веб-сайта, когда при зависании над элементом указателя мыши появляется выпадающее меню или подсказка, создаёт много проблем пользователям планшетов и смартфонов. Свойство
hover позволит не отказываться от него полностью, а продолжать использовать там, где возможно. Пример:
Всем доброго времени суток!
Совсем недавно мне нужно было сотворить некий
multi-action control для списка записей. На ум сразу же пришло использование
split button dropdown, т.е. в данном случае кнопки отправки формы совмещенной с выпадающим списком экшенов. Подобные контролы не редко можно встретить в современных интерфейсах. Также существуют готовые решения входящие в сборки типа
Twitter Bootstrap.
Однако реализации подобные бутстраповским не нравятся по нескольким причинам:
- излишняя и не совсем нейтивная разметка
- заточенность под javascript
Именно по этим причинам я решил заделать собственный вариант подобного контрола. Сразу хочу отметить, что все идеи реализовать так и не удалось, поэтому способ не претендует на полную замену js-решениям. Опять же, выкладываю его только для тех, кому будет полезно.
Этот перевод статьи Джошуа Джонсона — скорее памятка для решения такой тривиальной задачи, как центрирование элементов на странице. Зачастую это занимает гораздо больше времени при верстке, чем ожидается. В статье на примерах показано, как правильно выравнивать блоки или текст с помощью CSS — от самых простых случаев.
Поначалу введение кнопок, заметно выпадающих из дизайна по своим размерам, встретила
массу осуждений в топике, посвящённом обновлению сайта 22 мая. Представитель Хабра
Boomburum вполне с этим согласен и
предлагает дизайн кнопки отправлять ему на личное сообщение. Однако, красивость одного решения, которое созрело в течение дня, предлагаю оценить всем.
Картинка для привлечения внимания:
На этот раз Google со своим дудлом превзошёл сам себя
А посвящён он
Роберту Мугу — пионеру электронной музыки. Он родился 23 мая 1934 года. Собственно, на главной Google упрощённая версия его синтезатора.
Все началось с небольшого эксперимента из учебника +Nettuts, который рассказывает, как встроить 3D-графики в HTML-страницы с помощью CSS, изображений и JavaScript. После прочтения урока я загорелся желанием превратить эту идею на чистом CSS и посмотреть, как далеко я могу её усовершенствовать. Первоначальная задача заключалась в создании классических полупрозрачных 3D блоков, с 6 сторонами. Наша задача состоит в том, чтобы создать 3D-график.
ДЕМО
Исходные файлы
Если пользователь попадает на стандартную страницу ошибки 404, велика вероятность того, что он покинет веб-сайт и вряд ли вернется. Кастомная страница 404, полезная и привлекательная, способствует дальнейшему пребываниваю на вашем веб-сайте.