Czy możesz dodać szum do swojego gradientu CSS3?
Czy mogę dodać szum do gradientu w CSS?
Oto mój kod dla gradientu radialnego:
body {
color: #575757;
font: 14px/21px Arial, Helvetica, sans-serif;
background-color: #2f3b4b;
background: -moz-radial-gradient(center 45deg, circle closest-corner, #2f3b4b 0%, #3e4f63 100%);
background: -webkit-gradient(radial, center center, 10, center center, 900, from(#2f3b4b), to(#3e4f63));
}Co bym do tego dodał, żeby na górze był szum, aby nadać mu teksturę?
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
8 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Znalazłem go kilka miesięcy temu i używam go od tamtej pory, po prostu skopiuj i wklej ten kod do swojego CSS.
Następnie dodaj kolor tła
Próbny:
JSFiddle
http://jsfiddle.net/NuRwW/1/
Źródło:
https://coderwall.com/p/m-uwvg
https://coderwall.com/p/m-uwvg
Anonimowy użytkownik
Potwierdzenie od:
Alternatywnym rozwiązaniem byłoby utworzenie przezroczystego szumu png w edytorze graficznym. Następnie zastosuj tę grafikę jako tło w tagu. Następnie należy umieścić ten elementna całym obszarze, co powinno nadać wygląd hałaśliwego gradientu.
Anonimowy użytkownik
Potwierdzenie od:
Tworzenie tekstur (szumów) za pomocą filtrów SVG & amp; Gradienty CSS
>
Potrzebujesz hałasu w swoim gradiencie? Szczęściarz!
Hałas Perlina
https://en.wikipedia.org/wiki/Perlin_noise
to rodzaj szumu gradientu. Standard SVG definiuje prymityw filtru o nazwie https://developer.mozilla.org/ ... lence
który implementuje funkcję Perlin. Pozwala na syntezę sztucznych tekstur, takich jak chmury lub marmur - tak, jak chcesz.
Krok 1: Zdefiniuj grafikę SVG
>
Utwórz mały plik SVG o nazwie.
Ta figura definiuje dwa prostokąty. Pierwsza jest wypełniona jednolitym kolorem. Drugi jest półprzezroczysty z zastosowanym filtrem szumów. Drugi prostokąt jest nakładany na pierwszy, aby zapewnić efekt szumu.
Opcje SVG
>
W tym momencie możesz dostosować wyżej wymienione parametry, ustawić ten wykres szumów jako obraz tła za pośrednictwem CSS i nazwać to dniem. Ale jeśli chcesz mieć gradient taki jak OP, przejdź do kroku 2.
Krok 2: zastosuj gradient CSS
>
Używając właściwości, możesz ustawić grafikę szumową SVG jako tło dowolnego elementu i nakładki
gradient
https://developer.mozilla.org/ ... ts... W tym przykładzie zastosuję grafikę szumów do całego ciała i nakładki
gradient liniowy
https://developer.mozilla.org/ ... dient
.
body {/* white to black linear noise gradient spanning from top to bottom */
background:
linear-gradient(rgba(255,255,255,.5), rgba(0,0,0,.5)),
url('noise.svg');
}
Funkcja linear-gradient () tworzy pseudoobraz, który jest nakładany na wierzch
noise.svg
... Rezultatem jest półprzezroczysty gradient, przez który prześwituje nasz szum.
Opcje CSS
>
Wynik
>
Jest to wysoce konfigurowalne i bardzo lekkie (~ 400 bajtów) rozwiązanie, które pozwala łatwo wykryć szum o dowolnym kolorze lub gradiencie. Chociaż jest tu kilka pokręteł do przekręcenia, to dopiero początek. Istnieją inne prymitywy filtrów SVG, takie jak https://developer.mozilla.org/ ... nBlur
i https://developer.mozilla.org/ ... atrix
które mogą dać dodatkowe rezultaty.
Anonimowy użytkownik
Potwierdzenie od:
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
#box {width:250px;
height:250px;
position:relative;
background-size:55px 10px;
background-repeat: repeat;
background-image: -webkit-repeating-radial-gradient(1% 21%, closest-corner, rgba(255,0,255,.5), rgba(0,255,255,.5), rgba(0,0,0,1) 1.7%), -webkit-repeating-radial-gradient(51% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,255,0,1) 10%);
}
#box::before {
content:'';
width:100%;
height:100%;
position:absolute;
mix-blend-mode:exclusion;
background-size:12px 22px;
background-repeat: repeat;
background-image: -webkit-repeating-radial-gradient(61% 21%, closest-corner, rgba(255,255,255,1), rgba(0,255,0,.5), rgba(3,0,255,1) 20%), -webkit-repeating-radial-gradient(91% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,1,.5), rgba(055,255,255,1) 20%);
left:0;
z-index:998;
}
#box::after {
content:'';
width:100%;
height:100%;
position:absolute;
mix-blend-mode:exclusion;
background-size:15px 13px;
background-repeat: repeat;
background-image: -webkit-repeating-radial-gradient(21% 21%, closest-corner, rgba(255,255,255,1), rgba(0,0,255,.5), rgba(3,0,255,1) 20%);
left:0;
top:0;
z-index:999;
}
<pre class="snippet-code-html lang-html prettyprint-override">
Anonimowy użytkownik
Potwierdzenie od:
Hałas na płótnie
http://net.tutsplus.com/tutori ... nvas/
HTML5
Jednak korzystanie z podejścia Canvas spowoduje znacznie wolniejsze działanie dla odwiedzających, ponieważ a) JavaScript jest językiem interpretowanym, A B) pisanie grafiki przy użyciu JS jest bardzo wolne.
Więc jeśli nie próbujesz mówić o czymś za pomocą HTML5, będę trzymać się obrazu. Będzie to szybsze (dla Ciebie i dla użytkowników pobieranie) i będziesz mieć lepszy stopień kontroli nad wyglądem.
Anonimowy użytkownik
Potwierdzenie od:
Oto kilka przykładów:
Przy odpowiednim połączeniu tła, kątów, przejść kolorów i przezroczystości powinien być osiągalny rozsądny efekt szumu :)
Mam nadzieję, że to i tak poprowadzi Cię we właściwym kierunku ...
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
Najpierw chcę pokazać przykład z gradientem radialnym. Powiedzmy, że chcemy utworzyć okrąg o potrzebnych współrzędnych. Pierwsze kółko to, drugie koło to. Aby lepiej zrozumieć funkcję, którą napiszemy poniżej, możemy spojrzeć na ten przykład.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
.a {border:1px solid blue;
width:500px;
height:200px;
background: radial-gradient(circle at 120px 80px, red 0px 10px, transparent 10px 100px);
}.b {
border:1px solid red;
width:500px;
height:200px;
background: radial-gradient(circle at 20px 20px, blue 0px 10px, transparent 10px 100px);
}
<pre class="snippet-code-html lang-html prettyprint-override">
Napiszemy funkcję @mixin dla tysięcy liniowych gradientów.
Funkcja SCS:
@mixin gradient($color, $width, $height, $noiseCount) {$value: ();
@for $i from 1 through $noiseCount {
$gradient: radial-gradient( circle at #{random($width)}px #{random($height)}px,
$color 0px,
$color 1px,
transparent 1px,
transparent 100%
);
$value: append($value, $gradient, comma);
}
background: $value;
}
Za pomocą:
div {width:400px;
height: 150px;
@include gradient(#ffad3e, 400, 150, 2500);
}
Wynik
https://codepen.io/dgknca/pen/mNOZqa
Jeśli chcemy stworzyć szum zgodnie z wartością%?
Możemy do tego użyć tej funkcji.
@mixin gradient($color, $width, $height, $noiseCount) {$value: ();
@for $i from 1 through $noiseCount {
$gradient: radial-gradient( circle at #{(random($width * 10))/10}% #{random($height)}px,
$color 0px,
$color 1px,
transparent 1px,
transparent 100%
);
$value: append($value, $gradient, comma);
}
background: $value;
}div {
width:100%;
height: 150px;
@include gradient(#ffad3e, 100, 150, 2500);
}
Wynik
https://codepen.io/dgknca/pen/aemELg