Записи, помеченные ‘урок верстка’
-
Создание маркировки для списков с использованием изображений
Можно уникальным образом украсить списки несколькими способами. Первый и самый лучший вариант — использование рамок и генерируемого содержимого. Но иногда элементы пунктов списка выделяются таким необычным образом, что приходится специально для этого создавать изображение и применять его с помощью свойства list-style-image (изображения стиля списка) или свойства фонового изображения. Так как это оформление будет применяться к каждому элементу [...]
Далее... Нет комментариев » -
Создание разметок с использованием CSS: текст в несколько колонок
Если вам нужно создать верстку веб-страницы с отдельно находящимися текстами, которым не нужно перетекать между колонками, то код CSS довольно прост. Используя простой дизайн как основу, оберните каждую отдельную колонку текста в блок:
Далее... Нет комментариев » -
Создание видео эффектов HTML5 с использованием режимов наложения CSS
Общепринятые видео эффекты, такие как фильтры, переходы и смешивания, обычно применяются в программе-обработчике видео, такой как Adobe Premiere или Apple’s Final Cut. Несмотря на то, что в этом есть очевидные преимущества, любые изменения, сделанные в программе-обработчике видео, встроены в это видео, и их нельзя изменить или отменить после выпуска видео.
Далее... Нет комментариев » -
Создание различной маркировки для списков
Самое простое, что можно сделать со списками HTML, — изменить значение свойства list-style-type (типа стиля списка). Обратите внимание, свойство list-style (стиля списка) — это другое свойство, важно их не путать. В спецификациях CSS1 и CSS2 выбор значений типа стиля списка довольно ограничен. В спецификации CSS3 вариантов значений гораздо больше, но не все они поддерживаются даже в самых современных версиях браузеров.
Далее... Нет комментариев » -
Создание необычных непрямоугольных веб-дизайнов
То, что все в CSS состоит из блоков, не означает, что все должно выглядеть прямоугольно. По факту блочная модель CSS приводит к веб-дизайнам, основанным на сетках. Удобные и имеющие корни в печатной продукции, сетки стали основой дизайнов огромного количества сайтов. Но у них также есть ограничения: если использовать при разработке веб-сайта только два или три столбца базовых цветов, может [...]
Далее... Нет комментариев » -
Новый подход к адаптивным таблицам
Geoff Yuen продемонстрировал очень эффективный способ создания адаптивных таблиц HTML. У этого примера было всего две небольших проблемы: код CSS был записан в Sass и в нем было много повторений и избыточность в использовании атрибута данных. Наше решение не имеет этих недостатков.
Далее... 1 Комментарий » -
Используем необычные шрифты для заполнения макета сайта
Большинство веб-дизайнеров сталкивались с ситуациями, когда заказчик спрашивал: «Этот текст на латыни… Его же не будет в окончательном варианте, правда?». Есть много альтернатив для привычной «рыбы» lorem ipsum, но ни один из этих генераторов не решает основную проблему: клиенты всегда будут считать заполняющий текст окончательным вариантом. Недавно нам попалось несколько интересных и творческих подходов к этой проблеме: [...]
Далее... Нет комментариев » -
Создание бокового меню
Вертикально расположенное меню на веб-сайте в чем-то легче создать, так как список изначально создается вертикальным, основная проблема при этом — создать макет. Код меню HTML в этой ситуации будет примерно таким же, как и в других:
Далее... Нет комментариев » -
Создание простых рамок с использованием CSS
Каждому элементу HTML можно создать простую рамку с помощью CSS, используя один из десяти стилей: none (нет), hidden (спрятанная), solid (цельная), dashed (подчеркиваниями), dotted (точками), groove (углубленная), ridge (приподнятая), double (двойная), inset (внутренняя) и outset (внешняя). Также в спецификации CSS3 есть три стиля, которые не поддерживаются ни в одном браузере: wave (волна), dot-dash (точками и подчеркиваниями), [...]
Далее... Нет комментариев »
Самые комментируемые
- Текст из крови в Adobe Photoshop 549
- Насколько важно сегодня использовать Web Safe цвета? 538
- 20 наборов кистей для Фотошопа, которые вам пригодятся 530
- Текст из воды в Adobe Photoshop 518
- 45 новых удивительных наборов кистей для творчества 423
- Более 40 фотореалистичных рисунков 205
- Ретро и винтажная типографика в веб-дизайне 194
- 30 примеров фрактального искусства 191