Как сделать текст другим цветом
Изменение цветов текстового поля или фигуры
В текстовом поле или фигуре можно быстро изменить цвет текста, внутренний цвет (Заливка) или цвет границы.
Выбери фигуру — инструменты для рисования отображаются на ленте, а вкладка Формат активна.
Несмотря на то, что изменения, внесенные ниже, отображаются в Microsoft PowerPoint, они работают точно так же в Excel, Word, Outlook и Project.
Изменение цвета текста
Чтобы изменить несколько фигур или надписей, щелкните первую фигуру или надпись, а затем, удерживая нажатой клавишу CTRL, щелкните остальные фигуры или надписи.
Примечание: Меню » Заливка текста » и » контур текста » могут быть неактивным, пока не будет введена фигура.
Изменение цвета текста, отсутствующего в Цвета темы
Выделите фигуру или текстовое поле.
Изменение цвета внутри (заливки)
Чтобы изменить несколько фигур или надписей, щелкните первую фигуру или надпись, а затем, удерживая нажатой клавишу CTRL, щелкните остальные фигуры или надписи.
Нажмите кнопку Заливка фигуры, а затем в разделе цвета темывыберите нужный цвет.
Изменение цвета заливки на цвет, отсутствующий в Цвета темы
Выделите фигуру или текстовое поле.
На вкладке средства рисования | формат нажмите кнопку заливка фигуры > другие цвета заливки.
Изменение цвета границы
Если вы хотите изменить несколько фигур или надписей, щелкните первую фигуру или надпись, а затем, удерживая нажатой клавишу CTRL, щелкните остальные фигуры или надписи.
На вкладке средства рисования | формат нажмите кнопку контур фигуры и в разделе цвета темывыберите нужный цвет.
Изменение цвета границы на цвет, отсутствующий в Цвета темы
Выделите фигуру или текстовое поле.
На вкладке средства рисования | формат нажмите кнопку контур фигурыи выберите пункт другие цвета контура.
Совет: В PowerPoint вы также можете изменить цвет границы, нажав кнопку контур фигуры (на вкладке Главная в группе Рисование ).
Как задать цвет фона и текста на web-странице?
По умолчанию цвет текста и вообще любого шрифта на web-страницах всегда черный (#000000). Но мы всегда можем задать абсолютно любой цвет, который нам нравится и прилично смотрится или же больше подходит под дизайн конкретного сайта.
Задаем цвет текста
В HTML цвет текста, шрифта, фона и других элеменотов можно задать двумя способами:
1. Способ 1-й. В парных тегах прописывается атрибут с указанием названия нужного цвета. Название цвета указывается по английски. Например, цвет заголовка на нашей web-странице можно задать таким способом:
Не забываете про правило вложенности тегов. Полный код нашего заголовка будет выглядеть так:
Обзор автомобилей 2008 года.
А сам заголовок на странице будет выглядеть так:
Обзор автомобилей 2008 года.
Текст красного цвета
Текст красного цвета
Текст красного цвета
равнозначны и отображаться браузерами будут совершенно одинаково.
Для нашей web-странички, я например шрифт заголовка выделил красным цветом «red», а текст на статьи задал темно-синим, прописав внутри каждого абзаца (p) таким образом:
Задаем цвет фона web-страницы
Так же как и цвет текста Мы можем изменить и цвет фона нашей страницы.
Посмотреть на то, что у нас получилось можно здесь. Если Вам что-то не понятно можно открыть HTML код страницы. В браузере IE это делается через меню: Вид > Просмотр HTML кода, в браузере Opera это меню: Вид > Исходный текст.
В разделе Статьи Вы найдете названия основных цветов и их значения в палитре RBG. Попробуйте применить разные цвета теста, заголовков, фона, но помните: цвет текста и фон страницы выбираются по желанию дизайнера, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта. Не стремитесь все затемнить, текст удобно читать, если его хорошо видно.
Всего Вам доброго.
Обновлено: 06.10.2014 г.
Читайте также:
Поделитесь этой информацией со своими друзьями!
Комментарии к этой статье (уроку):
Комментарии добавил(а): Олег Гузь
Дата: 2009-10-23
Андрей! Какой у Вас замечательный сайт! Я уже вторую неделю регулярно им пользуюсь: изучаю Ваши уроки, и видеоуроки; читаю Вашу литературу и скачиваю программы; делаю первые шаги в веб-программировании! И, что самое главное, у меня получается. А я ведь совсем не физик, а лирик! И в этом может убедиться каждый, кто посетит мой литературный сайт: » СТИХИ ОЛЕГ ГУЗЬ » Мои реквизиты: электронная почта: STIHI100@rambler.ru сайт: http://sites.google.com/site/stihiolegguz/
Комментарии добавил(а): Женя
Дата: 2009-11-09
Я пробовал изменять цвет фона, и у меня не получается! Как изменить цвет фона?
Комментарии добавил(а): Андрей_К
Дата: 2009-11-09
внимательно проверьте код
Комментарии добавил(а): Вова
Дата: 2010-01-09
Я пробовал изменять цвет фона, и у меня не получается! Как изменить цвет фона?
Комментарии добавил(а): Jktu
Дата: 2010-01-10
Вова вам же сказали:
Комментарии добавил(а): Алексей
Дата: 2011-01-11
Прикольно,всего вам самого хорошего.
Комментарии добавил(а): Bebe
Дата: 2011-01-11
там пробел убрать надо просто..
Комментарии добавил(а): Александр
Дата: 2011-04-05
если цвет задается 16-ричным кодом, то код записывается только через диес (#), если же цвет задается словом, то только в кавычках. Т.О. не верно: или
Комментарии добавил(а): Александр
Дата: 2011-04-05
ой, пардон, там ошибка: Т.О. не верно,верно: или
Комментарии добавил(а): Юрий
Дата: 2011-07-30
а как сделатьфон рисунком?
Комментарии добавил(а): Андрей
Дата: 2011-07-31
Как сделать фон из рисунка посмотрите здесь: http://www.luksweb.ru/view_post.php?id=29
Комментарии добавил(а): сергей
Дата: 2011-09-01
скажите а между допустим:
Комментарии добавил(а): сергей
Дата: 2011-09-01
непонятно нужны ковычки или нет «#FFFFFF» в этом примере
Комментарии добавил(а): Геннадий Григорьевич
Дата: 2011-12-28
Всё понятно, благодарю.
Комментарии добавил(а): Андрей
Дата: 2012-01-23
Занимался с разными самоучителями,бесполезно я не пробиваем,решил больше не пытаться.Но месяц на этом сайте где всё разжевано и в рот положено осталось только проглотить меня уверил, что все очень просто нужно только понять суть. Огромное спасибо Автору
Комментарии добавил(а): Денчик програмист
Дата: 2013-01-31
Спасиба очень помогли.
Комментарии добавил(а): Серёга
Дата: 2013-03-04
Обзор автомобилей 2008 года.
Комментарии добавил(а): Серёга
Дата: 2013-03-04
Не получается изменить цвет =(
Комментарии добавил(а): Серёга
Дата: 2013-03-04
Комментарии добавил(а): Вадим Галялетдинов
Дата: 2015-07-15
Я хочу в Мозилле сделать сейчас текст и фон полностью Цветным и всю страницу цвете!Прокомментировал Вадим Галялетдинов
Добавить Ваш комментарий:
Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.
Html выделить текст цветом (фон), рамкой
Иногда нужно выделить фрагменты или какие-то блоки текста рамкой, цветом, сделать цветной фон. Текст, оформленный в яркую закругленную рамку, привлекает внимание читателей. Сделать такую рамку с цветным фоном просто.
Не надо даже залезать в стили CSS.
Как сделать рамку в html вокруг текста
В текстовом режиме вставьте в запись (пост) следующий html код (в режиме ТЕКСТ).
Все параметры можете изменить по своему вкусу.
В режиме ВИЗУАЛЬНО вы увидите текст в рамке.
Толщина и размер рамки
В вышеприведенном примере РАЗМЕР шрифта текста font-size: 12px
СТИЛЬ шрифта font-family: Arial
ТОЛЩИНУ и ЦВЕТ рамки определяет свойство border: 2px solid #aa0000.
ЦВЕТ фона background: #F8E4DF
Вид рамки
При таком написании рамка растягивается на всю ширину занимаемого блока
Html рамка по длине текста
Чтобы сделать рамку по длине текста, надо задать ее ширину, например, width:100px.
Если текст длинный, и ширины рамки не хватает, слова в рамке встанут в несколько строчек. Высота рамки при этом автоматически увеличится.
Как выбрать цвет рамки и фона
Чтобы подобрать цвет рамки и цвет фона, наиболее подходящие к дизайну вашего сайта:
ОТКРОЙТЕ свой сайт.
НАВЕДИТЕ курсор на элемент, который надо изменить.
ПРАВАЯ кнопка мыши, ПРОСМОТР КОДА ЭЛЕМЕНТА (в Google Chrome), или ИССЛЕДОВАТЬ ЭЛЕМЕНТ (в Mozilla Firefox), или ПРОИНСПЕКТИРОВАТЬ ЭЛЕМЕНТ (в Opera). Далее во всех этих браузерах действия аналогичны.
Появляется окно в нижней части экрана. Просматриваемый элемент в нем подсвечен.
Нажмите на квадратик COLOR и выберите наиболее подходящий вам цвет. Скопируйте цифровое обозначение цвета и вставьте его в html код (цвет рамки или цвет фона).
Заключение
Готово, вы получили выделение текста цветом (цветной фон) и цветной рамкой. Сделали это простым способом.
Понравилась статья? Поделитесь информацией с друзьями. Пишите отзывы в комментариях!
Очень полезная статья. Так действительно проще чем в фотошопе, то что я искал.
А что с фотографиями случилось? Вчера всё было нормально, хотела сделать по Вашей инструкции аватару себе, а сегодня не грузятся фото Жаль..
Не знаю, что у Вас случилось. У меня все фото на месте.
Текст и тень
Использование text-shadow
В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).
Рис. 1. Параметры text-shadow
Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.
Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.
Контурный текст
Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.
Рис. 2. Контурный текст
Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.
Пример 1. Контурный текст
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).
Пример 2. Четыре тени для контура
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.
Рис. 3. Контур с помощью четырёх теней
Трёхмерный текст
Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.
Рис. 4. Трёхмерный текст
Лично мне подобный текст напоминает надписи в стиле ретро и опять же лучше всего он подходит для заголовков, а не для основного текста веб-страницы.
Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.
Пример 3. Тень для добавления трёхмерности
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.
Тиснение текста
Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).
Рис. 5. Рельефный текст
Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).
Пример 4. Рельефный текст
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.
Свечение
Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показан пример свечения разных цветов.
Рис. 6. Свечение текста
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Размытие
Рис. 7. Текст с размытием
Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.
Пример 6. Размытие текста
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Тень и псевдоклассы
Как выбрать цвета текста из изображений в фотошопе: описываем во всех подробностях
Из этого туториала Вы узнаете, как выбрать цвета для своего шрифта в Photoshop, выбрав их непосредственно из изображения. Пошаговая инструкция для Photoshop CC, CS6 и более ранних версий.
Добавить текст к изображению с помощью Photoshop достаточно просто, но сделать текст таким, как будто он принадлежит изображению, не всегда легко. Шрифт, который вы выбираете, важен, но так же важен и цвет. Одним из способов объединения текста с изображением является выбор цветов шрифта непосредственно из самого изображения. В этом уроке я покажу вам, как выбрать один цвет для вашего шрифта и как стать более креативным, выбирая разные цвета из изображения для разных букв! Я буду использовать Photoshop CC, но каждый шаг полностью совместим с Photoshop CS6 и более ранними версиями.
Вот как будет выглядеть мой окончательный результат с цветом каждой отдельной буквы, взятой из другой части изображения. Конечно, цель этого урока не в том, чтобы создать этот точный образ, а в том, чтобы просто изучить шаги, чтобы вы могли использовать их для воплощения своих идей в жизнь:
Как выбрать тип цвета из изображения с Photoshop
Шаг 1: Откройте ваше изображение
Начните с открытия изображения, где вы будете добавлять свой текст. Вот изображение, которое я буду использовать. Я скачал этот с Adobe Stock :
Шаг 2: добавь свой текст
Добавьте свой текст к изображению. Я пошел дальше и добавил слово «ЦВЕТА». Буквы написаны черным цветом, что выглядит не очень хорошо, поэтому мы узнаем, как изменить цвета следующим образом:
Шаг 3: Выберите инструмент Type
Выберите инструмент «Текст» на панели инструментов, если он еще не выбран:
Шаг 4: выберите тип вашего слоя
Убедитесь, что ваш слой Type выбран на панели Layers:
Шаг 5: Нажмите «Образец цвета»
Нажмите на образец цвета на панели параметров, чтобы изменить цвет вашего типа:
Шаг 6: образец цвета из изображения
Мгновенно выбранный вами цвет становится новым цветом для вашего текста. Если вам не нравится выбранный вами цвет, нажмите на другую область, чтобы повторить попытку. Когда вы довольны цветом, нажмите кнопку ОК, чтобы закрыть палитру цветов. Текст уже выглядит лучше:
Шаг 7: выделите одну букву с помощью инструмента «Текст»
До сих пор мы узнали, как выбрать один цвет из изображения, чтобы использовать его в качестве цвета для всего текста. Что если мы хотим выбрать разные цвета изображения для разных букв? Выбрав инструмент «Текст», щелкните и перетащите букву, чтобы выделить ее. Я выделю первую букву «О»:
Шаг 8: Снова нажми на образец цвета
Выделив букву, снова щелкните образец цвета на панели параметров:
Шаг 9: Нажмите на изображение, чтобы попробовать новый цвет
Шаг 10: нажмите галочку
Нажмите кнопку ОК, чтобы закрыть палитру цветов. Чтобы отменить выбор буквы, нажмите галочку на панели параметров:
И вот, одна буква, которую я выделил, заполнена цветом, отличным от изображения:
Повторите шаги для других писем
Выполните те же шаги, чтобы изменить цвет для других букв. Сначала выделите букву с помощью инструмента «Текст», а затем щелкните образец цвета на панели параметров, чтобы открыть палитру цветов. Нажмите на новый цвет на изображении, чтобы попробовать его, а затем нажмите OK, чтобы закрыть палитру цветов. Когда вы закончите изменение цвета, нажмите галочку на панели параметров.
Вот мой окончательный результат после выборки разных цветов из изображения для каждой из оставшихся букв:
Подписывайтесь на нашу новостную рассылку
Будьте первым, кто узнает, когда будут добавлены новые учебники!