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

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

Полностью адаптивные таблицы с использованием элементов определений терминов

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

Нам хотелось создать галерею изображений, которая бы последовательно разворачивалась для показа всех изображений и при раскладывании которой происходила бы интересная трехмерная анимация. Когда галерея слегка развернута, но все еще сложена, она выглядит подобным образом:
Далее... Нет комментариев »
Сложных стили для списков со встроенными шрифтами и динамическим содержимым

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

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

В этом уроке мы расскажем о довольно простом, но интересном примере использования прокрутки HTML для приближения изображений. При правильно подобранном изображении (как, например в этом уроке) эффект может выглядеть космически. А еще это неплохой инструмент для различных версий онлайн-магазинов, в который важно посмотреть фото товара поближе.
Далее... Нет комментариев »
Создание дробей с помощью замены на символ из шрифтов OpenType

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

Мы решили создать свой вариант необычной галереи изображений без использования JavaScript, только с помощью кода CSS. Такая галерея изображений больше всего подходит группе из не более двух десятков изображений. Целью этой галереи является возможность отфильтровать элементы по типу так же, как в настоящей базе данных, только все элементы этой базы данных — изображения.
Далее... Нет комментариев »
Создание фонового видео, прокручивающегося вместе с содержимым

Этот урок родился из другого туториала, в котором было описано создание полноэкранного фонового видео HTML5. Одним из главных вопросов был эффект прокручивания полноэкранного видео, расположенного за содержимым и поднимающегося при прокрутке вверх вместе со всей веб-страницей. Решение в этой ситуации довольно простое: использование расположений CSS месте со стилями, обычно используемыми для растягивающихся изображений. А также [...]
Далее... 11 Комментариев »
Использование значения свойства CSS ширины по размеру содержимого

Хотя некоторые новые свойства и значения свойств, такие как object-fit (подходить для объекта), max-content (по максимальному размеру содержимого), min-content (по минимальному размеру содержимого) и fit-content (по ширине содержимого) еще считаются экспериментальными, они уже хорошо поддерживаются браузерами, иногда нуждаясь в добавлении приставок производителей.
Далее... Нет комментариев »