Вёрстка для мобильных устройств — очень мало освещённая и молодая тема для веб-разработчиков. Перед собственно постом с технической информацией, позвольте сделать небольшое лирическое отступление.
Мобильный телефон давно перестал быть только средством для звонков и отправки смс, благодаря безлимитным тарифам от сотовых операторов теперь можно полноценно «сёрфить» в сети. Например, согласитесь удобно посмотреть новое меню любимого кафе или адрес и схему проезда шинного центра который порекомендовал ваш друг. Получив смс о распродаже в магазине, можно сразу же зайти на их сайт и просмотреть есть ли интересные предложения. Преимущества мобильного интернета можно перечислять бесконечно, но чтобы воспользоваться этими благами нужна отдельная вёрстка и дизайн для мобильных устройств. К счастью большинство заказчиков и разработчиков это понимают, тема веб-разработки под мобильные устройства становиться всё популярнее.
Рубрика: HTML, CSS, JS
Предлагаю небольшую подборку горизонтальных слайдеров. Наиболее частое использование — карусель товаров, фотогалереии или картинок к постам. Можно было бы конечно сделать пост 50 видов слайдеров, но это были бы всего лишь вариации приведённых ниже.
Продолжаю серию статей посвящённых плагину для FireFox — FireBug. Сегодняшний пост посвящён работе с CSS.
FireBug — расширение для FireFox, одной из функций которого является работа с исходным кодом страницы.
Данная статья является первой в цикле публикаций посвящённым плагину FireBug для FireFox, а так же его дополнений. Начну с расширения позволяющего проанализировать факторы влияющие на скорость загрузки страницы.
Начиная писать для блога, нужно забыть все уроки литературы и все сочинения, которые мы писали в школе. Почему, спросите Вы. Ответ очень прост. Для чтения текста на бумаге и на экране монитора нужны разные правила. О них то мы и поговорим в статье ниже.
Предлагаю немного поэкспериментировать с видео тегами в html5 (в этом нам поможет замечательная статья на ресурсе www.craftymind.com) и найти некоторые функции которые не очевидны с первого взгляда.
Одна из них это Canvas.drawImage(). Приведу описание с сайта проекта.
Для размещения изображения на подложке страницы можно использовать метод drawImage. Этот метод может быть вызван с тремя различными наборами аргументов.
- drawImage(image, dx, dy)
- drawImage(image, dx, dy, dw, dh)
- drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
Возможность создания такого градиента с помощью CSS, была вынесена на рассмотрение Webkit около двух лет назад, но редко использовалась из-за несовместимости с остальными браузерами (напомню, этот движок используют только сафари и хром).
С одним из последних обновлений FireFox (версия 3.6) появилась возможность совершенно корректно использовать данную опцию.
В своей практике я использую 2 метода (не я их придумала), первый наиболее часто:
1 метод — Использование автоматических внешних отступов.
Код страницы при этом выглядит так:
//собственно подложка
Код CSS
#wrapper {
width:1200px;
margin:0 auto;
text-align:left; //для IE
}
Рубрики
Дочерние селекторы
Недавно столкнулась с проблемой, для отображения меню задала стиль для элементов li, вложенные элементы соответственно получили тот же стиль, при этом если использовать дочерние элементы — не будет работать в ИЕ6, пришлось идти на некоторые жертвы…. А всё потому что надо больше книг читать )….