Здравствуйте, читатели!
Недавно довелось копаться с рассылкой писем в HTML-формате. Есть много статей, написанных на тему валидной вёрстки рассылок, однако здесь речь пойдёт не об этом. Известно, что у каждого почтовика есть свои особенности отображения HTML-письма. Меня заинтересовали эти особенности и различия в отображении письма на разных почтовиках.
Читать полностью »
По ходу редизайна блога появилось желание создать 'Scroll to Top' функцию не только для десктопа, но и для мобильных устройств. В связи с небольшим свободным пространством на экране смартфона было решено сделать кнопку возвращения на верх в виде полоски высотой в 20px прикрепленную к нижней границе экрана. Читать полностью »
Учебник о том, чтобы создать полноэкранный макет с гладкой прокруткой на CSS. Использование навигационной кнопки радио и одноуровневый элемент combinators вызовет переход к соответствующей панели контента, создавая эффект «плавной прокрутки». Эта идея может быть полезна для веб-страницы или веб-приложения, где содержание должно быть строгого размера.
Новая версия Visual Studio 2012 предлагает значительное число нововведений в редакторы HTML/CSS/JavaScript. В этом обзоре я расскажу про основные нововведения, которые позволят веб-разработчикам писать код более быстро, удобнее и эффективнее.
Visual Studio 2012 полностью поддерживает HTML5 и все новые теги, которые предлагает новый стандарт. Это означает, что разработчики получают автодополнение новых тегов в редакторе (рисунок 1).
Рис.1. Автодополнение HTML5-тегов
Это так же означает встроенную поддержку валидации HTML5-кода в редакторе. Кроме того, для многих тегов механизм автодополнения создает кроссбраузерный код, например, автодополнение <video> на рисунке 1 приведет к автоматической генерации следующего кода (рисунок 2).
Читать полностью »
В этом учебном руководстве мы создадим полноэкранное слайд-шоу со скручиванием: мы будем скрывать открытый слайд с эффектом разреза, чтобы показать следующий или предыдущий слайд. При помощи различных атрибутов мы определим тип, угол вращения и масштаб слайдов, давая нам возможность создать уникальные эффекты переходов у каждого слайда.
Мы будем использовать следующие jQuery плагины:
Рабочая группа CSS в W3C, которая занимается созданием стандартов CSS, дает добро на использование CSS3 Transforms, Transitions и Animations без вендорных префиксов.Читать полностью »
В этом учебном руководстве мы создадим аккордеон с изображениями, который разворачивает элементы по щелчку. При помощи одноуровневого элемента combinators и вложенной структуры мы можем управлять открытием элементов/слайдов с помощью переключателей.
Все изображения используемые в демо, принадлежат Andrey & Lili: L’aquarelle on Behance.
Сегодня к нам пришло письмо от нашего гостя Andy Walpole который делится своим опытом создания Lightbox Ultra расположенный на Mozilla Demo Studio. Несколько лет назад разработчик Lokesh Dhakar создал сценарий лайтбокса с Prototype и script.aculo.us. Его плавная анимация и гладкая эстетика была хитом в обществе веб-дизайнеров, и он был использован во многих проектах.
На сегодняшний день уже существуют box-reflect и mask-image, которые позволяют создавать отражение элементов, но данные свойства доступны только в Safari и Chrome, да и работают не так как хотелось бы. Поэтому я хочу рассказать Вам как реализовать кроссбраузерное отражение на CSS.
Читать полностью »
Привет парни! Сегодня мы разберем яркий пример того, как использовать CSS3. Мы начнем с создания очень реалистичного 3D шара на чистом CSS3 и добавим немного анимации для того, чтобы придать шару «живой» эффект.
