Код для фона сайта html: Как добавить фоновый рисунок на веб-страницу?

Итак, нам нужно переместить список влево и переместить оставшуюся часть текст немного правее, чтобы освободить для него место. Свойства CSS, которые мы используйте для этого padding-left (для перемещения основного текста) и «позиция», «слева» и «вверху» (для перемещения по меню).

Есть и другие способы сделать это.Если вы ищете «столбец» или «макет» на странице Learning CSS , вы найти несколько готовых к запуску шаблонов. Но это нормально для наших целей.

В окне редактора добавьте следующие строки в HTML файл (строки 7 и 12-16):

  
  



[так далее.]
 

Если вы снова сохраните файл и перезагрузите его в браузере, вы должны теперь есть список ссылок слева от основного текста. Это уже выглядит намного интереснее, не правда ли?

Основной текст перемещен вправо, а список ссылки теперь находятся слева от него, а не вверху.

Позиция ': absolute 'говорит, что элемент ul позиционируется независимо от любой текст, который идет до или после него в документе и «left» и «top» указывают, что это за позиция. В этом случае 2em сверху и 1em с левой стороны окна.

«2em» означает, что размер шрифта в 2 раза больше текущего. Например, если меню отображается шрифтом из 12 пунктов, тогда «2em» - 24 пункта. 'Em' - очень полезная единица в CSS, поскольку она может адаптировать автоматически к шрифту, который использует читатель.Наиболее в браузерах есть меню для увеличения или уменьшения размера шрифта: вы можете попробовать и увидеть, что меню увеличивается в размере по мере того, как шрифт увеличивается, чего не было бы, если бы мы использовали размер вместо этого в пикселях.

Шаг 5. Стилизация ссылок

Меню навигации по-прежнему выглядит как список, а не меню. Давайте добавим ему стиля. Мы удалим маркер из списка и переместим предметы слева, туда, где была пуля. Мы также дадим каждому предмету собственный белый фон и черный квадрат.(Почему? Нет особого причина, просто потому что мы можем.)

Мы также не сказали, какими должны быть цвета ссылок, поэтому давайте добавим и это: синий для ссылок, которые пользователь еще не видел и фиолетовый для уже посещенных ссылок (строки 13-15 и 23-33):

  
  



[так далее.]
 

Традиционно, браузеры показывают гиперссылки с подчеркиванием и цветом. Обычно цвета аналогичны тем, что мы указали здесь: синий для ссылок на страницы который вы еще не посещали (или посещали давным-давно), фиолетовый для страницы, которые вы уже видели.

Silver также похож на дизайн игры CSS Pattern, упомянутый выше. Но это спиральный дизайн с большим количеством цветов. Каждая спираль рассматривается как отдельный элемент, что позволяет создателю добавлять к спирали разные градиенты.Это еще один фоновый узор на чистом CSS3. Вам предоставляется весь CSS-скрипт, использованный для создания этого шаблона. Поскольку код приведен в редакторе CodePen, вы можете визуализировать настройки сразу же по мере их внесения. Вы даже можете добавить к узору эффекты анимации. Чтобы узнать о более творческих эффектах анимации CSS, ознакомьтесь с нашими коллекциями примеров анимации CSS.

Информация / Скачать демоверсию

Неоновый узор из шестиугольников

Neon Hexagons Pattern - это живой фон с анимированными элементами.Как следует из названия, это узор в стиле неонового рекламного щита, который постепенно меняет цвета. Цветовой переход плавный и нежный. Для создания этого красочного фонового рисунка используются фреймворки HTML5 и CSS3. Геометрические формы используются как часть современного веб-дизайна. Если вы используете в своем дизайне фигуры другого типа, вы можете использовать тот же рисунок в этом шаблоне для обеспечения единообразия дизайна. Настроить дизайн не составит труда для разработчика, поскольку он использует простую структуру кода для быстрой настройки.

Информация / Скачать демоверсию

, автор Ee Venn Soh

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

Информация / Скачать демоверсию

Сердца

Hearts, как следует из названия, у него узор в виде сердечек. Этот почти похож на дизайн ананаса, упомянутый выше. Если ваш веб-сайт связан с событиями, образом жизни или детьми, подобный шаблон дизайна поможет вам создать чистую тему для вашего веб-сайта. Между каждым вектором сердца отведено достаточно места, чтобы узор не выглядел затуманенным.В дизайне по умолчанию используются два цвета. В зависимости от цветовой темы вашего веб-сайта или приложения вы можете изменить цвет сердечек. Вся структура кода предоставляется вам, ознакомьтесь с информацией по ссылке, чтобы получить практический опыт.

Информация / Скачать демоверсию

Капли

Drops - это простой фоновый узор на основе формы, похожий на упомянутый выше. Поскольку этот также от того же создателя Hearts, вы можете ожидать такой же структуры кода и качества. Используемый скрипт кода CSS очень прост, так что вы можете использовать свою собственную форму, если хотите. Как и в предыдущем случае, между каждой формой капли остается достаточно места. Если вы ожидаете настраиваемого пространства и размера, ознакомьтесь с упомянутым выше создателем фоновых узоров. Сохраняя кодовый сценарий в качестве основы, вы можете разработать свой собственный дизайн и эффект анимации.

Информация / Скачать демоверсию

CSS каракули

CSS Doodle - это красочный фоновый статический узор.Это почти похоже на дизайны Drops and Hearts, упомянутые выше. Но разработчик использовал несколько классных цветовых схем, чтобы сделать его более презентабельным. По умолчанию вы получаете дизайн в форме плюса на заднем плане. В зависимости от ваших потребностей в дизайне вы можете использовать свою собственную форму. Кроме того, в этом дизайне используется последний скрипт CSS3, поэтому вы можете использовать любую форму и современную цветовую схему.

Информация / Скачать демоверсию

Макет в стиле комиксов

«Макет стиля комиксов» - это уникальный фоновый узор.Из самого названия вы можете сделать вывод, что создатель следовал компоновке в стиле комиксов. Если вы ищете интерактивный макет повествования для своего творческого веб-сайта, это может вас вдохновить. Поскольку дизайн настолько уникален, проекты с особыми требованиями могут использовать только этот дизайн. Или вы можете просто использовать цветной точечный узор, игнорируя комические пузыри и коробки. Для создания этого дизайна разработчик использовал исключительно сценарии CSS, поэтому его настройка не составит проблем для разработчиков.

Информация / Скачать демоверсию

Итак, вам нужна предыстория, а?

Используйте их, чтобы прыгать или читать все...
[Цвета фона]
[Цвета текста]
[Фоновый рисунок]
[Создайте свой собственный фоновый рисунок]

Цвета фона

Изменить цвет фона очень просто. Вам понадобятся две вещи:

• Команда, предупреждающая браузер (например, Netscape или IE) о том, что цвет будет изменен, и ...
• Цветовой код.

1. Команда для изменения любого элемента фона находится в теге BODY страницы. Чтобы изменить только цвет фона, введите этот атрибут:

2.Теперь вам нужен цветовой код. Этот код сообщит браузеру, какой цвет использовать. Шестизначный код будет заменен на "######" в приведенной выше команде. Технический термин для этих маленьких 6-значных щенков - шестнадцатеричный код.

Коды не очень удобны для пользователя, и вам нужна диаграмма, чтобы вы знали, какой код делает какой цвет. Я создал страницу с основными цветовыми кодами, всего 104. На самом деле существует более тысячи шестнадцатеричных кодов, создающих все мыслимые оттенки красного, желтого или чего-то еще.Вы поймете, что я имею в виду. Просмотрите страницу - запишите пару кодов - и вернитесь, чтобы закончить руководство.

Щелкните здесь, чтобы перейти на страницу «Цветные лакомства».

С возвращением. Без сомнения, вы посмотрели вокруг и увидели пару цветов. Аккуратно, а? Надеюсь, вы вернули цветовой код (шестнадцатеричный код), который хотели бы использовать - но если нет, то неважно - у меня он есть: «FFFFFF». Этот код даст чистый белый цвет. (Почему FFFFFF ?!) Я сказал вам, что коды не слишком хороши.

Обратите внимание: Когда вы пишете эти коды, вы можете заметить, что я пишу их со знаком «#» перед кодом.Раньше это приходилось делать, но теперь уже не так. Вы можете просто использовать шестизначный код.

Обязательно заключайте все в кавычки! Итак, теперь, когда я знаю код фона, который хочу создать, я просто вставляю код в команду и помещаю атрибут на страницу внутри тега & ltBODY & gt. Код для белого фона будет выглядеть так:

Цвета текста

Ага, но это совсем другой урок: Итак, вам нужен цветовой код, а ?. Закончите здесь, а затем отправляйтесь немного повеселиться.

Фоновые обои

Название немного вводит в заблуждение. Когда вы видите HTML-страницу с обоями или фоном, это не один сплошной .gif или .jpeg. Это один маленький .gif или .jpeg, который повторяется снова и снова ... и он такой же простой, как и цвета выше.

Для начала нужен фон. Я зарабатываю большую часть своего. Я перейду к созданию фона через секунду.

Поскольку вам нужен дигитайзер для создания фона, а я знаю, что не у всех есть такой под рукой, лучший способ использовать фон - это взять его в Интернете.Вот несколько мест, которые я нашел весьма полезными. Опять же, вы можете добавить в закладки те, которые вам нравятся. Просто нажмите на них, чтобы перейти ...

Фоновый сэмплер Netscape
Загрузка занимает вечность, но это хорошая коллекция.
KPT Background Sampler
... оба хороших сайта.

У меня также есть несколько из перечисленных ниже.

С возвращением. Теперь, когда у вас есть .gif или .jpeg для фона, вы захотите поместить его в тот же каталог, в который вы помещаете все остальные изображения.

Опять же, все атрибуты фона помещаются в тег & ltBODY & gt. Вот так:

Все команды цвета отменяются командой BODY BACKGROUND. Это в основном потому, что обои перекрывают цвет.

Но ... для загрузки фона .gif или .jpeg потребуется некоторое время. Было бы неплохо поставить команду цвета перед командой BODY BACKGROUND. Что происходит, так это то, что ваша страница приобретает определенный цвет, а затем обои стираются поверх этого цвета.Хороший эффект.

Обратите внимание: Использование двух команд, одной для BGCOLOR, а другой для BACKGROUND, не работает в браузерах верхнего уровня. Вам нужно будет объединить их в одной команде. Примерно так:

Вот несколько ссылок на набор фонов, которые я сделал или которые мне понравились настолько, что я могу их использовать. Прочтите об этом, и если это похоже на вас, нажмите, чтобы увидеть. (Я хотел бы показать их вам прямо здесь, но этот сайт получает более 2 миллионов посещений в месяц, и их размещение здесь слишком сильно замедляет работу системы.)

Это было создано с помощью фильтра тиснения PaintShop Pro на простом черно-белом рисунке. Это выпускная шляпа.
Нажмите здесь, чтобы увидеть это!

Я сделал это, отсканировав награду, которую получил за то или иное. Это синее пятнистое поле.
Нажмите здесь, чтобы увидеть это!

Это фон на этой странице.
Нажмите здесь, чтобы увидеть это!

Это красивый белый фон с текстурой вроде льняной ткани.
Нажмите здесь, чтобы увидеть это!

Это было взято с другого сайта. Это как коричневая ткань.
Нажмите здесь, чтобы увидеть это!

Любишь синий? Мы стали синими!
Нажмите здесь, чтобы увидеть это!

Так выглядит капот вашего автомобиля после хорошего воска и ливня. Всюду капельки.
Нажмите здесь, чтобы увидеть это!

Я сделал это, отсканировав обложку величайших хитов Стили Дэна. Это темно-серая текстура.
Нажмите здесь, чтобы увидеть это!

Я сделал это, отсканировав рождественскую открытку моей тети. Это светло-коричневая крапинка.
Нажмите здесь, чтобы увидеть это!

То же, что на рождественской открытке. Вот только эта карточка была от моей мамы. Это темно-коричневая крапинка.
Нажмите здесь, чтобы увидеть это!

Я сделал это, отсканировав страницу альбома для вырезок, а затем поиграв с цветом в PaintShop Pro. Это темно-фиолетовый фон.
Нажмите здесь, чтобы увидеть это!

Создайте свои собственные обои

Для этого нет никаких жестких или жестких правил, как вы можете видеть сверху, но вот то, что я нашел, работает лучше всего . ..

Easy Wallpapers
1. Найдите лист бумаги, отличный от белого, на котором уже есть текст. Таким образом, вы знаете, что когда вы используете его в качестве фона, ваш текст будет отображаться.
2. Бумага, которая подходит для этого: дипломы, цитаты, канцелярские товары или модная копировальная бумага от Kinkos.
3. Просто отсканируйте бумагу и обрежьте идеальный квадрат. Сделайте это немного маленьким. 1 "x 1" работает очень хорошо.
4. Используйте его как фон. Большинство обоев, представленных выше, были изготовлены таким образом.

Жесткие обои
1. Найдите геометрическое изображение для сканирования. Хорошо подойдут кирпичи и линованная бумага.
2. Отсканируйте изображение.
3. Обрежьте рисунок так, чтобы детали на концах и сверху были разрезаны ровно пополам. Таким образом, они будут выстроены в линию при размещении в качестве обоев.
4. Это сложно.Попробуйте сначала сделать что-то на линованной бумаге для практики.

-или- Если у вас есть доступ к программе изображений, попробуйте это. Это работает намного лучше, чем вы думаете.

1. Отсканируйте любое изображение, которое хотите использовать в качестве фона, и обрежьте его до небольшого размера.
2. Используйте вашу графическую программу, чтобы сделать «смещение» на 50%. (Это превращает изображение в себя наполовину.)
3. Используйте программу, чтобы подправить любые линии, которые не сходятся в средней точке изображения.
4. Сохраните. Это гарантирует, что только что созданная графика будет идеально сочетаться с фоном.Это работает, поверьте мне. Я еще не ошибся?

Еще одна вещь ...
Если вы всегда хотели знать, как создать фон с полосой, бегущей по краю. Иди сюда!

Цвет фона iframe для встраиваемых материалов - Справочный центр Vimeo

* Примечание . Обсуждаемая здесь прозрачность относится конкретно к iframe (содержащему его веб-элементу), а не к прозрачности любых загружаемых вами видео.В настоящее время Vimeo не поддерживает альфа-канал.

Прозрачный фон

По умолчанию фон iframe проигрывателя на Vimeo прозрачный. Все элементы проигрывателя (панель воспроизведения, кнопки и т. Д.) Прикрепляются к видеоизображению, а не к фактическому размеру iframe.

Чтобы избежать пустого места при встраивании, мы рекомендуем выбрать размер проигрывателя, соответствующий исходному соотношению сторон вашего видео. Например, если исходное видео имеет соотношение сторон 16: 9, вам нужно встроить видео с размерами, которые дают соотношение сторон 16: 9, например 800 x 450.

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

Отключение прозрачного фона

Если ваш плеер отображается не так, как вы изначально планировали, вы можете отключить прозрачный фон. Чтобы отключить прозрачный фон, добавьте ? Transparent = 0 в конец URL-адреса проигрывателя во встраиваемом коде.Этот параметр установит черный фон iframe и закрепит элементы проигрывателя в iframe вместо видеоизображения.

Пример кода для вставки:

'

Применение настраиваемого цвета фона iframe

Вместо прозрачности или черных полос вы можете выбрать точный цвет, которым будет заполняться ваш iframe.Имейте в виду, что вам нужно посетить настройки проигрывателя видео, чтобы настроить цвет текста и полосу воспроизведения в проигрывателе.

Чтобы применить определенный цвет фона, вам необходимо добавить следующее свойство встроенного стиля в код внедрения iframe:

style = "background-color: #FFFFFF"

FFFFFF - это шестнадцатеричное значение цвета для белого, но вы можете найти нужный цвет в базе данных шестнадцатеричных кодов здесь: http://www.color-hex.com/

Пример кода для вставки:

Важно: Невозможно изменить цвет кадра, который появляется во время загрузки видео. Это не должно быть заметно для большинства зрителей, но может повлиять на зрителей с более медленным подключением к Интернету.

Как временно редактировать любую веб-страницу

В вашем браузере скрывается мощный инструмент: Проверить элемент .

Щелкните правой кнопкой мыши любую веб-страницу, выберите Проверить , и вы увидите внутреннюю часть этого сайта: его исходный код, изображения и CSS, которые формируют его дизайн, шрифты и значки, которые он использует, код Javascript, который поддерживает анимации и многое другое. Вы можете увидеть, сколько времени требуется для загрузки сайта, какую пропускную способность он использовал для загрузки, а также точный цвет в его тексте.

Или вы можете использовать его, чтобы изменить что угодно на странице.

Inspect Element - идеальный способ узнать, что движет Интернетом, выяснить, что сломано на ваших сайтах, смоделировать, как будет выглядеть изменение цвета и шрифта, и избавиться от необходимости передавать в Photoshop личные данные на снимках экрана.Это суперсила, о которой вы даже не подозревали.

Давайте узнаем, как использовать Google Chrome Inspect Element, чтобы облегчить вашу работу, независимо от того, являетесь ли вы разработчиком или маркетологом, который никогда не писал ни строчки кода. Если вы читаете это на своем телефоне, пора переключиться на ноутбук, открыть Google Chrome и приготовиться настроить код.

Большинство веб-браузеров, включая Mozilla Firefox и Apple Safari, включают инструмент Inspect Element, тогда как Microsoft Internet Explorer и браузер Edge включают аналогичный набор инструментов разработчика.В этом руководстве основное внимание уделяется инструментам проверки элементов Google Chrome, но большинство функций работают так же в других браузерах.

Подождите, почему я должен использовать элемент Inspect?

Если вы никогда не заглядывали в код веб-сайта из любопытства, вы можете задаться вопросом, почему вам следует научиться использовать Inspect Element.

• Дизайнер : Хотите узнать, как дизайн сайта будет выглядеть на мобильных устройствах? Или хотите посмотреть, как другой оттенок зеленого будет выглядеть на кнопке регистрации? С Inspect Element вы можете сделать и то, и другое за считанные секунды.

• Маркетолог : интересно, какие ключевые слова используют конкуренты в заголовках своих сайтов, или вы хотите узнать, не слишком ли медленно загружается ваш сайт для теста Google PageSpeed? Inspect Element может показать и то, и другое.

• Writer : Устали размывать свое имя и адрес электронной почты на снимках экрана? С помощью Inspect Element вы можете изменить любой текст на веб-странице за секунду.

• Агент поддержки : Нужен лучший способ сообщить разработчикам, что нужно исправить на сайте? Inspect Element позволяет вам быстро изменить пример, чтобы показать, о чем вы говорите.

Для этих и десятков других случаев использования Inspect Element - удобный инструмент, который нужно иметь под рукой. Это часть инструментов разработчика в вашем браузере, которая включает ряд дополнительных функций: консоль для запуска кода, страницу View Source для просмотра только необработанного кода сайта, страницу Sources со списком всех загруженных файлов. на веб-сайте и многое другое. Вы можете изучить все это самостоятельно, а пока давайте посмотрим, как использовать основную вкладку Elements , чтобы настроить веб-страницу самостоятельно.

Как начать работу с элементом проверки

Есть несколько способов получить доступ к элементу проверки Google Chrome. Просто откройте веб-сайт, который хотите попробовать отредактировать (чтобы следовать этому руководству, откройте Zapier.com), затем откройте инструменты Inspect Element одним из следующих трех способов:

• Щелкните правой кнопкой мыши в любом месте веб-страницы и на В самом низу всплывающего меню вы увидите « Проверить ». Щелкните это.

• Щелкните гамбургер-меню (значок с 3 точками) в правом углу панели инструментов Google Chrome, щелкните Дополнительные инструменты , затем выберите Инструменты разработчика .Либо в меню «Файл» выберите «Вид» -> «Разработчик» -> «Инструменты разработчика».

• Предпочитаете сочетания клавиш? Нажмите CMD + Option + I на Mac или F12 на ПК, чтобы открыть Inspect Elements, ничего не нажимая.

По умолчанию Инструменты разработчика открываются на панели в самом низу браузера и показывают вкладку Elements - это знаменитый инструмент Inspect Element, который мы искали.

У вас не будет много места для работы с элементом Inspect Element в нижней части экрана, поэтому щелкните три вертикальные точки в верхней правой части панели элемента проверки рядом с "X" (на котором вы бы щелкнули чтобы закрыть панель). Теперь вы увидите возможность переместить панель в правую часть браузера (вид справа) или открыть панель в совершенно отдельном окне (вид отстыковки).

Для этого урока давайте закрепим панель с правой стороны окна браузера, чтобы у нас было больше места для работы.Вы можете сделать панель инструментов разработчика шире или уже, наведя курсор мыши на левую границу. Когда появится курсор ↔ , перетащите панель влево, чтобы расширить его, или вправо, чтобы сузить.

Теперь, когда мы в Inspect Element, у нас под рукой есть множество полезных инструментов, которые мы можем использовать, чтобы любой сайт выглядел именно так, как мы хотим. В этом руководстве мы сосредоточимся на вкладках «Элементы», «Эмуляция» и «Поиск».

Поиск

Вкладка «Поиск» позволяет искать на веб-странице определенное содержимое или элемент HTML.Он немного скрыт: вам нужно щелкнуть 3 точки, затем нажать Search All Files , чтобы раскрыть его. Тогда вы сможете искать в каждом файле на веб-странице все, что захотите.

Элементы

«Проверить элемент» - это инструмент, который мы будем больше всего изучать в этом руководстве, и он открывается первым, когда вы запускаете Инструменты разработчика в большинстве браузеров. Или щелкните вкладку «Элементы» в Инструментах разработчика, чтобы вернуться к ней, если вы изучали где-то еще.

На вкладке «Обзор» вы можете увидеть все элементы HTML, JavaScript и CSS, с помощью которых был создан веб-сайт.Это почти то же самое, что просто просмотреть исходный код веб-сайта, с одним важным отличием: вы можете изменить любой код и видеть изменения в реальном времени на открытом сайте. Вы можете изменить все, от копии до гарнитуры, затем сделать снимок экрана нового дизайна или сохранить изменения (просто перейдите в меню «Просмотр »> «Разработчик»> «Просмотр исходного кода » и сохраните страницу как файл HTML или скопируйте изменения кода в текстовый редактор. ). Однако после повторной загрузки страницы все ваши изменения исчезнут навсегда.

Эмуляция

Вы когда-нибудь хотели предварительно просмотреть веб-страницу на телефоне, не вынимая телефон из кармана? Вкладка «Эмуляция» позволяет просматривать веб-страницу так, как она будет выглядеть на любом устройстве, с предустановками для популярных устройств или возможностью установить разрешение экрана и соотношение сторон. Вы даже можете установить эмулируемую скорость интернета, чтобы увидеть, как быстро сайт будет загружаться через коммутируемое соединение.

Это также немного скрыто: вам нужно открыть Inspect Element и щелкнуть значок телефона, чтобы запустить его.Тогда у вас будет идеальный инструмент для понимания того, как другие воспринимают веб-страницу.

Пора браться за работу. Сначала мы воспользуемся поиском, чтобы найти элементы на веб-странице, затем будем использовать элементы для редактирования текста и прочего на сайте и, наконец, воспользуемся эмуляцией, чтобы посмотреть, как наш сайт будет выглядеть на телефоне из определенного места.

Найдите что-нибудь на сайте с помощью поиска по элементам Inspect.

Хотите знать, что входит в ваши любимые сайты? Поиск - ваш лучший инструмент для этого, помимо чтения всего исходного кода сайта.Вы можете просто открыть представление элементов по умолчанию, нажать CTRL + F или CMD + F и выполнить поиск по исходному коду, но полный инструмент поиска позволит вам искать по каждому файлу на странице, помогая вам найдите текст в файлах CSS и JavaScript или найдите изображение значка, которое вам нужно для статьи.

Для начала откройте Zapier.com в Chrome, если вы еще этого не сделали, затем откройте Inspect Element, щелкните 3 вертикальные точки в правом верхнем углу панели инструментов разработчика (рядом с закрывающим «X») и выберите «Искать во всех файлах».«Вкладка« Поиск »появится в нижней половине панели инструментов разработчика.

Помните, как открыть« Проверить элемент »? Просто щелкните правой кнопкой мыши и выберите Проверить элемент « Проверить элемент »или нажмите Command + Option + i на Mac или F12 на ваш компьютер.

В поле поиска вы можете ввести что угодно - ANYTHING - что вы хотите найти на этой веб-странице, и оно появится на этой панели. Давайте посмотрим, как мы можем это использовать.

Введите meta введите имя в поле поиска, нажмите клавишу Enter , и вы сразу увидите каждое вхождение «мета-имени» в коде на этой странице.Теперь вы можете увидеть метаданные этой страницы, ключевые слова SEO, на которые она ориентирована, а также то, настроена ли она, чтобы позволить Google индексировать ее для поиска. Это простой способ увидеть, на что нацелены ваши конкуренты, и убедиться, что вы ничего не испортили на своем сайте.

Попробуем другой запрос. Удалите мета-имя , вместо этого введите h3 в поле поиска и нажмите «ввод». Вы увидите каждое вхождение «h3» в файлах JavaScript Zapier вверху, но как только вы прокрутите вниз, вы увидите каждый заголовок «h3» на этой странице.

Поиск - также эффективный инструмент для дизайнеров, так как вы также можете искать по цвету. Введите # ff4a00 в поле поиска и нажмите «ввод» (и обязательно установите флажок рядом с «Игнорировать регистр», чтобы увидеть все результаты). Теперь вы должны каждый раз видеть цвет # ff4a00, оттенок оранжевого Zapier, в файлах CSS и HTML этого сайта. Затем просто щелкните строку с надписью «color: # ff4a00;» чтобы перейти к этой строке в HTML-коде сайта и настроить ее самостоятельно (мы рассмотрим это в следующем разделе).

Это удобный способ для дизайнеров убедиться, что сайт соответствует руководству по стилю их бренда. С помощью инструмента «Поиск» дизайнеры могут легко проверить CSS веб-страницы, чтобы узнать, применен ли цвет к неправильному элементу, используется ли неправильное семейство шрифтов на веб-странице или вы все еще используете свой старый цвет где-то на вашем сайте.

Инструмент «Поиск» также является прекрасным способом улучшить взаимодействие с разработчиками, поскольку вы можете показать им, где именно вы нашли ошибку или что именно нужно изменить.Просто сообщите им номер строки, в которой существует проблема, и вы исправите ее гораздо быстрее.

Или вы можете изменить веб-страницу самостоятельно с помощью Elements , основной части инструментов разработчика Chrome.

Измените что угодно с помощью элементов

Front-end разработчики используют инструмент Inspect Element каждый день, чтобы изменять внешний вид веб-страницы и экспериментировать с новыми идеями - и вы тоже можете. Inspect Elements позволяет настраивать внешний вид и содержимое веб-страницы, добавляя временные изменения в файлы CSS и HTML сайта.

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

Посмотрим, что мы можем с этим сделать.

Щелкните вкладку «Элементы» на панели инструментов разработчика - и, если вам нужно больше места, нажмите клавишу «Esc», чтобы закрыть ранее открытое окно поиска.Вы должны увидеть HTML-код этой страницы - теперь вы знаете, как делают колбасу.

В верхнем левом углу панели разработчика вы увидите значок мыши поверх квадрата. Щелкните по нему, затем вы можете выбрать любой элемент на странице, который вы хотите изменить. Так что давайте изменим кое-что!

Изменить текст на веб-странице

Вы когда-нибудь хотели изменить текст на сайте - возможно, чтобы увидеть, как новый слоган будет выглядеть на вашей домашней странице, или убрать ваш адрес электронной почты со скриншота Gmail? Теперь вы можете.

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

Дважды щелкните текст «Подключите ваши приложения», выделенный синим цветом на панели инструментов разработчика, и он превратится в редактируемое текстовое поле.

Введите в это текстовое поле все, что угодно («Аури - гений» должно работать нормально) и нажмите Enter. Вуаля! Вы только что изменили текст на веб-странице.

Обновите страницу, и все вернется в нормальное состояние.

Весело? Давайте изменим еще кое-что на этой странице.

Панель инструментов разработчика перезагружается вместе со страницей, но давайте закроем ее. Нажмите «X» в правом верхнем углу страницы.

Круто. Теперь мы снова откроем его - прямо на тексте, который хотим отредактировать. Все, что вам нужно сделать, это щелкнуть правой кнопкой мыши ту часть страницы, которую вы хотите изменить, а затем щелкнуть ссылку Inspect или Inspect Element , которая появляется в нижней части контекстного меню.

Когда откроется панель инструментов разработчика, это предложение должно автоматически выделиться. Довольно аккуратно, да? Важны мелочи.

Теперь, когда мы выбрали слоган на сайте Zapier, давайте изменим его внешний вид.

Изменение цвета и шрифта элементов

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

Вы можете заметить, что некоторые элементы перечеркнуты во вкладке «Стили». Это означает, что эти стили не активны для выбранного нами элемента, поэтому изменение этих значений не повлияет. Мы можем игнорировать их для наших целей.

Попробуем что-нибудь поменять. Снова щелкните значок стрелки в верхней части Inspect Element и выделите текст прямо под кнопкой «Зарегистрироваться» на странице. Найдите «выравнивание текста» на вкладке «Стили» (возможно, вам придется немного прокрутить, чтобы найти это).

Прямо сейчас он установлен в «центр», но дважды щелкните «центр» и введите left . Это выравнивает текст на странице по левому краю.

А теперь поиграемся с цветом. Используйте значок мыши в Inspect Element, чтобы выбрать кнопку на этот раз, затем на вкладке «Стили» найдите эту строку:

И дважды щелкните "# ff4a00". Наберите # 4199ad (не забудьте #) и нажмите «ввод».

Мы только что изменили цвет нашей кнопки с оранжевого на синий! А теперь попробуем что-нибудь действительно крутое.

Изменить состояния элемента

Хотите увидеть, как будет выглядеть кнопка или ссылка, когда кто-то наведет на нее курсор или щелкнет по ней? Chrome Inspect Element может показать это с помощью инструментов состояния силового элемента. Вы можете увидеть, как будет выглядеть элемент, когда посетитель наведет курсор на элемент (состояние наведения), выберет элемент (состояние фокуса) и / или щелкнет ссылку (состояние посещения).

Давай попробуем. Убедитесь, что вы выбрали кнопку регистрации на главной странице Zapier. Затем щелкните правой кнопкой мыши этот код на вкладке «Элементы» и выберите в этом меню : active: .

Это изменит цвет кнопки на серый, который отображается на сайте Zapier, когда вы нажимаете кнопку.

Теперь измените значение background-color на # FF4A00 , и вы должны сразу увидеть изменение цвета кнопки.

Попробуйте поэкспериментировать - измените цвет : hover: , затем снимите флажок : hover: в контекстном меню и перетащите указатель мыши на кнопку, чтобы увидеть новый цвет кнопки.

Изменить изображения

Вы также можете легко изменить изображения на веб-странице с помощью Inspect Element.Давайте заменим фон Супергероя на сайте Zapier на эту впечатляющую фотографию солнечной вспышки, сделанную НАСА.

Сначала скопируйте и вставьте эту ссылку в изображение:

https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg

Теперь откройте Inspect Element на фоне домашней страницы Zapier и убедитесь, что вы выбрали в коде строку signup-hero . Дважды щелкните ссылку URL-адреса фона на панели «Стили» и вставьте ссылку, которую вы скопировали выше.

Нажмите "ввод" и сразу увидите разницу.

Примечание: Вы также можете преобразовать фотографию в GIF или видео - все, что вам нужно, это ссылка на файл, и вы можете добавить ее.

Редактировать текст удобно, менять изображения - весело, а изменение цветов и стилей может помочь вам быстро смоделировать изменения, которые вы хотите внести на свой сайт. Но как этот новый слоган и дизайн кнопок будут выглядеть на мобильных устройствах?

Вот где приходит на помощь эмуляция - здесь все, что мы рассмотрели до сих пор, может быть применено еще больше.Посмотрим как.

Протестируйте сайт на любом устройстве с помощью эмуляции

Сегодня все должно быть отзывчивым. Веб-сайты больше не просматриваются только на компьютерах - с большей вероятностью, чем когда-либо, их можно будет просматривать на телефоне, планшете, телевизоре или на любом другом экране. Об этом всегда следует помнить при создании нового контента и дизайна.

Эмуляция - отличный инструмент для приблизительного определения того, как веб-сайты будут выглядеть для пользователей на различных устройствах, в браузерах и даже в разных местах. Хотя это не заменяет фактическое тестирование на различных устройствах и браузерах, это отличное начало.

На панели инструментов разработчика вы заметите маленький значок телефона в верхнем левом углу. Щелкните по нему. Это должно превратить страницу в крошечную страницу в стиле телефона с меню вверху для изменения размера.

Измените размер небольшого браузера, чтобы увидеть, как все выглядит, если вы просматриваете страницы на планшете, телефоне или даже на меньшем экране. Или щелкните меню вверху, чтобы выбрать размеры устройства по умолчанию, например iPad Pro или iPhone 8 Plus - вперед и выберите последний.

Экран веб-страницы должен уменьшиться до размера iPhone 8 Plus, и вы можете немного увеличить масштаб, щелкнув значок + рядом с числом в правом верхнем углу сетки - так сайт будет выглядеть, если кто-то увеличит масштаб. в мобильном телефоне.

Увеличьте изображение, перетащив правый край эмуляции веб-страницы вправо. Смотрите, что происходит? Мы больше не находимся в представлении iPhone 8 Plus. Перетаскивание экрана по сетке позволяет увидеть, как веб-страница будет меняться при изменении размера экрана, но ваше представление больше не будет отражать модель устройства, которую вы выбрали ранее.

Давайте вернемся к представлению iPhone 8 Plus, снова выбрав его в раскрывающемся списке модели. Рядом с выпадающим списком стоит слово «Портрет»."Как вы, наверное, догадались, это позволяет вам переключаться между альбомным и горизонтальным просмотром.

Теперь мы можем увидеть, как этот пост выглядел бы, если бы вы читали его на iPhone 8 Plus. Не стесняйтесь поиграть с другим устройства, чтобы увидеть, как изменяется эта веб-страница и разрешение экрана. Все другие инструменты разработчика, которые мы рассмотрели до сих пор, также будут реагировать на представление устройства. Например, снова выберите текст слогана Zapier.

В iPhone 8 Plus, мы видим, что это текст 2em, тогда как в представлении по умолчанию на компьютере это 3em.

«em» - это единица размера шрифта, которая позволяет автоматически изменять размер текста относительно окружающего текста. Например, предположим, что у нас есть пользователь с большими настройками пользовательского шрифта в своем браузере. Если вы установите размер шрифта абзаца на 14 пикселей, ваш шрифт всегда будет 14 пикселей для этого пользователя, несмотря ни на что. Однако, если вы установите размер шрифта абзаца равным 1em, браузер вашего пользователя будет использовать эту единицу измерения для масштабирования текста в соответствии с большими пользовательскими настройками. Телефоны и планшеты делают это для удобного увеличения текста.

Теперь давайте переключимся на представление Apple iPad и выберем заголовок «тестирование на разных устройствах» выше. На этот раз размер шрифта 3em. Размер шрифта изменился в зависимости от вида устройства, вернувшись к размеру по умолчанию, который использовался бы на компьютере, благодаря большему экрану планшета.

Эмуляция датчиков мобильных устройств

Возможно, вы заметили, что ваша мышь теперь отображается в виде небольшого кружка на веб-странице. Это позволяет вам взаимодействовать со страницей, как если бы вы были на своем мобильном устройстве.Если вы щелкнете при перетаскивании страницы вниз, это не выделит текст, как обычно в вашем браузере - он перетащит экран вниз, как на устройстве с сенсорным экраном. Используя это представление, вы можете увидеть, насколько велики сенсорные зоны на веб-странице. Это означает, что вы можете видеть, какие кнопки, значки, ссылки или другие элементы легко касаются пальцем.

Вы даже можете сделать так, чтобы ваш браузер работал как телефон. Нажмите клавишу «Esc», чтобы снова открыть панель поиска в Inspect Element, и на этот раз щелкните меню с тремя точками слева, чтобы открыть меню параметров.Выберите Датчики , чтобы получить три новых инструмента: Геолокация, Ориентация и Сенсор.

Touch позволяет включить или выключить селектор круга по умолчанию, который действует больше как палец, чем обычный курсор мыши. Ориентация позволяет вам взаимодействовать с чувствительными к движению веб-сайтами, такими как онлайн-игры, которые позволяют перемещать объекты, перемещая телефон. А геолокация позволяет вам представить, что вы находитесь в другом месте.

Давайте попробуем просмотреть этот сайт из штаб-квартиры Google в Маунтин-Вью, Калифорния.

Установите флажок «Эмулировать координаты геолокации» и введите значение 37 в текстовое поле Lat = и 122 в текстовое поле Lon = . Нажмите Enter на клавиатуре.

Ничего не меняется, да?

Это связано с тем, что на этой странице нет содержимого, которое изменяется в зависимости от вашего местоположения. Если вы измените координаты на таком сайте, как Groupon.com , который использует ваше местоположение для отображения локализованного контента, вы получите другие результаты.Перейдите на Google.com в другом месте, и вы, возможно, увидите новый логотип Google на празднике в другой стране или, по крайней мере, получите результаты на другом языке.

Эмуляция - отличный способ поставить себя на место пользователя и подумать о том, что пользователь может видеть на вашей веб-странице, и это интересный способ исследовать международную сеть.

Эмуляция мобильных сетей

Вы также можете увидеть, каково это просматривать сайт в разных сетях, возможно, чтобы увидеть, загрузится ли ваш сайт, даже если ваши пользователи находятся в более медленной сети 3G.

Чтобы попробовать, снова нажмите кнопку с тремя кружками слева от вкладки поиска «Проверить элемент» и выберите «Условия сети». Там вы можете выбрать быстрый или медленный 3G или автономный режим, чтобы увидеть, как страница работает без Интернета. Или нажмите Добавить ... , чтобы включить собственное тестирование (возможно, добавьте 56 Кбит / с для проверки коммутируемого доступа в Интернет). Теперь перезагрузите страницу, и вы увидите, сколько времени потребуется сайту для загрузки при медленном соединении и как сайт выглядит во время загрузки. Это покажет, почему вам следует улучшить свой сайт, чтобы он загружался быстрее при медленных соединениях.

Вы также можете изменить свой пользовательский агент - снимите флажок «Выбирать автоматически» рядом с «Пользовательским агентом» и выберите «Internet Explorer 7», возможно, чтобы увидеть, изменит ли сайт свою визуализацию для старых браузеров. Это также удобный способ заставить веб-страницы загружаться, даже если они утверждают, что работают только в другом браузере, таком как Internet Explorer.

Проблемы

Давайте закончим несколькими проблемами. Покажи нам, что ты узнал!

1. Измените заголовки на CNN.com и отправьте нам в Твиттере снимок экрана с заголовком вашей популярной статьи.

2. Дублируйте ваш любимый веб-сайт, используя «Просмотр исходного кода», и поиграйте с HTML, чтобы сделать его своим.

3. Посмотрите, как ваш веб-сайт отображается на мобильном устройстве, и покажите своему разработчику, что можно было бы улучшить, исправив это самостоятельно!

Маркетинговая команда Zapier полагается на Inspect Element для извлечения личной информации из снимков экрана в наших обзорах приложений, а наша команда дизайнеров использует ее для создания макетов изменений и просмотра того, как все будет выглядеть на разных экранах.

Как использовать Inspect Element? Мы будем рады услышать ваши истории в комментариях ниже!

Это руководство было первоначально опубликовано 5 января 2015 г., затем было обновлено и переиздано 6 июня 2017 г. и 25 января 2018 г. со скриншотами и действиями из последней версии Google Chrome.

Оптимизация фоновых изображений CSS с помощью медиа-запросов

5 марта 2020 г. • Обновлено 5 марта 2020 г.

Многие сайты запрашивают большие ресурсы, например изображения, которые не оптимизированы для определенных экранов , и отправлять большие файлы CSS, содержащие стили, которые некоторые устройства никогда не будут использовать.Использование медиа-запросов - популярный метод доставки адаптированных таблиц стилей и ресурсов на разные экраны для уменьшения объема данных, передаваемых пользователям, и повышения производительности загрузки страниц. В этом руководстве показано, как использовать медиа-запросы для отправки изображений, размер которых не превышает необходимого, метод, широко известный как отзывчивых изображений .

Предварительные требования #

В этом руководстве предполагается, что вы знакомы с Chrome DevTools. При желании вы можете использовать DevTools другого браузера.Вам просто нужно сопоставить снимки экрана Chrome DevTools в этом руководстве с соответствующими функциями в выбранном вами браузере.

Разберитесь с адаптивными фоновыми изображениями #

Сначала проанализируйте сетевой трафик неоптимизированной демонстрации:

1. Откройте неоптимизированную демонстрацию на новой вкладке Chrome.
2. Нажмите Control + Shift + J (или Command + Option + J на Mac), чтобы открыть DevTools.
3. Щелкните вкладку Сеть .
4. Обновите страницу.

Вы увидите, что единственное запрошенное изображение - это background-desktop.jpg , размер которого составляет 1006 КБ :

Измените размер окна браузера и обратите внимание, что в сетевом журнале не отображаются новые запросы, сделанные страницей. Это означает, что для всех размеров экрана используется один и тот же фон изображения.

Стили, управляющие фоновым изображением, можно увидеть в style.css:

  body {
 background-position: center center; 
 background-attachment: исправлено; 
 фон-повтор: без повторения; размер фона: обложка; 
 background-image: url (images / background-desktop.jpg); 
}  

Вот значение каждого из используемых свойств:

• background-position: center center : Центрировать изображение по вертикали и горизонтали.
• background-repeat: no-repeat : показать изображение только один раз.
• background-attachment: fixed : Избегайте прокрутки фонового изображения.
• background-size: cover : Измените размер изображения, чтобы покрыть весь контейнер.
• background-image: url (images / background-desktop.jpg) : URL-адрес изображения.

В сочетании эти стили предписывают браузеру адаптировать фоновое изображение к разной высоте и ширине экрана. Это первый шаг к созданию отзывчивого фона.

Использование одного фонового изображения для всех размеров экрана имеет некоторые ограничения:

• Отправляется одинаковое количество байтов, независимо от размера экрана, даже если для некоторых устройств, например телефонов, фон изображения будет меньше и легче. выглядят так же хорошо.В общем, вы хотите отправить как можно меньшее изображение, которое по-прежнему хорошо выглядит на экране пользователя, чтобы повысить производительность и сохранить пользовательские данные.
• На небольших устройствах изображение будет растянуто или обрезано, чтобы покрыть весь экран, потенциально скрывая важные части фона для пользователей.

В следующем разделе вы узнаете, как применить оптимизацию для загрузки различных фоновых изображений в зависимости от устройства пользователя.

Использование медиа-запросов - распространенный метод объявления таблиц стилей, которые будут применяться только к определенным типам носителей или устройств.Они реализуются с помощью правил @media, которые позволяют вам определять набор точек останова, в которых определены определенные стили. Когда выполняются условия, определенные правилом @media (например, определенная ширина экрана), будет применена группа стилей, определенных внутри точки останова.

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

• В стиле .css удалить строку, содержащую фоновое изображение URL:

  body {
 background-position: center center; 
 background-attachment: исправлено; 
 фон-повтор: без повторения; размер фона: обложка; 
  background-image: url (images / background-desktop.jpg);  
}  

• Затем создайте точку останова для каждой ширины экрана на основе общих размеров в пикселях, которые обычно имеют экраны мобильных устройств, планшетов и настольных компьютеров:

Для мобильных устройств:

  @media (max-width : 480px) {
 body {
 background-image: url (images / background-mobile.jpg); 
} 
}  

Для планшетов:

  @media (min-width: 481px) и (max-width: 1024px) {
 body {
 background-image: url (images / background-tablet.jpg); 
} 
}  

Для настольных устройств:

  @media (min-width: 1025px) {
 body {
 background-image: url (images / background-desktop.jpg); 
} 
}  

Откройте оптимизированную версию style.css в своем браузере, чтобы увидеть внесенные изменения.

Изображения, используемые в оптимизированной демонстрации, уже изменены, чтобы соответствовать разным размерам экрана.Показывать, как изменять размер изображений, выходит за рамки этого руководства, но если вы хотите узнать больше об этом, руководство по обслуживанию адаптивных изображений охватывает некоторые полезные инструменты, такие как пакет Sharp npm и интерфейс командной строки ImageMagick.

Измерение для разных устройств #

Затем визуализируйте получившийся сайт на экранах разных размеров и на смоделированных мобильных устройствах:

1. Откройте оптимизированный сайт на новой вкладке Chrome.
2. Сделайте область просмотра узкой (менее 480 пикселей ).
3. Нажмите Control + Shift + J (или Command + Option + J на Mac), чтобы открыть DevTools.
4. Щелкните вкладку Сеть .
5. Обновите страницу. Обратите внимание, как запрашивалось изображение background-mobile.jpg .
6. Расширьте область просмотра. Как только он станет шире 480px , обратите внимание, что запрашивается background-tablet.jpg . Как только он станет шире 1025px , обратите внимание, что запрашивается background-desktop.jpg .

При изменении ширины экрана браузера запрашиваются новые изображения.

В частности, когда ширина ниже значения, определенного в мобильной точке останова (480 пикселей), вы увидите следующий сетевой журнал:

Размер нового мобильного фона на 67% меньше , чем у рабочего стола.

Сводка #

В этом руководстве вы научились применять медиа-запросы для запроса фоновых изображений, адаптированных к определенным размерам экрана, и экономии байтов при доступе к сайту на небольших устройствах, таких как мобильные телефоны.Вы использовали правило @media для реализации адаптивного фона. Этот метод широко поддерживается всеми браузерами.