Красивые цветовые эффекты CSS и их применение в блоге

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


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

Вариант1.



Вот такой код

<div style="background: #4308A6; background: -moz-radial-gradient(center, ellipse cover, #4308A6,#D3D0C8 ); background: -ms-radial-gradient(center, ellipse cover, #4308A6, #D3D0C8); background: -o-radial-gradient(center, ellipse cover, #4308A6, #D3D0C8); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4308A6), color-stop(100%, #D3D0C8)); background: -webkit-radial-gradient(center, ellipse cover,#4308A6, #D3D0C8); border: 1px solid #333; height: 200px; width: 100%;"</div>

Попробуем немного его разобрать, чтобы понять, что можно изменить. Сначала обращу внимание на значение radial. Им мы задали цветовой переход от центра к краям. Использую при этом всего 2 цвета. Я их выделила синим и красным. Можете поиграться и поменять на желаемое. Обратите внимание на строку зелёного цвета.
border: 1px solid #333-ширина рамки и её цвет
height: 200px-высота выделяемого участка(если предполагаете не всю страницу, а какую-то часть её)
width: 100%-ширина участка. При желании если нужно уменьшить задайте своё значение.

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

Теперь по принципу первого кода зададим переход цвета в другом направлении. Поменяем их и  добавим шарм нашему тексту. Дадим ему немного тени и изменим стиль.  Для примера воспользуюсь вот такими значениями, которые прописываем после  width: 100%;

ilter:glow(color:00FFFF Strength=5);font-family:Monotype Corsiva;font-size:45pt;color:Blue ;text-shadow: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.15);
И получается у нас уже вот такая красота.

Вариант2.

текст

Теперь весь код выглядит вот так

<div  style="
background: #C2C2B1;
background: -moz-linear-gradient(top,#C2C2B1, #FFFFFF);
background: -webkit-gradient(linear, left top, left bottom, from( #C2C2B1), to( #FFFFFF));
background: -webkit-linear-gradient(top, #C2C2B1, #FFFFFF);
background: -o-linear-gradient(top, #C2C2B1, #FFFFFF);
background: -ms-linear-gradient(top, #C2C2B1, #FFFFFF);
width:250px;
height: 600px;
border: 2px solid  #B2AFBA;ilter:glow(color:00FFFF Strength=5);font-family:Monotype Corsiva;font-size:45pt;color:Blue ;text-shadow: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.15);">текст
</div>

И ещё один совершенно изумительный эффект. Прямо радуга или северное сияние.
Вариант 3.

Две бабушки на лавочке
Сидели на пригорке.
Рассказывали бабушки:
- У нас одни пятерки!

Друг друга поздравляли,
Друг другу жали руки,
Хотя экзамен сдали
Не бабушки, а внуки!

Вот этот код

<div style="background: #FFFFFF; background: -moz-radial-gradient(center, ellipse cover, #FFFFFF 0%,#C579BD 30%, #6ff5f5 70%, #FFDE31 100%); background: -ms-radial-gradient(center, ellipse cover,#FFFFFF 0%, #79CF1F 30%,#C579BD 70%, #FFDE31 100%); background: -o-radial-gradient(center, ellipse cover, #FFFFFF 0%, #79CF1F 30%,#C579BD 70%, #FFDE31); background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%, #79CF1F 30%,#C579BD 70%, #FFDE31 100%); border: 3px solid #FF7916; height: 200px; width: 100%;">
<br /></div>
При создании такого эффекта мы используем 4 цвета, которые меняются от центра к краям блока.
Меняйте их на своё усмотрение, размеры всего блока, рамки. В этом случае я просто фоновое изображение , а текст написала уже в обычном режиме.

Советую прочитать по этой теме-

как сделать тень блока с помощью CSS
эффект неонового свечения
несколько вариантов красивого оформления текста 

Пожалуй на этом и закончим. Хороших всем выходных и до новых встреч.


Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

6 комментариев:

  1. Вика, такую радугу устроила)))) Сколько возможностей с CSS... Этот пост уж точно никого равнодушным не оставит! Рукодельница)))

    ОтветитьУдалить
  2. Привет Ирина. Да вот так как-то захотелось сератонина прибавить.

    ОтветитьУдалить
  3. Добрый день, Виктория! Для оформления сообщения я хочу использовать вариант 2. После заголовка при наборе текста я пробовала перейти в обычный шрифт. Если я меняю размер шрифта, то межстрочные интервалы остаются очень широкими. Как это изменить?

    ОтветитьУдалить
    Ответы
    1. Лариса. Текст у мы в коде уже задали своё значение. Так что при переходе на мелкий шрифт, да большие отступы. Тут лучше выбрать или всё сообщение в этом варианте либо только заголовок. Можно поиграться со значением размера шрифта 45pt. Или вставить 2 кода подряд с разными значениями размера шрифта.Но заголовок в этом случае будет несколько разделён с сообщением.

      Удалить
    2. Не за что Лариса.

      Удалить

Пользовательский поиск