Как поменять цвет логотипа в css
Перейти к содержимому

Как поменять цвет логотипа в css

  • автор:

WordPress Как изменить цвет шрифта в меню сайдбара?

Здравствуйте уважаемые форумчани. Подскажите, пожалуйста, как и где можно изменить цвет шрифта в сайдбаре? Тема блога LightWord 2.0.0.6 от Andrei Luca Если нужно вот файлы css, которые нашел в теме (http://upwap.ru/1823864) Помогите, пожалуйста, буду благодарен! Вот сам сайт с темой: http://gotovim-vkusno.net.ua/

Если вы путешествуете, возможно Вас заинтересует гид (https://dreamguide.world/countries/) на русском языке!

На сайте с 12.01.2007
10 ноября 2011, 17:00

Самый простой способ, открываете сайт в хроме, жмете правой кнопкой по нужному элементу, выбираете просмотреть код элемента. Автоматически выделяется html код нужного элмента, а справа появляется панелька стилей, находите нужное свойство css(в данном случае color) менете его, если цвет изменился, то вы выбрали правильный элемент. Копируете измененный селектор css например было a < color: #807D7A; >поменяли на зеленый стало a < color: green; >добавляем в любой css вашего сайта a < color: green !important; >

На сайте с 18.10.2009
10 ноября 2011, 19:09
Добавить в style.css:

.content-sidebar ul li a // это будет просто для ссылок в сайдбаре
.content-sidebar ul li a:visited // это для «кликнутых» ссылок
.content-sidebar ul li a:hover // это цвет при наведении курсора на ссылку
Кстати, у Вас уже есть стиль для hover:

.content-sidebar ul li a:hover,.content-sidebar .recentcomments a:hover

Введение в Chrome DevTools. Панель Elements

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

В этом цикле статей мы разберём базовые возможности Chrome DevTools, но их будет вполне достаточно для начала обучения.

Как открыть инструменты разработчика

Настройки DevTools

Тема интерфейса

Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.

Горячие клавиши

В настройках есть список горячих клавиш — советуем с ними ознакомиться, знание этих комбинаций очень ускорит работу.

Расположение панелей

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

Вкладка Elements

С её помощью можно отслеживать элементы и их свойства на странице, можно редактировать стили и проверять вёрстку на переполнение. Как это делать? Давайте разбираться.

Как получить информацию об элементе

Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.

Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.

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

Введём, например, класс header , и увидим все подходящие элементы:

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

Как внести изменения в элемент на странице

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

Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.

Как изменить разметку страницы

Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.

Проверка вёрстки на переполнение

Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.

Проверка на переполнение текстом. Есть два способа:

  1. Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
  2. Открываем вкладку Console, вставляем команду document.body.contentEditable = true , нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.

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

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

Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.

Просмотр и тестовое редактирование стилей

Информация о стилях находится на вкладке Styles. Справа выводятся стили, указанные разработчиком, а справа от каждого стиля — файл и строка, где они прописаны.

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

Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.

Меняем стили прямо в браузере

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

Напишем правило с ошибкой. Правило не применится, потому что его не существует. Оно зачёркнуто, а слева появляется иконка с предупреждением.

А ещё мы можем разворачивать сокращённое правило, кликнув на стрелку. Например, так можно развернуть правило для border-style .

Слева у всех элементов есть чекбокс для включения и выключения стилей.

Данные о цвете

У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Пришел «зелёным» junior и вырос до «жёлтого» middle. История выпускника

Пришел «зелёным» junior и вырос до «жёлтого» middle. История выпускника

Поговорили с фронтенд-разработчиком Александром Масленниковым и узнали, насколько сложно ему было пройти путь от новичка после курсов HTML Academy до полноценного мидла в компании «5 углов».

Александр рассказал, как выбирал будущие курсы, насколько сложно быть программистом-джуном, и как вкатиться в профессию, если тебе уже за 30.

— Ты пришёл в «5 углов» сразу после курсов?

— Да. Работаю тут уже три года. По сути, первое серьёзное собеседование я прошёл в компании «5 углов». Остальные работодатели не отвечали, как это часто бывает на hh.

Кстати, «5 углов» я нашёл не через hh, а через HTML Academy. У них есть своя небольшая площадка, где компании, с которыми они сотрудничают, оставляют вакансии, а затем выбирают сотрудников среди выпускников.

— Получается, можно просто закончить курсы HTML Academy и идти искать работу?

— Можно, но если у тебя кроме учебных проектов будет ещё что-то, шансов намного больше. Курсы дают начальные знания для входа в мир IT, а дальше нужно расти самому. В разработке нужно всегда учиться новому.

— На кого ты учился в университете?

— По образованию я бухгалтер-аудитор, но по специальности я так ни разу в жизни не поработал. В основном работал в продажах, продажах и ещё раз в продажах 🙂

У родителей был семейный бизнес — магазинчик, я им помогал, был администратором в магазине. Занимался всем подряд — если надо было, то подменял продавцов, выезжал за товаром и на выставки, проводил ревизию и аудиты. Магазин работал по франшизе, поэтому были обязательства с определёнными компаниями.

Основные поставки шли из Турции, какая-то часть из Европы, то есть всё было привязано к курсу доллара. И когда он поднялся до 70, стало очевидно, что для нашего городка такой магазин становится нерентабельным, и мы закрылись. После этого я взял небольшой перерыв и подался в раздумья, чем бы хотел заниматься.

— Рассматривал что-то, кроме программирования?

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

Но время шло, и всё чаще приходили мысли о том, что нужна стабильная и надёжная работа. Так как кроме продаж я ничего не умел, пошёл продавать квартиры. Через полгода работы риелтором я понял, что продажи просто ненавижу. Хотелось чего-то более спокойного, где будут какие-то рамки, ТЗ, и ты можешь спокойно работать, никто не будет напрягать.

Знакомый с большим опытом в разработке посоветовал попробовать программирование, порекомендовал начать с вёрстки сайтов и даже посоветовал курсы. У них в команде был выпускник HTML Academy, и они остались довольны.

— Хватило ли тебе навыков, которые ты получил на онлайн-курсах в HTML Academy, чтобы начать работать?

— Вполне, у них очень большое покрытие навыков, начиная от обычных HTML, CSS и JavaScript, и заканчивая React, Vue, PHP. Они сейчас очень много всего дают. По сути, это выглядит так: тебя учат алфавиту и базовым словам, а потом ты должен научиться составлять из них предложения. Чем красивее ты составляешь предложения, чем они лучше и больше, тем ты профессиональнее становишься.

Всё зависит от компании, в которую пытаешься попасть. Если там пишут в вакансии что нужен junior — не факт, что это так и есть. Некоторые обозначают требования, которые уже явно соответствуют разработчику с опытом в пару лет. Тут не стоит расстраиваться и опускать руки. Пока не пригласили на собеседование, стоит дальше учиться самостоятельно и пополнять портфолио.

Интересно оформленное портфолио — огромный плюс, оно показывает отношение сотрудника к работе.

— Есть популярное мнение, что junior-разработчиков никто не любит, и их не хотят брать на работу. Было ли три года назад так? Можешь ли ты назвать везением, что тебя взяли на работу так быстро?

— Это ошибочное мнение. Полагаю, что оно появляется на фоне того, что многие онлайн-школы сулят высокие зарплаты, но когда после прохождения курсов не берут на подобные зарплаты, случается небольшой шок. Надо понимать, что после прохождения курсов у вас 0 опыта. Учебные проекты не в счёт — они сделаны под присмотром наставника, и компания, куда вы направляете своё резюме, скорее всего это понимает. Я думаю, что компания всегда хочет себе опытного сотрудника, и не важно, какая это сфера.

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

То, что я нашёл работу буквально через три месяца после курсов, я считаю большим везением. Предполагал, что поиск работы займет минимум год. Уже был составлен план, как буду двигаться в течение года:

  1. Раз в неделю проходить по вакансиям и брать в работу тестовые задачи;
  2. Пытаться повторить какой-нибудь простенький сайт,
  3. Если пригласили на собеседование, то обязательно иду, ведь даже из неудачного собеседования можно получить много полезного опыта.

В общем, была цель набраться опыта и заполнить портфолио.

— Сейчас на Youtube очень много видео, в которых критикуют онлайн-курсы. Можешь сказать, действительно ли они работают?

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

Онлайн-курсы — это такая же система обучения, как и вузы, только попроще и более точечная.

Я рассматривал и очную систему обучения. Выбрал школу при МГТУ им. Н.Э. Баумана в Москве. Там огромный выбор курсов, в том числе по HTML и JS. Ездить мне было удобно — полтора часа, и я там. Но звёзды так сложились, что и цена в два раза дороже, и начался ковид. Было непонятно, что вообще происходит, поэтому решил отказаться от очного обучения.

В итоге, я взял в HTML Academy начальный курс «HTML и CSS. Профессиональная вёрстка сайтов», который просто объясняет, что такое HTML и CSS — можно сказать, азы. Были онлайн-лекции, в чате я мог задавать вопросы, и после каждой главы лектор отвечал на них. Также можно было выбрать себе одного наставника, который помогал в течение курса. Всё выглядело цивилизованно. По итогу первого курса мне всё понравилось, и я взял следующий курс. Позже добрался до курса по JS, потому что без него никуда.

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

— В целом, ты можешь порекомендовать HTML Academy?

— Да, я до сих пор у них периодически беру курсы. У нас на работе есть плюшки — оплата 50% стоимости курсов для роста квалификации. Как пример, я посчитал, что нашей команде нужен курс «Вёрстка email-рассылок». Люди, которые сейчас приходят, даже не знают про неё, ведь этим пользовались лет десять назад. Так как в компании кто-то должен уметь делать e-mail верстку быстро и качественно, я взял эту роль на себя. Обсудил это с руководителем отдела, и компания мне покрыла половину стоимости.

— Какие навыки пришлось приобретать, когда ты уже пришёл на работу?

В начале очень нужны были soft skills для постоянного общения с коллегами. Так как сфера была для меня полностью новая, я вообще не знал, что делать в некоторых моментах. У меня постоянно были вопросы: «Как подключаться? Где что брать? Что произошло?».

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

В хорошей компании понимают, что junior-разработчика не нужно грузить какой-то тяжелой работой, от которой он сломается. Так ведь и психологическая травма может случиться: потратил кучу денег, времени на обучение, а тут пришёл и на первой же задаче споткнулся.

— Как ты себя чувствовал в первые дни работы? Может, были мысли все бросить?

— Мысли бросить бывали, наши проекты уникальные, поэтому довольно часто встречаются такие задачи, над которыми надо изрядно поломать голову.

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

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

— Доволен ли ты свои выбором профессии?

— Если смотреть из тех вариантов, которые у меня были, я считаю, что пошел по самому лучшему. Я доволен.

Решающих вещей много: коллектив, начальство, зарплата, возможность работать удалённо. Нет проблем взять отпуск на пару дней, если случилось что-то срочное. Совокупность всех этих вещей сейчас меня устраивает.

— Можешь охарактеризовать или описать парой слов, каким ты был в начале пути, и то, какой ты сейчас?

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

Я считаю, что хороший опыт для программирования лет 8: всё можно попробовать, поменять направление, на котором ты вырос, войти во что-то новое. Можно зайти в новое направление одним из первых и рассказать, какой ты классный.

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

— Профессионалом ты назвать себя пока не можешь?

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

Senior уже имеет весомый опыт за спиной, заранее понимает, какие проблемы могут быть на проекте и как их избежать, какие решения могут пригодиться. Также он имеет хорошо развитые soft skills. Написание кода и многие решения уже отточены и понятны, их удобно поддерживать.

— Какие навыки у тебя были в начале и какие сейчас? Что ты приобрел нового?

— У меня просто вырос багаж знаний. Когда я пришел в начале, часто все делал сам, не использовал библиотеки. Сам колхозил. Было жестко, больно, неприятно, но это необходимый опыт.

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

— Сколько тебе было лет, когда ты поменял профессию? Согласен ли с тем, что свою специальность можно менять в любом возрасте?

— Мне было 34, когда я закончил курсы. Вопрос довольно популярный на самих курсах, часто спрашивали: «Мне 40 лет, нормально ли идти на курсы?». В интересах создателей курсов, конечно, соглашаться. Но на самом деле всё зависит от человека, насколько твой мозг готов впитывать полностью новую информацию. Новая информация в голове — это в принципе очень тяжело. Даже у детей, когда они что-то не понимают в школе, бывает стресс. Когда человек взрослый, мозги у него немного «подсыхают» и их надо постоянно тренировать. Если готов впитывать все новое, то ты сможешь.

— Нет ли у тебя зависти к шестнадцатилетним специалистам, которые вкатились по возрасту раньше тебя во фронтенд?

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

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

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

  • 1 февраля 2024

Инструкция: как и чем заменить Figma Dev Mode

Инструкция: как и чем заменить Figma Dev Mode

Если вы всё пропустили, то на днях в Фигме появилась такая плашка:

Коротко: Dev Mode, скоро выходит из бета-версии и станет платным. Dev Mode — это тот новый режим, который умеет удобно сразу показывать весь нужный CSS и свойства в одном месте. Мы уже рассказывали о нём в «Доктайпе».

Но прошло полгода и лавочка закрылась. Отвечаем на самые распространенные вопросы, которые могли у вас появиться (потому что они появились и у нас).

  • 30 января 2024

Dev Mode в Figma. Быстрый обзор бета-версии

Dev Mode в Figma. Быстрый обзор бета-версии

Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.

Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.

Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.

  • 10 августа 2023

Горячие клавиши Figma для быстрой работы

Горячие клавиши Figma для быстрой работы

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

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

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

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

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

А если не пользуетесь — попробуйте.

  • 7 августа 2023

Старт в Figma для верстальщика

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

  • 2 августа 2023

Инструменты для работы со шрифтами

Инструменты для работы со шрифтами

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

Рассмотрим несколько инструментов для работы со шрифтами, которые будут полезны при создании сайта.

  • 29 июня 2023

10 горячих клавиш VS Code, которые ускорят вашу работу

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

  • 13 июня 2023

10 лучших тем для VS Code

10 лучших тем для VS Code

VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.

  • 11 июня 2023

10 полезных плагинов VS Code для вёрстки

10 полезных плагинов VS Code для вёрстки

Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.

Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.

  • 9 июня 2023

17 полезных плагинов JavaScript в VS Code

17 полезных плагинов JavaScript в VS Code

Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.

Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.

  • 6 июня 2023

Краткий гайд по тёмной теме в письмах

Разобрались досконально с тёмной темой в письмах, провели исследование и теперь делимся знаниями с вами. Этот краткий, но ёмкий гайд поможет вам разобраться:

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

Почему в письмах используют тёмную тему

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

Тёмную тему в рассылках предпочитают

  • 17% мобильных пользователей (ист. EMX)
  • 45% пользователей Apple mail на iOS (ист. EMX)
  • 7,5% пользователей Apple mail на MacOS (ист. Litmus)

Как почтовики реагируют на тёмную тему

  • Не реагируют на тёмную тему вообще.
    Большинство десктопных почтовых клиентов и некоторые веб-почтовики.
  • Частично инвертируют яркость цветов — меняют светлый фон на тёмный и тёмный текст на светлый. Изначально тёмный фон со светлым текстом останутся неизменными.
    Яндекс на мобильных, Mail.ru на мобильных и в веб-интерфейсе, Outlook на мобильных и в веб-интерфейсе, Gmail на Андроиде.
  • Делают инверсию яркости независимо от изначального цвета: даже тёмный фон со светлым текстом преобразуются в светлый фон с тёмным текстом.
    Gmail на iOS.
  • Поддерживают кастомизацию элементов в зависимости от выбранной темы на устройстве.
    Apple mail на MacOS и iOS, Outlook в веб-интерфейсе и на мобильных, Mail.ru в веб-интерфейсе.

Что делать, чтобы письма выглядели хорошо в любой теме

  1. Старайтесь использовать цвета, которые одинаково контрастно смотрятся и в светлой, и в тёмной теме.
  2. Используйте изображения с прозрачным фоном — PNG.

тёмная тема в рассылках

Кастомизация тёмной темы в рассылках

В Apple Mail на MacOS и iOS, в веб-интерфейсе Mail.ru и частично в Outlook можно настроить индивидуальный дизайн для светлой и тёмной темы: фон, цвета, шрифты, графику.

В Apple Mail и в веб-интерфейсе Mail.ru для этого используется медиазапрос @media (prefers-color-scheme: dark) .

    «Сообщите» почтовику, что ваши емейлы поддерживают тёмную тему, — в HTML-коде вашего письма добавьте метатеги в тег :

@media (prefers-color-scheme: dark)

Поменяйте цвета шрифтов и фона — тёмный текст на светлый, а светлый фон — на тёмный:

@media (prefers-color-scheme: dark) < .copy < background-color: #222222; color: #eaeaea; >>

Можно поменять и размер шрифта, добавив к CSS, например:

@media (prefers-color-scheme: dark) < .copy < background-color: #222222; color: #eaeaea; font-size: 20px; line-height: 24px; >>

Можно предусмотреть один логотип для светлой темы и другой — для тёмной. Для этого пропишите в коде два варианта логотипа и соответствующие CSS для отображения каждого из них:

””

@media (prefers-color-scheme: dark) < .img_light < display: none !important; >.img_dark < display: block !important; >>

Для кастомизации элементов под тёмную тему в Outlook в веб-интерфейсе и на Андроиде можно использовать только префикс для селекторов CSS [data-ogsc] :

[data-ogsc] .dark-mode

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

Пример кастомизации картинок и цвета текста с data-ogsc:

[data-ogsc] .img_light < display: none !important; >[data-ogsc] .img_dark < display: block !important; >[data-ogsc] .text_block < color: #ffffff !important; background: #222222 !important; >[data-ogsc] .text_block a

Outlook на iOS поддерживает и медиазапросы, и префикс селектора CSS [data-ogsc], но и то и другое лишь частично. При использовании медиазапросов Outlook на iOS позволяет заменять изображения, но некоторые цвета в самом письме могут остаться неизменными. А при использовании data-ogsc Outlook на iOS вообще не позволяет менять изображения, некоторые цвета при этом также могут остаться неизменными.

Чтобы вашу стилизованную тёмную тему в рассылках увидело максимальное количество подписчиков, продублируйте в коде письма одни и те же стили и с префиксом, и в медиазапросах.

Сравнительная таблица почтовиков

тёмная тема в рассылках

Инвертирование цвета в разных почтовиках

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

Поменять цвет иконок при наведении

Author24 — интернет-сервис помощи студентам

Здравствуйте! Не могу разобраться со стилями, мне необходимо поменять цвет иконок соц. сетей при наведении в шапке сайта (potolok-krasivo.ru). Необходимо каждой иконке задать свой цвет при наведении.
Заранее благодарю!

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как поменять цвет png картинки при наведении?
Есть png картинка,есть ли способ поменять цвет этой картинки не заменяя эту картинку на эту же.

Эффект при наведении. При наведении на впереди стоящий элемент, предыдущие элементы меняли цвет border
Необходимо реализовать это по возможности без js. Если есть какие-то варианты на css, буду рад.

Как реализовать появление иконок при наведении?
Как реализовать появление фона и иконок-ссылок при наведении (см. скрин)? Спасибо.

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

26 / 18 / 10
Регистрация: 26.11.2012
Сообщений: 179

У каждой иконки на этом сайте есть свой класс. Вот для каждого из этих классов и прописать свой цвет.

Регистрация: 29.01.2018
Сообщений: 25

Да, я это понимаю, но в реале когда прописываю стиль допустим для первой иконки : div.soc-ico.show-on-desktop.in-menu-first-switch.in-menu-second-switch.custom-bg.custom-border.border-on.hover-accent-bg.hover-disabled-border.hover-border-off.first.last > a.vk > ::after — он не срабатывает! Вот поэтому я и прошу помощи в подборе правильного правила.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *