Продолжу свою историю о том, как создать красивые страницы на HTML. Как только Вы справились с основными элементами, поправили всё на странице и проверили их, можно смело обо всём забыть. До того момента, когда понадобится добавить пару элементов на существующую страницу.
В качестве примера приведу свою работу над страницей, а точнее - над одним блоком, который на сегодня нравится мне больше всего.
Блок должен был выглядеть красиво. И чтобы сделать его красивым, понадобилось чуть-чуть покопаться. Не уверен в том, всё ли я сделал правильно, но на выходе получилось вот что:
Второй пример - когда Вам необходимо создать не просто блок, а довольно большой массив, который в дальнейшем можно использовать для прикручивания ссылок на увеличенное изображение каждой части этого блока. Сразу поясню, что речь даёт о палитре цветов и здесь всё довольно "прозрачно" и открыто.
Итак задача номер (уже не считаю): создать палитру цветов с возможностью дальнейшего изменения (добавление ссылок).
Ввиду того, что сама задача не предусматривает размещения простого изображения самой палитры (рисунок в *.jpg или *.png формате), создаю всю структуру посредством кода. Для начала выписываем все необходимые значения цветов из бумажной палитры (веера). Если у Вас есть версия палитры в электронном виде, например, с официального сайта, задача упрощается. Можно просто скопировать текст и вставить значения цветов.
Далее, если у Вас есть конвертер значений цветов в формат RGB для дальнейшего прописывания строк со значением color: RGB(249, 231, 16);, то мы просто прописываем эти значения. Если у Вас какая-то специфическая палитра от определённого производителя (в моём случае всё было именно так), то официальный сайт такого производителя Вам в помощь. Очень многие компании помогают своим Клиентам, размещая в сети документацию о том, как правильно читать веер палитры.
Но если Вы прописываете значения цвета элемента через <style="background-color: (значение);">, то понадобится провести декодирование с помощью сервиса перевода "RGB-цвета в HEX-цвета". В Сети есть множество таких онлайн-переводчиков, тут, как говорится, на вкус и цвет товарищей нет.
Кроме совсем простых, есть онлайн-конвертеры с визуализацией полученного результата. Довольно удобно, однако, не следует забывать, что отображаемый цвет на экране монитора (почти всегда) не соответствует реальному цвету на веере. Поэтому получаемые цвета будут лишь приблизительными. В этом случае рекомендую подбирать цвета вручную для большей приближенности к оригиналу. Это довольно долго по времени, но зато результат будет лучше.
Переходим непосредственно к кодированию. Поскольку нам нужна именно таблица, задаём значения будущей таблицы:
Конечным результатом на сайте стало это:
В общую таблицу было включено 380 оттенков, что довольно много. С этой задачей я справился за 2 часа 10 минут. Результат понравился.
Удачной вёрстки и творческих успехов!