😎 » CSS3 » css3 примеры и описание их создания » Готовые градиенты на css для оформления сайта
939 0  

Готовые градиенты на 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

Трамп

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023