Палитра css

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

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

Палитра css

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

Как поменять цвет и на что ориентироваться начинающему дизайнеру и сайтостроителю

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

Палитра css

Вообще, этот атрибут применим не только для текстов в html, но и в документе CSS, который отвечает за стиль. Так что, если вы когда-нибудь увидите в скрипте «color», то далее будет значение, которое можно поменять на свое, и где-то обязательно преобразуется цвет. Если не забудете сохранить.

Как вы видите на моем примере, в кавычках стоит значение Red – красный и страничка в браузере сейчас выглядит так.

Палитра css

Можно поменять этот показатель на Yellow (желтый).

Палитра css

Сохраним страницу и обновляем ее в браузере при помощи клавиши F5. Как вы видите, цвет изменился.

Палитра css

Если вас заинтересовало, то можете скачать документ, который я использовал для скриншотов. Для того чтобы внести свои правки откройте его при помощи Notepad++, Adobe Dreamweaver или стандартного блокнота.

Скачать документ >>

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

Палитра css

Страница изменится, как и все правки, которые вы применили. Если впоследствии вас заинтересует работа с кодом, то могу порекомендовать вам два очень крутых и бесплатных курса. Один по Html. Благодаря ему можно научиться работе с тестовыми формами — «Бесплатный курс по HTML (33 видеоурока!)»

Палитра css

Второй по CSS. Он тоже бесплатный и научит работать с дизайном. «Бесплатный курс по CSS (45 видеоуроков!)». Не буду вдаваться в подробности различий, если уж заинтересует, оставьте комментарий к этой статье и я вам все объясню. Или скачивайте, это не будет стоить вам ни копейки. Везде есть вводная часть, в которой все подробно излагается.

Палитра css

Пока мы не ушли далеко от темы, вернемся к цветовой гамме.

Как определить значения цветов. Еще 4 способа

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

Палитра css

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

Палитра css

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

Код – этот состоит из решетки и шести символов: цифры или буквы «A», «B», «C», «D», «E», «F». Решетку можно не использовать, но некоторые браузеры могут не среагировать на ваш запрос и не поставить нужного оттенка, поэтому рекомендую все-таки ее вставлять.

Палитра css

На сайте это обозначение будет выглядеть вот так.

Палитра css

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

Colorshame

Мой любимый онлайн сервис для работы с цветами www.colorscheme.ru. Он бесплатный и на русском языке. Что еще нужно для счастья дизайнеру?

Палитра css

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

Палитра css

Щелкаете по значению и можно скопировать.

Палитра css

Подсказки также вылезают и при наведении на понравившийся оттенок.

Палитра css

Чтобы сохранить себе значение щелкните по цвету и откроется дополнительное меню. Копируйте.

Палитра css

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

Палитра css

Вот так выглядит таблица.

Палитра css

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

Палитра css

Так и с кодом из второй.

Палитра css

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

Палитра css

Яндекс

Еще один вариант – помощник от Яндекс. Это очень быстрый способ определения кода. Вы просто вставляете название цвета в поисковую строчку и жмете «Поиск».

Палитра css

А вот и желанный шифр.

Палитра css

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

Палитра css

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

Есть и другой, похожий, интересный и забавный ресурс.

Getcolor

Если помимо самого цвета и кода, вам интересны еще и названия, то рекомендую сервис www.getcolor.ru.

Палитра css

Заходите на сайт. Сначала выбираете по основному кругу справа, затем внутри квадрата оттенок.

Палитра css

Под плашкой с выбранным оттенком находится вся основная информация о нем.

Палитра css

Можно кликнуть на тот, на который похож выбранный цвет и вам покажут 100% вариант.

Палитра css

Иногда можно увидеть забавнейшие названия.

Палитра css

start-luck.ru

  • Яндекс.Карты для MoDx Revo
    Mapex — Лучшее дополнение для MODX Revolution…
  • Эффект цвета в маркетинге
    Цветовые схемы и психологические реакции клиентов…
  • Центрирование в CSS
    Центрирование элементов — самая популярная причина…
  • Цветовой профиль Photoshop для верстальщика
    Простыми словами о том как грамотно настроить…
  • Цветовая схема для сайта
    Коллекция сервисов для подбора или коррекции…
  • Функция Php для удаления лишних символов из строки
    Здесь представлена функция, которая вычищает…
  • Список HTML шрифтов
    Таблица как показываются шрифты Web в разных…
  • Социальные кнопки для сайта (без AdBlock)
    Единственные кнопки «поделиться» в Рунете, которые…
  • Сервисы для тестирования сайта на разных гаджетах
    Список сервисов для тестирования и презентации…
  • Разноплановые и необычные CSS и SVG меню
    На данной странице мы собираем красивые и необычные…
  • Перевод аудио в текст
    Как перевести речевой аудио-файл в текст с помощью…
  • Маркетинг ручной работы
    Эта краткая статья поможет тем, кто хочет увеличить…
  • Макрос для CorelDraw — Curve info
    Удобный и практичный макрос площади, периметра…
  • Лучшая адаптивная галерея Fotorama
    Fotorama — мощная и многофункциональная галерея,…
  • Как избежать штрафа о хранении и обработке персональных данных
    С 1 июля 2017 года вступают в силу поправки к…
  • Как вставить Google forms на сайт
    Как сделать из обычной формы гугл — точную копию…
  • Горячие клавиши браузеров
    Горячие клавиши при работе с браузером, которые…
  • Всплывающие окна popup при загрузке страницы
    2 простейших рабочих варианта всплывающих окон…
  • Все meta-tags на вашем сайте
    Метатеги, которые используются для хранения информации…
  • Seo — настройка MoDx Revo
    В данной статье дано кратко все что нужно для…
  • ReCaptchaV2 для MoDx Revolution
    Описание установки ReCaptcha 2 от Google на сайт…
  • Open Server и Dr.Web — разрешаем файл Hosts
    Как разрешить на запись файл HOSTS для настройки…
  • MoDx обновление 2.6.5
    С 19 июля 2018 года произошла большая атака на…
  • MODX — Карта сайта и Robots.txt
    В этой статье простым языком написано как установить…
  • meta — теги для сайта MoDx Revo
    Для того чтобы у каждой страницы вашего сайта…
  • LESS на стороне клиента
    Использование на стороне клиента (в самом браузере)…
  • Iconogen — сервис автоматической генерации Favicon
    Это сервис поможет вам быстро сгенерировать favicon…
  • HTML5 аудио-плеер с плейлистом
    Аудио-плеер на основе технологии HTML5. Он состоит…
  • HSL — цветовая палитра и прозрачность
    Значения цвета HSLA являются расширением значений…
  • FormIt на MoDx Revolution
    FORMIT — это приложение для обработки формы в…
  • Eurowebcart — CMS для создания магазина
    Система управления сайтом Eurowebcart позволяет…

oceana.nichost.ru

You May Also Like

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.