Цвет шрифта на красном фоне

Цвет шрифта на красном фоне

На данной странице представлены специальные ключевые слова, которые можно применять для обозначения того или иного цвета на интернет сайтах, и при разработке на языках программирования для Web, таких как HTML, CSS, JavaScript, Flash, и др.

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

Таблица HTML цветов

Имена цветов в HTML не чувствительны к регистру, и могут записываться в любой форме

Также стоит отметить, что имея 147 различных ключевых слов (17 старых и 130 новых), не все цвета в этом списке уникальны. Некоторые имена обозначают один и тот же цвет. Так, например, и Grey, и Gray обозначают 50-процентный серый цвет #808080, а Magenta — это лишь синоним HTML цвета Fuchsia, и ссылается на шестнадцатеричный код цвета #FF00FF.

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

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

Прежде всего, определимся, делать рекламу цветной или черно-белой.

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

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

  • Черные буквы на желтом фоне.
  • Зеленые буквы на белом фоне.
  • Красные буквы на белом фоне.

Также следует обратить внимание на то, как воспринимаются различные цвета:

Красный – очень интенсивный, «активный» цвет, он сразу обращает на себя внимание. Это цвет страсти, который просто не может оставить наблюдателя равнодушным. Однако с ним надо быть осторожнее, потому что переизбыток будет оказывать нежелательное воздействие: утомит и вызовет раздражение.

Желтый – цвет радости, позитива. Используя его, вы получите и другое преимущество: желтый зрительно увеличивает площадь, на которой используется, придает ощущение объема. Однако не стоит использовать слишком много интенсивно-желтых элементов: этот цвет способен легко утомить.

Голубой, синий – цвета холодной части спектра. Светлые оттенки также придают ощущение объема. Они дают чувство спокойствия (темные оттенки – стабильности и шика), подталкивая вдумчиво и рассудительно вчитываться в информацию.

Оранжевый и черный – буквально притягивают внимание человека. Однако это сочетание вызывает чувство тревоги (обратите внимание, многие сигналы или, скажем, знаки, которые вызваны предупреждать, имеют именно такую окраску).

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

Белый – цвет чистоты, придает дополнительный объем, как бы «расширяет» пространство рекламного обращения. Белый – универсальный фон для какого-либо текста, он традиционно используется наиболее широко.

Выбирая палитру для рекламного обращения, следует избегать следующих решений:

  • Ни в коем случае нельзя давать большие объемы текста «вывороткой» (светлые буквы на более темном фоне). Это очень быстро утомляет и в конечном итоге приводит к тому, что рекламное обращение игнорируют. Однако допустимо использовать этот прием для небольших частей рекламного обращения, дабы особенно выделить их, подчеркнуть значимость подаваемой таким образом информации.
  • Использование несочетаемых цветов. Зеленые буквы на красном фоне, вне всякого сомнения, очень оригинальное решение. Вот только привлечет оно разве что маленьких детей, которым интересны все яркие предметы. Более взрослая аудитория будет воспринимать такую рекламу как безвкусную, уже не говоря о том, что снижение читаемости информации приводит к ее игнорированию.
  • Использование бледных оттенков для текста при белом или светлом же фоне. Для того, чтобы «зацепить» аудиторию, пастельные тона не всегда годятся.

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

Шрифт

Современные технологии предлагают колоссальную свободу в выборе шрифта для рекламы.

Однако вы помните, что руководствоваться исключительно своими предпочтениями нежелательно, выше мы уже уточняли, почему.

Читайте также:  Sony fdr ax100e отзывы профессионалов

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

  • Для рекламы рекомендуется использовать шрифт с засечками. Мы привели для вас пример букв такого шрифта. Посмотрев на рисунок, вы сразу сможете понять, что означает этот термин: вертикальные элементы каждой буквы сделаны с горизонтальными «палочками» (могут быть выполнены как в виде прямоугольников, так и иметь скругления). Эти «палочки» — ориентиры для наших глаз: взрослый человек, обладающий достаточными навыками в чтении, читает «по вершинам» — то есть, взгляд направлен на верхнюю часть букв, по их очертаниям и распознаются знакомые символы.
  • В целом же шрифт должен быть легкочитаемым (то есть, давать большие объемы информации рукописным шрифтом или буквами с оригинальными очертаниями бессмысленно – изящная вязь может вызвать интерес, но будет препятствовать быстрому прочтению и восприятию информации).
  • Кегль шрифта следует выбирать исходя из конкретной ситуации. Большие буквы привлекают внимание, выделяют информацию. Однако не стоит давать большие объемы текста только заглавными буквами – это утомляет.
  • С выделениями текста полужирным начертанием тоже следует быть осторожными: это может утомлять и снижать читаемость.

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

В этой статье мы рассмотрим свойства CSS , связанные с цветом. Прочитав ее, вы узнаете:

  • как на веб-странице изменить цвет текста;
  • как добавить цвет или изображение для фона;
  • как добавить тени;
  • как изменять прозрачность.

Цвет текста

Вы наверняка уже знаете о свойстве, используемом для изменения цвета текста – это свойство color . Мы рассмотрим различные способы указания цвета.

Указание названия цвета

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

На приведенном ниже рисунке показано шестнадцать цветов, которые можно использовать, введя их название:

Шестнадцать названий цветов, которые можно использовать в CSS

Чтобы изменить цвет всех заголовков на коричневый, нужно ввести:

Заголовок отображается коричневым цветом

Шестнадцатеричные обозначения

Шестнадцать цветов — это мало, если учесть, что большинство мониторов могут отображать шестнадцать миллионов цветов. Но представьте, если бы нужно было задать название каждому из шестнадцати миллионов оттенков …

К счастью, в CSS предусмотрено несколько способов выбора цвета. Первый способ — шестнадцатеричное значение. Вот как выглядит название цвета в шестнадцатеричном формате: #FF5A28 . Это комбинация букв и цифр, которые указывают цвет.

Всегда нужно начинать с указания символа хэша (#) , за которым следует шесть букв или цифр от 0 до 9 и от A до F .

Эти буквы или цифры работают парами. Первые две цифры указывают количество красного, две следующие — зеленого, а две последние — голубого. Смешивая эти значения ( которые являются компонентами Red-Green-Blue в цвете ), можно получить любой цвет.

Таким образом, #000000 соответствует черному цвету, а #FFFFFF — белому.

Некоторые графические программы, такие как Photoshop , Gimp и Paint.NET , позволяют указывать цвета в шестнадцатеричном формате.

Вот, например, как можно применить белый цвет, указанный в шестнадцатеричном формате, к абзацам:

При этом допускается сокращенная запись: можно указать цвет с помощью только трех символов. Например: #FA3 эквивалентно #FFAA33 .

Метод RGB

Red-Green-Blue , сокращенно обозначаемый как « RGB ». Как и в шестнадцатеричном коде, чтобы выбрать цвет, необходимо определить количество красного, зеленого и синего.

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

  1. Зайдите в меню « Пуск », найдите в нем программу Paint и запустите ее.
  2. Перейдите в раздел « Редактировать цвета », как показано на рисунке, приведенном ниже.
  3. Откроется окно. В поле справа переместите ползунки, чтобы выбрать нужный цвет. Предположим, нужно вывести заголовки

розовым цветом. Выберите цвет в окне, как показано на рисунке, приведенном ниже.

  • Обратите внимание на соответствующие значения Red-Green-Blue , указанные в правом нижнем углу окна. Введите эти значения в том же порядке в CSS .
  • Изменение цвета в Paint

    Выбор цвета в Paint

    Чтобы использовать метод RGB , нужно ввести rgb ( Red, Green, Blue ), заменив « Red, Green, Blue » соответствующими числами в диапазоне от 0 до 255 .

    Читайте также:  Битрикс кодировка utf 8

    Цвет фона

    Чтобы указать цвет фона html-страницы , используйте свойство CSS background-color. Оно используется так же, как и свойство color, другими словами, можно ввести название цвета, его шестнадцатеричное значение или RGB .

    Чтобы указать цвет фона для веб-страницы, необходимо работать с html-тегом

    Рассмотрите приведенный ниже код CSS :

    Результат работы этого кода простой html страницы с фоном:

    Белый текст на черном фоне

    CSS и наследование

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

    Если я применил черный цвет фона и белый цвет текста к тегу

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

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

    Это означает, что весь текст моей веб-страницы обязательно будет белым?

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

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

    , и все заголовки и абзацы будут отображаться жирным шрифтом.

    Пример наследования с тегом

    Многие уверены, что они могут изменять только цвет фона html-страницы . Это не так: можно изменить фон любого элемента: заголовков, абзацев, определенных слов и т. д. В этом случае они будут выделены (как если бы они были отмечены маркером).

    Например, существует тег

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

    По умолчанию текст отображается на желтом фоне. Можно изменить это с помощью CSS :

    Красный цвет фона применяется к тексту тега

    . Действительно, даже если фон html-страницы черный, это свойство CSS для наиболее специфичного элемента имеет приоритет ( смотрите рисунок, приведенный ниже ):

    Красный выделенный текст на черном фоне

    Тот же принцип применим ко всем HTML-тегам и свойствам CSS . Если вы скажете:

    • Текст абзацев у меня отображается шрифтом с размером 1,2em ;
    • Важные тексты (

    ) у меня отображается шрифтом с размером 1,4 em .

    … то можете подумать, что возникнет конфликт. Если важный текст является частью абзаца, шрифтом какого размера он должен отображаться? 1,2 em или 1,4 em ? CSS решит, что наиболее специфичное объявление имеет приоритет: поскольку

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

    Фоновые изображения

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

    Как сделать изображение фоном страницы в html

    Свойство, используемое для указания фонового изображения ( в каком-то смысле его можно назвать тегом фона html-страницы ) — background-image . В качестве значения необходимо указать url(«nom_de_l_image.png») . Например:

    В результате мы получим:

    Фоновое изображение страницы

    Адрес, указывающий местоположение фонового изображения, может быть записан как абсолютный адрес ( http: // … ) или как относительный ( fond.png ).

    Будьте внимательны при указании относительных адресов в файле CSS . Адрес изображения должен быть указан относительно файла .css , а не относительно файла .html . Чтобы упростить ситуацию, советую размещать фоновое изображение в той же папке, что и файл .css .

    Параметры фонового изображения

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

    background-attachment: прикрепление фона

    Свойство CSS background-attachment используется для « закрепления » фона. Полученный эффект позволяет сделать так, чтобы фон « прокручивался » вместе с текстом. Доступны два значения:

    • fixed : фоновое изображение остается закрепленным;
    • scroll : фоновое изображение прокручивается вместе с текстом ( значение по умолчанию ).

    background-repeat: повторение фона

    По умолчанию фоновое изображение повторяется в виде мозаики ( таким образом, фон html-страницы распространяется на весь экран ). Вы можете изменить это с помощью свойства background-repeat:

    • no-repeat : фон не будет повторяться. Изображение будет размещено на странице в одном экземпляре.
    • repeat-x : изображение будет повторяться только в первой строке, горизонтально.
    • repeat-y : изображение будет повторяться только в первом столбце по вертикали.
    • repeat : фон будет повторяться в виде мозаики (значение по умолчанию).
    Читайте также:  Кулер cooler master v8 ver 2

    background-position: положение фона

    Также можно указать позицию фонового изображения с помощью background-position . Это свойство полезно только в комбинации с background-repeat: no-repeat ; ( фон, который не повторяется ).

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

    … фон будет сдвинут на 30 пикселей левее и 50 пикселей выше. Также можно использовать следующие значения:

    • top : вверху;
    • bottom : внизу;
    • left : слева;
    • center : по центру;
    • right : справа.

    Их можно комбинировать. Например, чтобы разместить фоновое изображение в правом верхнем углу, нужно ввести:

    Если я хочу отображать солнце в качестве фонового изображения ( следующий рисунок ), только один раз ( no-repeat ), всегда видимым ( fixed ) и расположенным в правом верхнем углу ( top right ), то следует написать следующий код фона html-страницы :

    Солнце в качестве фонового изображения в правом верхнем углу

    Сочетание свойств

    Если вы применяете к фону много свойств, то можно использовать своего рода « супер-свойство », называемое background . Его значение может сочетать в себе несколько ранее рассмотренных свойств: background-image , background -repeat , background-attachment и background-position .

    Таким образом, можно написать:

    Это первое « супер-свойство », которое я вам показываю, но будут и другие. Вы должны знать следующее:

    1. Порядок значений не важен. Можно комбинировать значения в любом порядке.
    2. Не нужно вводить все значения. Поэтому, если не хотите вводить fixed, можно удалить его.

    Несколько фоновых изображений

    Начиная с CSS3 , можно указывать для элемента несколько фоновых изображений. Для этого разделите их объявления запятой:

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

    Несколько фоновых изображений

    Несколько фоновых изображений работают во всех браузерах кроме устаревших версий Internet Explorer , который распознает эту функцию, только начиная с версии 9 ( IE9 ).

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

    Прозрачность

    CSS позволяет легко изменять уровни прозрачности элементов. Для этого мы будем использовать свойство opacity и модель RGBa .

    Свойство opacity или как сделать фон страницы в html прозрачным

    Свойство opacity используется для указания уровня непрозрачности ( который является обратным для прозрачности ).

    • При значении 1 элемент будет полностью непрозрачным: это поведение по умолчанию.
    • При значении 0 элемент будет полностью прозрачным.

    Вам нужно выбрать значение от 0 до 1 . При значении 0,6 элемент будет на 60% непрозрачным, и вы сможете видеть сквозь него!

    Вот как это можно использовать:

    Вот пример, который даст представление о прозрачности.

    Прозрачный абзац

    Прозрачность работает во всех браузерах, включая Internet Explorer , начиная с версии IE9 и выше.

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

    Модель RGBa

    CSS3 предоставляет еще один способ изменения прозрачности: модель RGBa . Это RGB , которое мы рассматривали ранее, но с четвертым параметром: уровнем прозрачности ( альфа-каналом ). При значении 1 фон полностью непрозрачен. При значении менее 1 он становится прозрачным.

    Это обозначение распознают все современные браузеры, включая Internet Explorer ( начиная с версии IE9 и выше ). Для устаревших браузеров рекомендуется указывать стандартный код RGB , в дополнение к RGBa .

    Заключение

    Мы изменяем цвет текста с помощью свойства color , а цвет фона — с помощью background-color . Также его можно использовать как способ растянуть фон на всю html-страницу .

    Можно указать цвет, введя его имя ( например, black ), значение в шестнадцатеричном формате ( #FFC8D3 ) или указав код RGB ( rgb(250,25,118) ).

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

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

    Данная публикация представляет собой перевод статьи « Color and background » , подготовленной дружной командой проекта Интернет-технологии.ру

    Ссылка на основную публикацию
    Фото с листком для вк
    Сигна в ВК – это просто фотография человека с листком бумаги, на котором обычно написано чье-то имя. Часто надписи делают...
    Установка виндовс зависла на начало установки
    Если вы решили переустановить или установить операционную систему, но начало установки Windows 7 зависает, то в этой статье, думаю, вы...
    Установка драйвера принтера отказ
    Нередки ситуации, когда не устанавливается принтер, хотя система видит, что к компьютеру подсоединилось новое оборудование. Решение такой задачи требует серьезного...
    Фото спортивных мужчин 40 лет
    17. Джерард Батлер, 48 лет (kinopoisk) «Законопослушный гражданин» Джерард Батлер когда-то работал официантом, демонстратором игрушек и даже юристом. Он также...
    Adblock detector