Дизайн и вёрстка для мобильных устройств

Вёрстка для мобильных устройств — очень мало освещённая и молодая тема для веб-разработчиков. Перед собственно постом с технической информацией, позвольте сделать небольшое лирическое отступление.
Мобильный телефон давно перестал быть только средством для звонков и отправки смс, благодаря безлимитным тарифам от сотовых операторов теперь можно полноценно «сёрфить» в сети. Например, согласитесь удобно посмотреть новое меню любимого кафе или адрес и схему проезда шинного центра который порекомендовал ваш друг. Получив смс о распродаже в магазине, можно сразу же зайти на их сайт и просмотреть есть ли интересные предложения. Преимущества мобильного интернета можно перечислять бесконечно, но чтобы воспользоваться этими благами нужна отдельная вёрстка и дизайн для мобильных устройств. К счастью большинство заказчиков и разработчиков это понимают, тема веб-разработки под мобильные устройства становиться всё популярнее. Читать далее Дизайн и вёрстка для мобильных устройств

Горизонтальная карусель на jQuery

Предлагаю небольшую подборку горизонтальных слайдеров. Наиболее частое использование — карусель товаров, фотогалереии или картинок к постам. Можно было бы конечно сделать пост 50 видов слайдеров, но это были бы всего лишь вариации приведённых ниже. Читать далее Горизонтальная карусель на jQuery

Инструкция по FireBug — вкладка CSS

Инструкция FireBug - вкладка CSS

Продолжаю серию статей посвящённых плагину для FireFox — FireBug. Сегодняшний пост посвящён работе с CSS. Читать далее Инструкция по FireBug — вкладка CSS

Как пользоваться FireBug — возможность правка HTML «на лету».

firebag инструмент для веб-разработчика

FireBug — расширение для FireFox, одной из функций которого является работа с исходным кодом страницы. Читать далее Как пользоваться FireBug — возможность правка HTML «на лету».

YSlow — средство анализа скорости загрузки страницы

YSlow

Данная статья является первой в цикле публикаций посвящённым плагину FireBug для FireFox, а так же его дополнений. Начну с расширения позволяющего проанализировать факторы влияющие на скорость загрузки страницы. Читать далее YSlow — средство анализа скорости загрузки страницы

Пять правил для повышения читаемости текста

повышение читаемости текста

Начиная писать для блога, нужно забыть все уроки литературы и все сочинения, которые мы писали в школе. Почему, спросите Вы. Ответ очень прост. Для чтения текста на бумаге и на экране монитора нужны разные правила. О  них то мы и поговорим в статье ниже. Читать далее Пять правил для повышения читаемости текста

Возможности видео в HTML 5

HTML5Предлагаю немного поэкспериментировать с видео тегами в html5 (в этом нам поможет замечательная статья на ресурсе www.craftymind.com) и найти некоторые функции которые не очевидны с первого взгляда.

Одна из них это Canvas.drawImage(). Приведу описание с сайта проекта.

Для размещения изображения на подложке страницы можно использовать метод drawImage. Этот метод может быть вызван с тремя различными наборами аргументов.

Создание градиента с помощью CSS

Создание градиента с помощью CSSВозможность создания такого градиента с помощью CSS, была вынесена на рассмотрение Webkit около двух лет назад, но редко использовалась из-за несовместимости с остальными браузерами (напомню, этот движок используют только сафари и хром).
С одним из последних обновлений FireFox (версия 3.6) появилась возможность совершенно корректно использовать данную опцию. Читать далее Создание градиента с помощью CSS

Центрирование подложки страницы

В своей практике я использую 2 метода (не я их придумала), первый наиболее часто:
1 метод — Использование автоматических внешних отступов.
Код страницы при этом выглядит так:

<div id="”wrapper”"> //собственно подложка</div>
 
 
Код CSS
#wrapper {
width:1200px;
margin:0 auto;
text-align:left; //для IE
}

Читать далее Центрирование подложки страницы

Дочерние селекторы

Недавно столкнулась с проблемой, для отображения меню задала стиль для элементов li, вложенные элементы соответственно получили тот же стиль, при этом если использовать дочерние элементы — не будет работать в ИЕ6, пришлось идти на некоторые жертвы…. А всё потому что надо больше книг читать )…. Читать далее Дочерние селекторы