Jak sprawić, by gradient CSS wyglądał gładko?

mam czarne tło i chcesz dodać blok wewnątrz prosty CSS gradientem od przezroczysta 0,7 białym:Jak sprawić, by gradient CSS wyglądał gładko?

linear-gradient(to right, 
    hsla(0, 0%, 100%, 0), 
    hsla(0, 0%, 100%, 0.76) 14%, 
    hsla(0, 0%, 100%, 0.76) 
)

Ale to wygląda źle:

Jedynym sposobem znalazłem jest ręczne dodanie dodatkowych przystanków kolorów.

background: linear-gradient(
    to right, 
    hsla(0, 0%, 100%, 0), 
    hsla(0, 0%, 100%, 0.05) 2%, 
    hsla(0, 0%, 100%, 0.09) 3%, 
    hsla(0, 0%, 100%, 0.2) 5%, 
    hsla(0, 0%, 100%, 0.57) 11.5%, 
    hsla(0, 0%, 100%, 0.69) 14%, 
    hsla(0, 0%, 100%, 0.75) 16.5%, 
    hsla(0, 0%, 100%, 0.76) 17.5%, 
    hsla(0, 0%, 100%, 0.77) 
);

I wygląda znacznie lepiej:

The comparsion demonstration on CodePen

Czy istnieje prostszy sposób, aby CSS gradientu gładkie kolor przystanków?

Źródło

2016-12-28 Даниил Пронин

Możesz sprawdzić ten wpis: http://stackoverflow.com/questions/13151331/smooth-css-gradients –

Przeczytałam go już przed stworzeniem własnego pytania. W tym pytaniu nie ma rozwiązań. Wybrana odpowiedź to tylko sugestia, aby nie używać zatrzymań kolorów z wyjątkiem 0 i 100%. Chcę rozwiązać ten problem, a nie obejść go. –

Obawiam się, że nie, ale można użyć podstawowych ustawień z poniższych przykładów. Http://codepen.io/taylorvowell/pen/BkxbC – Roberrrt

Pewnego dnia, mam nadzieję, że mamy to:

linear-gradient(
    to top, 
    hsla(330, 100%, 45%, 0), 
    cubic-bezier(0.45, 0, 0.5, 0.5), 
    hsla(330, 100%, 45%, 1) 
);

Bot teraz, mamy to:

PostCSS wtyczki z 2 opcji: https://github.com/larsenwork/postcss-easing-gradients
Aplikacja umożliwiająca wybór funkcji złagodzenia: https://larsenwork.com/easing-gradients/

Źródło

2018-02-05 12:04:04

Nie do końca zrozumiałam, co zamierzasz zrobić, ale na ile to możliwe, chciałbyś dodać pudełko na czarnym tle z gradientem po lewej stronie z przezroczystego (tak nieruchome) czarny) do białego z przezroczystością 0,7 lub # C2C2C2. Jeśli chciałbyś to zrobić, nie używałbym hsl (z powodu podstawowej teorii koloru), ale raczej rgba.

to sprawdzić:

<html> 
<head> 
<style> 
#blackbg { 
background-color: black; 
height: 300px; 
} 

#grad1 { 
    height: 200px; 
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255, 255, 255, 0.7)); 
} 
</style> 
</head> 
<body>

Jeśli to nie było to, co ma robić i nadal czuć zatrzymany z czymś, nie krępuj się zapytać mnie.

<div id="blackbg"> 
<div id="grad1"></div> 
</div> 

</body> 
</html>

Źródło

2016-12-28 08:56:15 codingunicorn

uups wygląda na to, że kod został podzielony ... – codingunicorn

Chcę dodać to jako tło tekstowe na moim suwaku z tłem obrazu. Może być ciemne lub lekkie, podobne do tapet z komputerów stacjonarnych. Możesz to zobaczyć na http://eco-vpk.ru lub na tym zrzucie ekranu: http://imgur.com/a/73Ozc –

ok, teraz rozumiem. Ale gdzie chcesz dodać gradient? Gdzie jest produkt? Czy pracujesz dla VKP, czy to jest to, co chcesz osiągnąć? – codingunicorn

Jak sprawić, by gradient CSS wyglądał gładko?

Odpowiedz

Powiązane problemy