Давайте сегодня немного повеселимся с CSS и создадим разноцветные фоны для блоков, в которых можно разместить текст. Начнём с самого простого и перейдём к более сложному. Хотя, при понимании того, что делаем, можно создать уникальные переходы цвета. Во всех примерах будет использовано свойство gradient.
Вообще, самый простой код для созданий цвета фона отдельного блога будет выглядеть так
<style>
.elemento {
background-color:red;
}
</style>
<div class="elemento">Здесь любой ваш текст</div>
Как видно код совершенно простой. В стилях задан цвет блока
background-color:red; и в тегах div нужный текст.
Но играться - то мы будем с
CSS-градиентом, который представляет собой переходы от одного цвета к другому. Можете задать первый цвет в одном из четырех направлений или с одного из четырех углов. В целом, восемь различных вариантов градиента: топ, top left, top, right, bottom, bottom left, bottom, right, left, right.
Допустим, берём такой код
<style>
.element {
color: #191919;
height: 13em;
width: 35em;
font-family: Georgia;
background: linear-gradient(to top right, yellow 0%, red 100%);
font-size: 16px;
}
</style>
<div class="element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida magna malesuada urna iaculis fringilla. Maecenas sed varius elit. Proin sem sem, gravida a diam scelerisque, pharetra finibus urna. Morbi dictum scelerisque rhoncus. Quisque vestibulum vel turpis at tempus. Suspendisse luctus nisl odio, pharetra efficitur dolor egestas dictum. Sed aliquam sit amet dui ac porta. Pellentesque quam augue, vestibulum eget congue in, interdum tempor urna. Aliquam in vulputate nisi. Nullam sagittis risus vitae enim molestie, ut pulvinar diam dignissim..</div>
Результат
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida magna malesuada urna iaculis fringilla. Maecenas sed varius elit. Proin sem sem, gravida a diam scelerisque, pharetra finibus urna. Morbi dictum scelerisque rhoncus. Quisque vestibulum vel turpis at tempus. Suspendisse luctus nisl odio, pharetra efficitur dolor egestas dictum. Sed aliquam sit amet dui ac porta. Pellentesque quam augue, vestibulum eget congue in, interdum tempor urna. Aliquam in vulputate nisi. Nullam sagittis risus vitae enim molestie, ut pulvinar diam dignissim..
Желтый цвет у нас в нижнем левом углу , который переходит в красный в правом верхнем углу(to top right). Вы, конечно, можете сделать подобные примеры для всех остальных семи направлений.
Можно задать несколько оттенков фону, используя следующий код
<style>
.element 1 {
color: #000;
max-width:600px;
font-family: Georgia;
text-align:justify;
background: linear-gradient(to left, #0FF 0%, #DF15AA 33%, #FF0 66%, #AACFEF 100%);
font-size: 18px;
}
</style>
<div class='element 1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida magna malesuada urna iaculis fringilla. Maecenas sed varius elit. Proin sem sem, gravida a diam scelerisque, pharetra finibus urna. Morbi dictum scelerisque rhoncus. Quisque vestibulum vel turpis at tempus. Suspendisse luctus nisl odio, pharetra efficitur dolor egestas dictum. Sed aliquam sit amet dui ac porta. Pellentesque quam augue, vestibulum eget congue in, interdum tempor urna. Aliquam in vulputate nisi. Nullam sagittis risus vitae enim molestie, ut pulvinar diam dignissim.</div>
В результате имеем
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida magna malesuada urna iaculis fringilla. Maecenas sed varius elit. Proin sem sem, gravida a diam scelerisque, pharetra finibus urna. Morbi dictum scelerisque rhoncus. Quisque vestibulum vel turpis at tempus. Suspendisse luctus nisl odio, pharetra efficitur dolor egestas dictum. Sed aliquam sit amet dui ac porta. Pellentesque quam augue, vestibulum eget congue in, interdum tempor urna. Aliquam in vulputate nisi. Nullam sagittis risus vitae enim molestie, ut pulvinar diam dignissim.
В тегах <style> вы можете делать свои настройки ширины и высоты блока. Изменить стили шрифта. Пишите свой текст в соответствии с классом элемента - .element, element 1.
В этих примерах мы использовали свойство
linear-gradient .
Теперь попробуем заменить
linear-gradient на radial-gradient, чтобы задать направление цвета от центра вр всех направлениях.
Понадобится такой код
<style>
.element2 {
color: #000;
max-width:500px;
font-family: Georgia;
background: radial-gradient(#FFF 0%, Beige 30%, Pink 50%, #0FF 70%, Orange 100%);
font-size: 20px;
text-align:justify;
}
</style>
<div class='element2'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.</div>
Результат
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.
Можно создавать радиальные градиенты и выбрать форму градиента. По умолчанию - это эллипс, как вы видели выше. Однако мы можем создать круговой градиент с тегом circle. Вы можете также добавить
прозрачности элементу в формате RGBA.
Попробуем с прозрачностью и используем такой код
<style>
.element3{
color: #000;
max-width:500px;
font-family: Georgia;
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
font-size: 20px;
text-align:justify;
}
</style>
<div class='elemento3'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.</div>
Использует только красный цвет , который начинается с левой стороны и полностью прозрачным (0) и прибывает в правом углу полностью непрозрачным (1).
Получаем
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.
Сделаем градиент используя круг, о котором писала выше
Код
<style>
.element4 {
color: #000;
max-width:500px;
font-family: Georgia;
background: radial-gradient(circle, Pink, yellow, green, Gray);
font-size: 20px;
text-align:justify;
}
</style>
<div class='element4'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.</div>
итог
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.
Вы также можете создать фоны в 4 полосы горизонтальные или вертикальные. Например этот с такими кодами
<style>
.quattro-strisce-verticali {
height: 15em;
width: 20em;
font-size:1.2em;
text-align:justify;
background: linear-gradient(
to right,#E0E0E0 25%, #BCAAA4 25%, #FFAB91 50%, #FF9E80 50%, #FF9E80 75%, #009246 25%, #F1F2F1 25%, #F1F2F1 50%, #CE2B37 50%, #CE2B37 75%, wheat 75% );
}
</style>
<div class="quattro-strisce-verticali">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.
</div>
Получаем
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.
Или так
<style>
.quattro-strisce-orizzontali {
height: 20em;
width: 30em;
font-size:1.2em;
text-align:justify;
background: linear-gradient(#A5D6A7 25%, #DCE775 25%, #A7FFEB 50%, #CE2B37 50%, #80D8FF 75%, wheat 75%);
}
</style>
<div class="quattro-strisce-orizzontali">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.
</div>
Результат
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.
Значения высоты и ширины прямоугольника, указаны в единице измерения
em, подбирайте свои. Цвета, начиная слева направо вводится два раза в процентах. Попробуйте свои варианты цвета. Можно воспользоваться
этим редактором.
Каждый из кодов устанавливается в редакторе сообщений в режиме HTML.
Я надеюсь, что эти фокусы для создания фонов с градиентами , может быть кому-то полезным.
оформите подписку на новые шпаргалки
