Archief - CSS: automatisch gradient genereren

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Z

Zeppelin

Legacy Member
Hoi

Is het mogelijk om in CSS een gradient te maken? Het is niet de bedoeling om die gradient in n background te zetten ma om te gebruiken in een cel. Deze moet zich dan automatisch aanpassen enzo...

Heb het natuurlijk al geprobeerd om een image te gebruiken maar die gradient zie je dan pas na een bepaald aantal pixels en das dan weer nie de bedoeling!

Dit heb k nu

En zo wil k t hebbe

Iemand enig idee, tips, hints? Allemaal zeer welkom!

Alvast bedankt
D

DarkBone

Legacy Member
Naar mijn weten kan je geen gradients genereren met CSS (ik weet echter niet 100% zeker hoe het zit met CSS3, maar aangezien CSS2 nog niet volledig ondersteund wordt moet je daar niet op hopen).

Een gradient die zich aanpast aan de grootte van je box kan je dus vergeten lijkt me.
Wat je wel kunt doen is bijvoorbeeld een gradient van 100px hoog maken, en deze als achtergrond gebruiken onderaan iedere box. Erboven laat je dan de gewone border herhalen. Je zult met andere woorden images moeten gebruiken.

Als je niet helemaal snapt wat ik bedoel laat het dan weten :)

*edit*
Visueel voorgesteld:
http://lode.webcoder.be/visualisatie.jpg

Je zou er ook voor kunnen opteren om 1 grote lange gradient te maken, maar zoals je zelf zegt zie je die dan niet altijd volledig (ook al aligneer je die verticaal bovenaan of onderaan). Da's trouwens bij mijn voorbeeld ook mogelijk, maar iets minder waarschijnlijk, ge hebt dan wel geen algehele gradient natuurlijk.
o

orez

Legacy Member
met SVG is dit realiseerbaar :), maar das dan wel weer iets heel anders... en moeilijk te importeren in je html bestand
Z

Zeppelin

Legacy Member
Is da da Microsoft geval? Had al zoiet gevonde op google, ma natuurlijk enkel IE! CSS is zoiet geweldig (zn t pas recent echt beginne in te verdiepe) en toch maar bokkig doen die Microsoft... :sad:

Anyways... k denk dak het op die ander manier es ga probere, lijkt mij logisch eigelek.!

btw: nice to see some apple-users hier :D
`

`SeriOUs

Legacy Member
Zeppelin zei:
Is da da Microsoft geval? Had al zoiet gevonde op google, ma natuurlijk enkel IE! CSS is zoiet geweldig (zn t pas recent echt beginne in te verdiepe) en toch maar bokkig doen die Microsoft... :sad:

Anyways... k denk dak het op die ander manier es ga probere, lijkt mij logisch eigelek.!

btw: nice to see some apple-users hier :D
Klik om te vergroten...
neen, SVG is een standaard. Wat jij bedoelt zijn imo filters die je kan toepassen in je css, mozilla heeft er ook een aantal (opacity ed), mss dat daar wel gradients bij zitten.
D

DarkBone

Legacy Member
Scalable Vector Graphics
http://www.w3.org/Graphics/SVG/

Maar daarvoor hebt ge dus weldegelijk nog nen SVG-viewer nodig hé (bv. van Adobe) ... da's dus nie echt bruikbaar :)
Bepaalde (niet-officiële) versies van Mozilla ondersteunen wel al standaard (lees: native) SVG (zonder viewer dus), zoals ze ook MathML ondersteunen.
Voor meer info:
http://www.mozilla.org/projects/svg/

Dat zit al zeker niet in IE ;)

*edit*
@Serious
Inderdaad, IE heeft bijvoorbeeld een gradient filter :)
z

zero2one

Legacy Member
In ie is het te doen, maar werkt dan ook enkel en alleen maar in ie:
bron: http://msdn.microsoft.com/workshop/author/filter/reference/filters/gradient.asp

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>

<style>
	<!--
	body {
		background-color: #000000;
	}
	.gradient {
		height:120px;
		width: 200px;
		color:#FFFFF; 
		filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#FFFFFF, endColorstr=#000000);
	}
	.gradient .boxhack {
		height:115px;
		width: 190px;
		color:#FFFFF;
		margin: 5px 5px 0 5px;
		color: #FFFFFF;
		background-color: #000000;
		border: none;
	}
	.gradient .boxhack .content {
		margin: 5px;
	}
	/* Alternatieve style voor mozilla/firefox */
	html>body>.gradient {
		height: 120px;
		width: 200px;
		color: #FFFFFF;
		border: 5px solid #FFFFFF;
	}
	
	-->
</style>

</head>

<body>

<div class="gradient">
	<div class="boxhack">
		<div class="content">
		A simple gradient 
		</div>
	</div>
</div>


</body>
</html>
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan