Красивые цветовые эффекты 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
эффект неонового свечения
несколько вариантов красивого оформления текста 

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

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

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