Forum Pasja Informatyki - Najnowsze z tagiem gradient

Płynne przejście gradientu

Thu, 22 Dec 2022 21:43:00 +0000

Z jakiegoś powodu, kiedy dodam do CSS'a

transition: all 0.2s ease-in-out;

kiedy tło diva ustawione jest na

background: linear-gradient(#0087ff, #003dff);

to kiedy następuje jego zmiana, na np

background: linear-gradient(#22a9ff, #225fff);

dzieje się ona natychmiastowo, w przeciwieństwie do sytuacji, kiedy tło ma wartość choćby

background: #225fff;

Jest możliwość, aby i przy gradiencie zmiana koloru tła była płynna?

Gradient background

Thu, 31 Dec 2020 20:20:38 +0000

co musze wpisac jeszcze zeby sie nie powtarzalo bo co jakis czas tylko zeby sie ciaglo na sam dole

body{
    background-image: linear-gradient(#c0c0c0,#ffb000);
    width: 100%;
}

Linear gradient problem

Sat, 21 Nov 2020 09:51:28 +0000

Chce zrobić gradient ukośny dla tła strony w css.

background: linear-gradient(45deg, red, blue);

Ten przykładowy kod u mnie wygląda po prostu jak by szedł poziomo. Czy ktoś wie dlaczego i jak to naprawić?

diamond background css

Wed, 18 Mar 2020 00:53:36 +0000

Hej.

Mam taki kod wygenerowany na stronie magicgradient

background-image:linear-gradient(135deg, rgba(225, 225, 225, 0.46) 0%, rgba(225, 225, 225, 0.46) 14.286%,rgba(192, 192, 192, 0.46) 14.286%, rgba(192, 192, 192, 0.46) 28.572%,rgba(159, 159, 159, 0.46) 28.572%, rgba(159, 159, 159, 0.46) 42.858%,rgba(127, 127, 127, 0.46) 42.858%, rgba(127, 127, 127, 0.46) 57.144%,rgba(94, 94, 94, 0.46) 57.144%, rgba(94, 94, 94, 0.46) 71.43%,rgba(61, 61, 61, 0.46) 71.43%, rgba(61, 61, 61, 0.46) 85.716%,rgba(28, 28, 28, 0.46) 85.716%, rgba(28, 28, 28, 0.46) 100.002%),linear-gradient(45deg, rgb(13, 13, 13) 0%, rgb(13, 13, 13) 14.286%,rgb(50, 50, 50) 14.286%, rgb(50, 50, 50) 28.572%,rgb(86, 86, 86) 28.572%, rgb(86, 86, 86) 42.858%,rgb(123, 123, 123) 42.858%, rgb(123, 123, 123) 57.144%,rgb(160, 160, 160) 57.144%, rgb(160, 160, 160) 71.43%,rgb(196, 196, 196) 71.43%, rgb(196, 196, 196) 85.716%,rgb(233, 233, 233) 85.716%, rgb(233, 233, 233) 100.002%);

Fajnie wygląda to tło, gdy div ma np. 1000px na 1000px. Ale mam podstronę z bardzo długim backgroundem i wtedy tło się bardzo rozjeżdża przez to, że są tu te procenty.

I teraz, pozmienianie procentów na piksele jeszcze bardziej popsuło tło, zniknęły diamenciki.

Jak można to zmienić, aby te diamenty zawsze miały stałą wielkość?

CSS gradient + text.shadow

Wed, 10 Jan 2018 00:03:39 +0000

Witam.

Chciałbym się zapytać czy jest możliwość uzyskania cienia tekstu, na który nałożony jest gradient. Szukałem pomocy w google, ale żaden ze sposobów tam prezentowanych, nie daje pożądanego efektu. Za każdym razem, gdy dodaję cień, w przypadku zamieszczonego kodu, literka "b" staje się zamazana, a chciałbym, aby cień wyglądał tak samo jak na pozostałych znakach (jedynie kontury mają być ścieniowane). Z góry dziękuję za odpowiedź.

<h1 class="logo">
	<span style="color: #a446d2">Aaa(</span>
	<span style="
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-image: linear-gradient(to right,
		#a446d2 15%,#4682B4 85%);">b</span>
	<span style="color: #4682B4 ">)Ccc</span></h1>
		
<style>

	h1.logo
	{		
		text-shadow: 
		1px 1px 0 #000,
		-1px 1px 0 #000,
		-1px -1px 0 #000,
		1px -1px 0 #000;
	}	
</style>

Progressbar - stylizacja nie działa na mozilli

Sun, 07 Jan 2018 14:14:34 +0000

#leftheader
{
	padding: 30px;
	float: left;
	border: 1px solid black;
	background-color: #2A2A2A;
	color: white;
	border-radius: 10px;
}
#leftheader > .leftprofile > progress
{
	height: 8px;
	background: #444;
	border-radius: 10px;
}
#leftheader > .leftprofile > progress::-webkit-progress-bar {
    background: transparent;
}  
#leftheader > .leftprofile >  progress::-webkit-progress-value
{
	background: linear-gradient(to right, red, black);
	border-radius: 10px;
}

			<div class="leftprofile">
				<img src="img/stats/health.png" alt=""> Health<br>
				<progress value="100" max="100"></progress><br>
				<img src="img/stats/energy.png" alt=""> Energy<br>
				<progress value="90" max="100"></progress><br>
				<img src="img/stats/drink.png" alt=""> Drink<br>
				<progress value="70" max="100"></progress><br>
				<img src="img/stats/food.png" alt=""> Food<br>
				<progress value="60" max="100"></progress><br>
				<img src="img/stats/hygiene.png" alt=""> Hygiene<br>
				<progress value="100" max="100"></progress><br>
				<img src="img/stats/exp.png" alt=""> Level 0<br>
				<progress value="10" max="100"></progress><br>

			</div>

Na Google Chrome działa, na Mozilli nie. Chodzi o kolory progrss baru, a konkretnie ten gradient.

CSS Nałożenie gradientu na zdjęcie

Sun, 19 Nov 2017 13:20:29 +0000

Witam

Wie ktoś może jak nałożyć gradient (chyba) na zdjęcie aby uzyskać efekt taki jak na tej stronie?

https://www.polygon.com/

Hover i tekst z gradientem

Fri, 11 Nov 2016 14:17:02 +0000

Witam, mam problem z elementami li > a w menu, ponieważ każdy z tych elementów ma nałożony gradient na tekst to po usunięciu -webkit-text-fill-color: transparent;, aby dodać hover nie mogę zmienić koloru linku, jest on cały czas fioletowy, czyli domyślny dla linka.

Dodam, że samo color: #fff; działa, lecz ja chce dodać gradient.

Gdy usunę -webkit-text-fill-color: transparent; działa hover, ale nie działa gradient samego tekstu, a gdy zostawię ten zapis to nie działa hover, ale sam gradient działa.

HTML:

		<nav>
			<ul>
				<li><a href="#" class="menu-item-1 font-color-1">Home</a></li>
				<li><a href="#" class="menu-item-2 font-color-1">Forum</a></li>
				<li><a href="#" class="menu-item-2 font-color-1">Register</a></li>
				<li><a href="#" class="menu-item-2 font-color-1">Support</a></li>

				<li><a href="#" class="menu-item-3 font-color-2"><span class="font-color-3">Download</span><br>Client 1,2 GB</a></li>

				<li><a href="#" class="menu-item-4 font-color-1">ItemShop</a></li>
				<li><a href="#" class="menu-item-4 font-color-1">Rankings</a></li>
				<li><a href="#" class="menu-item-4 font-color-1">Contact</a></li>
				<li><a href="#" class="menu-item-5 font-color-1">Events</a></li>
			</ul>	
		</nav>

CSS:

nav{
	background: url(img/menu.png);
	width: 1063px;
	height: 84px;
	margin: auto;
}

ul{
	margin: 0;
	padding: 0;
	display: block;
	width: 900px;
	height: 48px;
	margin: auto;
	list-style-type: none;
}

.font-color-1{
	background-image: -webkit-gradient(linear,
		left top, left bottom,
		from(#c2b59b),
		to(#817762));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 44px;
	text-decoration: none;
}

.font-color-1:hover{
	background-image: -webkit-gradient(linear
		left top, left bottom,
		from(#cfbf9e),
		to(#c2b59b));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.font-color-2{
	color: #a9af79;
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 10px;
	line-height: 16px;
	padding-top: 3px;
}

.font-color-3{
	color: #111304;
	font-size: 12px;
}

.menu-item-1
{
	display: block;
	width: 76px;
	height: 46px;
	text-align: center;
	float: left;
}

.menu-item-2
{
	display: block;
	width: 94px;
	height: 46px;
	text-align: center;
	float: left;
}

.menu-item-3
{
	display: block;
	width: 186px;
	height: 46px;
	text-align: center;
	float: left;
}

.menu-item-4{
	display: block;
	width: 94px;
	height: 46px;
	text-align: center;
	float: left;
}

.menu-item-5{
	display: block;
	width: 70px;
	height: 46px;
	text-align: center;
	float: left;
}

gradient zgodny z ruchem wskazówek zegara

Thu, 10 Nov 2016 13:27:21 +0000

Hej

czytam o gradientach i chciałbym zrobić w CSS aby w kole był gradient zgodny z ruchem wskazówek zegara (coś jak na załączonej grafice)

znalazłem coś takiego jak conic-gradient ale nie mam pojęcia czemu nie działa żadnej przeglądarce

dzięki za pomoc

pozdrawiam

Multiple Background Images/Gradients

Mon, 12 Sep 2016 14:54:09 +0000

Mam background stworzony z obrazu i linear gradient, jednakże działa I linia gradientu (dla firefoxa), w chromie widać tylko obrazek, bez gradientu pod nim.

background:
url("img.png") center center no-repeat,

-moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.52) 97%, rgba(0,0,0,0.5) 100%);/* FF3.6-15 */
-webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.52) 97%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
-linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.52) 97%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

 background-size: 60px 60px, cover;

Kombinowałem także w ten sposób (oddzielenie przez przecinki), lecz nie odpaliło:

background:
url("img.png") center center no-repeat,

-moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.52) 97%, rgba(0,0,0,0.5) 100%), -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.52) 97%,rgba(0,0,0,0.5) 100%), -linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.52) 97%,rgba(0,0,0,0.5) 100%);

 background-size: 60px 60px, cover;

Gradient nie działa - CSS

Sun, 24 Jan 2016 09:17:28 +0000

WItam, mam taki kod:

body
{
	background: linear-gradient(to right bottom, black 0%, #00047D 100%);
	margin: 0 !important;
	padding: 0 !important;
}

a wyświetla mi się to:

przeźroczysty gradient w CSS'ie

Thu, 02 Jul 2015 17:14:46 +0000

Chciałbym żeby gradient był przeźroczysty.

#body (tak wiem to jest ID, a nie body jako tag HTML'a)
{
    padding: 15px;
    width: 970px;
    height: 150px;
    margin-top: 26px;
    border: 1px solid #444444;
    border-radius: 0 0 15px 15px;
    background: linear-gradient(to top, #454545 10px, #333333); <- PRZEŹROCZYSTY GRADIENT
}

Canvas createRadialGradient

Thu, 16 Apr 2015 07:08:28 +0000

Siema,

Bawie się trochę canvasem i mam pewien problem. Otóż prawa strona mojego gradientu wygląda elegancko ale za to lewa się kisi (tylko jeden kolor), Tutaj jest kod gradientu:

var createGrad = function(x, y) {
  // x = pozycja x myszki
  // y = pozycja y myszki
  // windowW = szerokość okna
  // windowH = wysokość okna
  var grad = cx.createRadialGradient(x, y, 0, 0, y + windowH, x + windowW);
  grad.addColorStop(0, '#E40303');
  grad.addColorStop(.1667, '#FF8C00');
  grad.addColorStop(.3334, '#FFED00');
  grad.addColorStop(.5, '#008026');
  grad.addColorStop(.6667, '#004DFF');
  grad.addColorStop(.8334, '#750787');
  return grad;
};

Nie wiem czy zrozumiale napisałem. Chodzi o to żeby gradient wyglądał tak samo fajnie jak się przesunie myszkę całkiem na prawo (jak myszka jest całkiem z lewej to wygląda dobrze).

Może banalne pytanie ale nie ogarniam do końca tych gradientów jeszcze. moje podejrzenie jest takie, że 3-ci i 4-ty parametr funkcji createRadialGradient musi się zmieniać dynamicznie ale nie wiem w jaki sposób.

Demo:
http://codepen.io/nefil1m/pen/PwMwLX

Z góry dziękuję za poświęcony czas