Записи, помеченные ‘верстка’
-
Знакомство с предназначением кода CSS
Код HTML используется для создания разметки веб-страницы, все содержимое которой находится в различных элементах, таких как абзац, заголовок и другие. А для задания внешнего вида используется код CSS.
Далее... 1 Комментарий » -
Использование блочных и строчных элементов
На самом простом уровне существуют два варианта отображения элемента: блочный и строчный. Блочные элементы влияют на весь раздел содержимого. Элемент абзаца <p> — блочный: он определяет и отделяет текстовый блок. Элементы заголовков, такие как <h1> — <h6>, и элемент адреса <address> тоже блочные. Визуально блочные элементы всегда отображают содержимое на отдельных строках, другими словами, вставляют перевод строки.
Далее... 1 Комментарий » -
Создание адаптивного дизайна для встроенной Google карты
В целом вполне легко сделать встроенную Google карту адаптивной: просто удалите атрибуты высоты и ширины из кода для встраивания, предоставляемого Google, и замените подходящими кодами разметки и CSS. Но есть одна серьезная проблема: при любом изменении горизонтального размера окна перестанут быть видны края карты, что означает, что ее придется передвинуть или смасштабировать, чтобы вернуться к исходным координатам. Однако, [...]
Далее... 4 Комментариев » -
Свойство переноса оформления блока для разбитого переводом строки текста
Когда элементы HTML переносятся на следующую строку, они отобразятся довольно предсказуемо: подчеркнутый текст останется подчеркнутым, независимо от того, все ли слова расположены на одной строке или они разбиты на несколько строк. Но так как на сайтах используется все больше кода CSS и оформления, становится сложным точно знать заранее, какой эффект будут создавать разные стили, применяемые к элементам, в [...]
Далее... 1 Комментарий » -
Адаптивный дизайн для встроенных видео с сайтов Youtube и Vimeo
Подход, которым пользуются многие веб=разработчики для создания адаптивных изображений, нельзя использовать для видео с сайтов Youtube и Vimeo, так как они предоставляют свое содержимое, используя встроенные элементы iframe. Стандартный код, рекомендуемый для встраивания видео с сайта Youtube, следующий:
Далее... 1 Комментарий » -
Создание часов со стрелками
Сегодня мы будем создавать часы со стрелками. Хотя можно создать движение стрелок часов с помощью элементов HTML, трансформаций CSS и анимаций, нельзя задать таким часам правильное время для пользователя, для этого нам нужен Javascript. И если нам все равно понадобится Javascript, можно поэкспериментировать с программным интерфейсом приложения веб-анимации и показать, что в нем тоже можно использовать [...]
Далее... 2 Комментариев » -
Создание базового кода CSS для изображений
Для размещения изображения в коде HTML нужно как минимум следующее: <img src="xs-shirt.png" alt="Extra-Small Shirt">. В этом примере изображение на странице отобразится в своем исходном размере. Если изображение не может быть показано по любым причинам, значение атрибута alt будет выведено на экран как текстовая замена.
Далее... 1 Комментарий » -
Качественные печатные версии веб-страниц на фильтрах CSS
Веб-разработчики как бы пренебрегают файлами стилей для печати, но их присутствие нередко высоко ценится пользователями. Ранее мы рассказали о нескольких хороших приемах использования @media в файлах стилей для контроля того, что будет печататься, если пользователь захочет распечатать Вашу страницу на цветном принтере, но не рассмотрели ситуацию с использованием черно-белых принтеров, т. е., большинства лазерных принтеров.
Далее... 1 Комментарий » -
Немного полезного о тегах span, em и strong
В этой публикации мы затронем две важные темы — использование элемента span и создание наклонного и полужирного текста при помощи тегов em и strong. Вероятно вы узнаете кое-что новое и полезное. Запомнив и уловив тонкости однажды, в будущем вы будете применять эти элементы более корректно.
Далее... 1 Комментарий »
Самые комментируемые
- Текст из крови в Adobe Photoshop 549
- Насколько важно сегодня использовать Web Safe цвета? 538
- 20 наборов кистей для Фотошопа, которые вам пригодятся 530
- Текст из воды в Adobe Photoshop 518
- 45 новых удивительных наборов кистей для творчества 423
- Более 40 фотореалистичных рисунков 205
- Ретро и винтажная типографика в веб-дизайне 194
- 30 примеров фрактального искусства 191