Страницы

Поиск по вопросам

суббота, 14 декабря 2019 г.

Эффект свечения с тенью

#html #css #css3 #html5


У меня проблема со стилизацией объекта. Мне нужно создать эффект свечения с тенью
в нижней части окна. У меня не получается  создать такой эффект.  

Вот так должен выглядеть эффект свечения, который мне нужно создать: 

  

Я пытался создать этот эффект, но выглядит очень плохо  



html,
body {
  width: 100%;
  height: 100%;
  margin:0;
}

.container {
  background-color: black;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
}

.glow {
  width: 60%;
  height: 0px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 20px 0px yellow, 0 0 20px 10px #ffc600, 0px 0px 20px 0px yellow;
}


Ответы

Ответ 1



Можно апроксимировать это, используя фоновую окраску и некоторый фильтр: .glow { height:40px; margin:50px; background: radial-gradient(190px 20px,white, gold 15%,transparent 30%), linear-gradient(to right,transparent, gold,transparent) center/100% 5px no-repeat; border-radius:100%; position:relative; filter:blur(1px); } .glow:before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:inherit; filter:blur(7px); } body { background:#000; }
Источник

Ответ 2



Пример использования в оживлении длинного текста Добавлен текст из генератора текстов Lorem ipsum dolor sit amet и в разметке использовано три варианта свечения, параметры меняются здесь .glow { height:40px; margin:50px; background: radial-gradient(190px 20px,white, #FFFC00 15%,transparent 30%), linear-gradient(to right,transparent,#FFFC00,transparent) center/100% 5px no-repeat; border-radius:100%; position:relative; filter:blur(1px); } Полный код: .glow { height:40px; margin:50px; background: radial-gradient(190px 20px,white, #FFFC00 15%,transparent 30%), linear-gradient(to right,transparent,#FFFC00,transparent) center/100% 5px no-repeat; border-radius:100%; position:relative; filter:blur(1px); } .glow:before, .glow2:before, .glow3:before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:inherit; filter:blur(7px); } .glow2 { height:40px; margin:50px; background: radial-gradient(190px 20px,white, #FF00AE 15%,transparent 30%), linear-gradient(to right,transparent, #FF00AE,transparent) center/100% 5px no-repeat; border-radius:100%; position:relative; filter:blur(1px); } .glow3 { height:40px; margin:50px; background: radial-gradient(190px 20px,white, #7DEDFF 15%,transparent 30%), linear-gradient(to right,transparent, #7DEDFF,transparent) center/100% 5px no-repeat; border-radius:100%; position:relative; filter:blur(1px); } body { background:#000; } span { color:white; font-size:1.25em; padding:1.3em; } .txt1 { color:#FFE976; font-size:2.7em; text-align: center; } .txt2 { color:#FF7ED6; font-size:2.7em; text-align: center; } .txt3 { color:#88EDFD; font-size:2.7em; text-align: center; }

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non urna malesuada molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vehicula est non nunc ultricies, sit amet pharetra nulla congue. Vestibulum hendrerit ante ac rhoncus aliquet. Quisque vitae est turpis. Nulla sit amet felis nec nisl blandit mollis.

Nullam ornare turpis quis orci hendrerit, vitae varius est tincidunt. In quis malesuada tellus. Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis ante. Maecenas tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie placerat odio, at malesuada risus consequat id. Integer congue facilisis enim porta pretium. Morbi scelerisque tincidunt purus, vitae rhoncus tortor tristique nec. Nullam laoreet turpis nec felis vehicula finibus.

Fusce ultricies maximus ante vitae imperdiet. Proin magna orci, pretium nec pretium id, ultricies in risus. Praesent mauris ipsum, semper nec convallis sit amet, vestibulum non enim. Quisque volutpat nulla ac nulla venenatis, ac cursus nulla laoreet. Aliquam malesuada dui a orci tristique tristique. Phasellus fringilla, velit eget ultrices efficitur, justo lacus elementum lorem, nec convallis augue lacus non dui. Aliquam erat volutpat. Mauris sagittis, sapien in tristique mollis, ex libero laoreet magna, ut pellentesque dolor augue accumsan elit. Nunc ut augue at eros sollicitudin malesuada. Pellentesque urna felis, posuere sit amet odio et, vestibulum aliquet ex. Nulla eu dolor blandit, bibendum nibh in, tincidunt ex. Ut nisl justo, tincidunt a augue et, gravida sollicitudin neque. Donec id dignissim elit, a sollicitudin leo. Aliquam placerat orci justo, et faucibus nibh volutpat vel.

Nulla varius, est eu dictum vulputate, risus tellus euismod augue, ac tempus velit elit nec dui. Duis eleifend metus eu nisi mattis scelerisque. Proin finibus neque ut pellentesque porta. Etiam quis ligula non ligula sollicitudin efficitur at a turpis. Morbi tristique maximus quam eu imperdiet. Morbi dolor augue, sagittis non urna quis, fringilla scelerisque erat. Praesent et tempor tortor. In hac habitasse platea dictumst. Sed ut consectetur arcu, id vestibulum sapien. Integer in metus et lacus sollicitudin sollicitudin. Curabitur vulputate mollis odio, sit amet dictum mauris condimentum non. Vestibulum enim risus, luctus a tristique sit amet, semper non enim. Nunc laoreet hendrerit massa at blandit.

Phasellus tincidunt dignissim

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non urna malesuada molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vehicula est non nunc ultricies, sit amet pharetra nulla congue. Vestibulum hendrerit ante ac rhoncus aliquet. Quisque vitae est turpis. Nulla sit amet felis nec nisl blandit mollis.

Nullam ornare turpis quis orci hendrerit, vitae varius est tincidunt. In quis malesuada tellus. Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis ante. Maecenas tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie placerat odio, at malesuada risus consequat id. Integer congue facilisis enim porta pretium. Morbi scelerisque tincidunt purus, vitae rhoncus tortor tristique nec. Nullam laoreet turpis nec felis vehicula finibus.

Fusce ultricies maximus ante vitae imperdiet. Proin magna orci, pretium nec pretium id, ultricies in risus. Praesent mauris ipsum, semper nec convallis sit amet, vestibulum non enim. Quisque volutpat nulla ac nulla venenatis, ac cursus nulla laoreet. Aliquam malesuada dui a orci tristique tristique. Phasellus fringilla, velit eget ultrices efficitur, justo lacus elementum lorem, nec convallis augue lacus non dui. Aliquam erat volutpat. Mauris sagittis, sapien in tristique mollis, ex libero laoreet magna, ut pellentesque dolor augue accumsan elit. Nunc ut augue at eros sollicitudin malesuada. Pellentesque urna felis, posuere sit amet odio et, vestibulum aliquet ex. Nulla eu dolor blandit, bibendum nibh in, tincidunt ex. Ut nisl justo, tincidunt a augue et, gravida sollicitudin neque. Donec id dignissim elit, a sollicitudin leo. Aliquam placerat orci justo, et faucibus nibh volutpat vel.

Nulla varius, est eu dictum vulputate, risus tellus euismod augue, ac tempus velit elit nec dui. Duis eleifend metus eu nisi mattis scelerisque. Proin finibus neque ut pellentesque porta. Etiam quis ligula non ligula sollicitudin efficitur at a turpis. Morbi tristique maximus quam eu imperdiet. Morbi dolor augue, sagittis non urna quis, fringilla scelerisque erat. Praesent et tempor tortor. In hac habitasse platea dictumst. Sed ut consectetur arcu, id vestibulum sapien. Integer in metus et lacus sollicitudin sollicitudin. Curabitur vulputate mollis odio, sit amet dictum mauris condimentum non. Vestibulum enim risus, luctus a tristique sit amet, semper non enim. Nunc laoreet hendrerit massa at blandit.

Fusce ultricies maximus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non urna malesuada molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vehicula est non nunc ultricies, sit amet pharetra nulla congue. Vestibulum hendrerit ante ac rhoncus aliquet. Quisque vitae est turpis. Nulla sit amet felis nec nisl blandit mollis.

Nullam ornare turpis quis orci hendrerit, vitae varius est tincidunt. In quis malesuada tellus. Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis ante. Maecenas tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie placerat odio, at malesuada risus consequat id. Integer congue facilisis enim porta pretium. Morbi scelerisque tincidunt purus, vitae rhoncus tortor tristique nec. Nullam laoreet turpis nec felis vehicula finibus.

Fusce ultricies maximus ante vitae imperdiet. Proin magna orci, pretium nec pretium id, ultricies in risus. Praesent mauris ipsum, semper nec convallis sit amet, vestibulum non enim. Quisque volutpat nulla ac nulla venenatis, ac cursus nulla laoreet. Aliquam malesuada dui a orci tristique tristique. Phasellus fringilla, velit eget ultrices efficitur, justo lacus elementum lorem, nec convallis augue lacus non dui. Aliquam erat volutpat. Mauris sagittis, sapien in tristique mollis, ex libero laoreet magna, ut pellentesque dolor augue accumsan elit. Nunc ut augue at eros sollicitudin malesuada. Pellentesque urna felis, posuere sit amet odio et, vestibulum aliquet ex. Nulla eu dolor blandit, bibendum nibh in, tincidunt ex. Ut nisl justo, tincidunt a augue et, gravida sollicitudin neque. Donec id dignissim elit, a sollicitudin leo. Aliquam placerat orci justo, et faucibus nibh volutpat vel.

Nulla varius, est eu dictum vulputate, risus tellus euismod augue, ac tempus velit elit nec dui. Duis eleifend metus eu nisi mattis scelerisque. Proin finibus neque ut pellentesque porta. Etiam quis ligula non ligula sollicitudin efficitur at a turpis. Morbi tristique maximus quam eu imperdiet. Morbi dolor augue, sagittis non urna quis, fringilla scelerisque erat. Praesent et tempor tortor. In hac habitasse platea dictumst. Sed ut consectetur arcu, id vestibulum sapien. Integer in metus et lacus sollicitudin sollicitudin. Curabitur vulputate mollis odio, sit amet dictum mauris condimentum non. Vestibulum enim risus, luctus a tristique sit amet, semper non enim. Nunc laoreet hendrerit massa at blandit.


Комментариев нет:

Отправить комментарий