Готовые градиенты на css для оформления сайта
Моя колекция градиентов на css для перекрития фото и добавления сверху текста - подходит для оформления баннеров так главных постов новостных сайтов.
Само затмение состоит из 2 слоев (s + ::after) второй это черно-прозрачный цвет сверху над цветным.
CSS:
[class*='gradient-'] { position:relative; width:48%; height:300px; float:left; margin:10px 1%; overflow:hidden; }
[class*='gradient-'] s {display:block; width:100%; height:100%;position:absolute; top:0; left:0; opacity: 0.7; z-index:2;}
[class*='gradient-']::after { content: no-close-quote; position: absolute; left: 0; bottom: 0; width: 100%; height: 151px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); z-index:3;}
[class*='gradient-'] p {position: absolute; left: 0; bottom: 0; width: 100%; color:#fff; font-weight:bold; padding: 15px; z-index:5; }
[class*='gradient-'] img {max-width:100%;}
.gradient-v1 s { background: linear-gradient(to bottom, #0099f7, #f11712 );}
.gradient-v2 s {background: linear-gradient(to bottom, #159957, #004c99 );}
.gradient-v3 s {background: linear-gradient(to bottom, #ef94ac, #3b6bef );}
.gradient-v4 s {background: linear-gradient(to bottom, #e1eec3, #f05053 );}
</style>HTML:
<div class="gradient-v1">
<p>South Korea’s Moon Jae-in sworn in vowing</p>
<img src="/uploads/posts/2019-12/1575543029_tramp.jpg" alt="Трамп" />
<s></s>
</div>Для себе:
/*-- заливка градієнтом --*/
[class*='gradient-']::after { content:no-close-quote; position:absolute; left:0; bottom:0; width:100%; height:130px; z-index:3;}
.gradient-v0::after { background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);} /*-- чорний --*/
.gradient-v1::after { background:linear-gradient(to bottom, rgba(0,153,243,0) 0%, rgba(241,23,18,0.65) 100%);} /*-- синій --*/
.gradient-v2::after { background:linear-gradient(to bottom, rgba(21,153,87,0) 0%, rgba(0,76,153,0.65) 100%);} /*-- червоний --*/
.gradient-v3::after { background:linear-gradient(to bottom, rgba(19,220,175,0) 0%, rgba(95,220,19,0.65) 100%);} /*-- зелений --*/
.gradient-v4::after { background:linear-gradient(to bottom, rgba(240,204,80,0) 0%, rgba(220,137,19,0.65) 100%);} /*-- жовтий --*/South Korea’s Moon Jae-in sworn in vowing
South Korea’s Moon Jae-in sworn in vowing
South Korea’s Moon Jae-in sworn in vowing
South Korea’s Moon Jae-in sworn in vowing