Записи, помеченные ‘верстка’
-
Полностью адаптивные таблицы с использованием элементов определений терминов
К созданию полностью адаптивных таблиц можно подходить по-разному. Например, нередко может быть полезен нелогичный на первый взгляд подход: сначала создать разметку и стили для мобильных устройств, и только после этого используя CSS задать подходящий внешний вид для таблицы на больших экранах.
Далее... Нет комментариев » -
Создание раскладывающейся трехмерной галереи изображений
Нам хотелось создать галерею изображений, которая бы последовательно разворачивалась для показа всех изображений и при раскладывании которой происходила бы интересная трехмерная анимация. Когда галерея слегка развернута, но все еще сложена, она выглядит подобным образом:
Далее... Нет комментариев » -
Сложных стили для списков со встроенными шрифтами и динамическим содержимым
Списки — хороший способ упорядочить контент, сделать его читабильнее, понятнее и разбавить текстовую верстку. Но не каждый список справится с этой задачей. Давайте рассмотрим, как можно создать сложные интересно выглядящие списки.
Далее... 1 Комментарий » -
Создание автоматического добавления QR кодов на веб-страницы
Есть несколько ситуаций, в которых вездесущие QR коды могут быть уместны или даже полезным при печати веб-страниц. В некоторых ситуациях может быть уместно добавить видимый адрес ссылки после слов, с которых происходит ссылка на напечатанной веб-страницы. Хотя это можно сделать, пользователю придется перепечатывать эту ссылку вручную. Если же вместо этого использовать QR код, можно будет просто отсканировать [...]
Далее... Нет комментариев » -
Сильное увеличение изображения с помощью прокрутки HTML5
В этом уроке мы расскажем о довольно простом, но интересном примере использования прокрутки HTML для приближения изображений. При правильно подобранном изображении (как, например в этом уроке) эффект может выглядеть космически. А еще это неплохой инструмент для различных версий онлайн-магазинов, в который важно посмотреть фото товара поближе.
Далее... Нет комментариев » -
Создание дробей с помощью замены на символ из шрифтов OpenType
Идеальным решением для создания дробей на веб-страницах было бы использование такого шрифта, который бы автоматически создавал правильные дроби из использованных в тексте числителя и знаменателя. Эта возможность автоматически заменять символы присутствует у некоторых шрифтов OpenType.
Далее... Нет комментариев » -
Создание галереи изображений на чистом CSS
Мы решили создать свой вариант необычной галереи изображений без использования JavaScript, только с помощью кода CSS. Такая галерея изображений больше всего подходит группе из не более двух десятков изображений. Целью этой галереи является возможность отфильтровать элементы по типу так же, как в настоящей базе данных, только все элементы этой базы данных — изображения.
Далее... Нет комментариев » -
Создание фонового видео, прокручивающегося вместе с содержимым
Этот урок родился из другого туториала, в котором было описано создание полноэкранного фонового видео HTML5. Одним из главных вопросов был эффект прокручивания полноэкранного видео, расположенного за содержимым и поднимающегося при прокрутке вверх вместе со всей веб-страницей. Решение в этой ситуации довольно простое: использование расположений CSS месте со стилями, обычно используемыми для растягивающихся изображений. А также [...]
Далее... 11 Комментариев » -
Использование значения свойства CSS ширины по размеру содержимого
Хотя некоторые новые свойства и значения свойств, такие как object-fit (подходить для объекта), max-content (по максимальному размеру содержимого), min-content (по минимальному размеру содержимого) и fit-content (по ширине содержимого) еще считаются экспериментальными, они уже хорошо поддерживаются браузерами, иногда нуждаясь в добавлении приставок производителей.
Далее... Нет комментариев »
Самые комментируемые
- Текст из крови в Adobe Photoshop 549
- Насколько важно сегодня использовать Web Safe цвета? 538
- 20 наборов кистей для Фотошопа, которые вам пригодятся 530
- Текст из воды в Adobe Photoshop 518
- 45 новых удивительных наборов кистей для творчества 423
- Более 40 фотореалистичных рисунков 205
- Ретро и винтажная типографика в веб-дизайне 194
- 30 примеров фрактального искусства 191