HTML и CSS — Страница 3
Поиск
гибкость

Об адаптивности сайтов

Здравствуйте уважаемые посетители! На наших глазах много лет происходила эволюция Web'а. Сначала были невзрачные для глаза примитивные сайты, сделанные как правило на таблицах. Возможности css и браузеров тогда не впечатляли. Но они были резиновыми, что давало им возможность подстраиваться под разные экраны. Можно сказать это была первая ступень в достижении адаптивности. Следующий этап - вебдванольность, тени, градиенты, закругленные уголки. Фиксированные макеты, в какой то мере были данью моде, в какой-то мере, не обладая адаптивностью решали проблемы резиновых макетов - удобство для пользователей, так как слишком широкий макет содержит слишком длинные строки, которые трудно читать. Нынешний этап - значительно расширевшиеся возможности CSS, а также назревшая необходимость в создании адаптивных сайтов, вызванная появлением огромного числа различных устройств. Сайтов, отображение которых будет наилучшим образом, оптимально для пользователей, подстраиваться под доступную ширину. Причем правильный подход заключается именно в изменении отображения в зависимости от ширины экрана, без привязки к конкретному устройству, потому что таких устройств может быть очень много и это число будет только расти. Такой инструмент, к тому же имеющий неплохую поддержку браузеров, нам предоставил CSS3 - это медиазапросы.

Категория : HTML и CSS
Автор : Nikel
emmet

Ускорение верстки с помощью ZenCoding / Emmet

Привет всем! Существуют инструменты, способные значительно ускорить написание кода html и css. Хочу рассказать об одном из них, наиболее эффективном - это Emmet, ранее известный под названием Zen Coding. Про последний, наверное, слышали многие, поскольку он появился довольно давно примерно году в 2008. А если не знаете расскажу. Он представляет собой плагин к популярным редакторам, таким как NetBeans, Dreamviewver, Notepad++, Sublime. Простота и удобство его заключается в том, что его практически не нужно изучать так как синтаксис практически совпадает с синтаксисом CSS. Emmet является усовершенствованным продолжением проекта, в частности в нем реализованы продвинутые возможности по быстрому написанию свойств стилей и большее число полезных команд. Впервые с таким улучшенным Zen Coding я столкнулась работая с онлайн-сервисом, редактором кода Codepen.io. Полный список сервисов и программ, поддерживающих Emmet можно найти на сайте разработчика. А сейчас давайте разберем его принцип действия и основные функции.

Автор : Nikel

Вертикальное выравнивание элементов средствами CSS

Здравствуйте! В прошлый раз мы рассмотрели выравнивание по горизонтали. Гораздо более интересным является выравнивание по вертикали, которое не было предусмотрено для блочных элементов в CSS 2.1 и требовало применения различных ухищрений. Если в старые времена для этой цели идеально подходили таблицы, то теперь, когда верстка таблицами стала порицаема, их с успехом заменили элементы с display:table-cell. Также распространена методика с позиционированием и широкое использование inline-block.

Категория : HTML и CSS
Автор : Nikel

Как выравнять по центру элемент на веб-странице?

Здравствуйте, читатели блога! Очень часто во время верстки приходится сталкиваться с проблемой выравнивания элемента по центру веб-страницы. Способы решения самые разные, рассмотрим как выравнивание блока фиксированной ширины, так и выравнивание горизонтального меню или таблицы произвольной ширины

Категория : HTML и CSS
Автор : Nikel
навигация

Как сделать резиновое меню? Способы создания горизонтальной навигации на сайте.

Перед многими вебмастерами и верстальщиками стоит проблема создания резинового меню, которое растягивается в зависимости от ширины окна браузера. Такое меню может состоять как из отдельных блоков, так и из строчных элементов (простейшая разновидность навигации), в зависимости от поставленной задачи. Навигация из блоков в свою очередь тоже может отличаться. Первый, более распространенный вариант, заключается в создании блоков одинаковой ширины, равномерно распределенных на всю доступную область пространства, предоставленную родительским элементом, либо окном браузера. Ширина пунктов меняется динамически. Второй вариант более сложен, можно даже сказать нетривиален. Он заключается в создании пунктов меню с шириной зависящей от содержимого, но динамически меняющимися отступами. Под отступами я здесь понимаю расстояние между текстом и границей блока слева или справа. Знаете, существует такой популярный рецепт CSS-меню, когда для каждого пункта меню не задается явная ширина, но зато указываются внутренние отступы (padding), одинаковые для всех пунктов. Так вот здесь задача сводится к созданию меню, которое выглядит подобным образом, но еще и обладает резиновостью за счет изменения отступов.

Категория : HTML и CSS
Автор : Nikel
шрифты

Как заменить логотип картинкой?

Приветствую, дорогие читатели! Всем известно, что зачастую дизайнеры, создавая макет для какого-нибудь сайта, не пренебрегают использованием различных нестандартных шрифтов. Это безусловно создает перед верстальщиком проблему: каким образом представить на web-странице нарисованный дизайнером шрифт? Естественно существует несколько путей решения данной проблемы, и в этой статье мы займемся их рассмотрением.

Категория : HTML и CSS
Автор : Nikel

Изучаем html и css (для новичков)

Здравствуйте! Об HTML написано немало учебников и справочников с которыми вы всегда можете ознакомиться позднее. Этот урок создан специально для новичков в сайтостроении, делающих первые шаги, чтобы они  получили общее представление о предмете. Что такое язык разметки HTML? Что такое теги и в их чем отличие от элементов? Для чего применяются каскадные таблицы стилей? Прочитайте об этом в моей статье.

Категория : HTML и CSS
Автор : Nikel
1 2 3
Страница 3 из 3