верстка - Страница 6

Записи, помеченные ‘верстка’

Использование свойства CSS перспективы

Для создания трехмерных трансформаций, правильно работающих на веб-сайтах, нужно использование свойства CSS перспективы, с которым у большинства веб-разработчиков в начале знакомства с трехмерными эффектами CSS могут возникать проблемы. Первое и самое важное — свойство перспективы обычно задается элементам внешних блоков, таким как <body>, <figure> и <div>. Это позволит производить трехмерные преобразования над элементами потомков, такими [...]
Далее... Нет комментариев »
Как доказать, что при помощи CSS можно задать стили чему угодно на странице

Этот трюк вряд ли когда-либо пригодится вам в работе, но он интересный и необычный, а также это замечательный способ увидеть всю силу кода CSS. Обычно большинство веб-разработчиков полагает, что можно задать стили только содержимому, находящемуся внутри тега <body> документа HTML. Хотя этого и полностью хватает для создания веб-сайта, но это неправда.
Далее... Нет комментариев »
Использование свойства CSS размера табуляции для сохранения пробела

По умолчанию страницы HTML при отображении пропускают все, что больше одного пробела, и не показывают лишние пробелы, чтобы не занимать больше места. Наиболее распространенный способ компенсировать это поведение — задать внутренний или внешний отступ влево или вправо от элемента как замену пробелам, и это является лучшим решением в большинстве случаев. Но бывают ситуации, в которых хотелось бы сохранить настоящие символы [...]
Далее... Нет комментариев »
Создание адаптивной галереи изображений HTML5 с подписями

При создании адаптивных галерей изображений на CSS3 встает вопрос, как добавить подпись к каждому изображению. Решить эту задачу довольно просто, особенно используя понятную разметку HTML5. Наш пример создан на основании кода из вышеупомянутого урока, так что для подробного объяснения создания анимации обратитесь к нему. Здесь же мы сосредоточимся на задании стилей и использовании новых элементов.
Далее... Нет комментариев »
Использование разных способов применения стилей CSS

Этот трюк вряд ли когда-либо пригодится Вам в работе, но он интересный и необычный, а также это замечательный способ увидеть всю силу кода CSS. Обычно большинство веб-разработчиков полагает, что можно задать стили только содержимому, находящемуся внутри тега <body> документа HTML. Хотя этого и полностью хватает для создания веб-сайта, но это неправда.
Далее... Нет комментариев »
Использование свойств задания вида подчеркивания ссылок

Ссылки крайне важны на веб-сайтах. И при этом по соображениям безопасности у них одни из самих жестких ограничений для задания стилей с использованием CSS. Дизайнеры долго жаловались, что внешний вид ссылок по умолчанию может влиять на разборчивость текста, мешая взаимодействию пользователя с сайтом. Но теперь спецификации CSS непосредственно занялись решением этой проблемы, улучшив внешний вид и [...]
Далее... Нет комментариев »
Создание последовательного появления элементов с использованием CSS

Как ни странно, появление элементов с задержкой создает впечатление, что веб-сайт работает быстрее: благодаря появляющимся элементам, у посетителей создается более благоприятное впечатление о веб-сайте. Перед тем, как создавать этот эффект, подготовим разметку. В примере ниже у нас есть коллекция фотографий в блоке:
Далее... Нет комментариев »
Использование наборов изображений в HTML5

Если вы регулярно используете наборы изображений CSS3 при создании веб-сайтов, вам может быть интересно, можно ли с их помощью как-то упростить создание меню в HTML5. Да, это возможно, хотя и не всегда выглядит обоснованным, о чем мы расскажем дальше.
Далее... Нет комментариев »
Фоны SVG в виде штриховки, сетки и шахматной доски

Штриховкой и перекрестной штриховкой можно назвать близко расположенные параллельные линии, которые используются для изображения тени, плотности и окрашивания в иллюстрациях. Они используется всюду: от гравюр до комиксов, и их довольно легко создать как фоны SVG. Так как штриховка и перекрестная штриховка близка к сеткам, рассмотрим и их. Простая штриховка в SVG также близка к полосам и диагоналям, [...]
Далее... Нет комментариев »