урок верстка - Страница 11

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

Использование блочных и строчных элементов

На самом простом уровне существуют два варианта отображения элемента: блочный и строчный. Блочные элементы влияют на весь раздел содержимого. Элемент абзаца <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 Комментарий »
Использование единиц измерения CSS Q

В спецификации CSS3 есть неизвестная большинству разработчиков единица измерения CSS q. Q — это очень маленькая линейная, постоянная единица измерения, равная четверти миллиметра или одной сороковой сантиметра. Таким образом, q, вероятно, наиболее подходит для придания очень маленьких визуальных изменений, таких как межбуквенный интервал:
Далее... 1 Комментарий »