bakgrundstoning

Avdelningen för webbrelaterad programmering och grafisk design.
Post Reply
ncc1701e
Posts: 14
Joined: 2006-04-15 14:34:27

bakgrundstoning

Post by ncc1701e »

...

Hur gör jag så att jag får en starkare ton av färgen "längst upp", för senare längre ner på sidan så tonas färgen ljusar ?..

//tack på förhand
User avatar
stealth
Hedersbit
Posts: 3364
Joined: 2003-03-11 13:33:10
Location: Göteborg
Contact:

Post by stealth »

Grundare av webbyrån We made you look http://wemadeyoulook.at
ncc1701e
Posts: 14
Joined: 2006-04-15 14:34:27

Post by ncc1701e »

tack för det snabba svaret..

Kan man inte scripta det i CSS lr något, så man slipper att ha en bild i bakgrunden ?
User avatar
Tjotte
Posts: 77
Joined: 2006-02-06 22:11:33
Location: Lund
Contact:

BG Toning

Post by Tjotte »

Kanske lite sent inlagd men det här kör jag: <body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#339900', startColorstr='#FFFFFF', gradientType='0');">
Den gör utopin till pragmatik!
User avatar
derfian
Posts: 472
Joined: 2004-02-13 0:18:46
Location: Dorotea / Linköping
Contact:

Post by derfian »

Jag får bara en känsla av att det inte fungerar på icke-windows-plattformar.
User avatar
Tjotte
Posts: 77
Joined: 2006-02-06 22:11:33
Location: Lund
Contact:

Gradient

Post by Tjotte »

derfian wrote:Jag får bara en känsla av att det inte fungerar på icke-windows-plattformar.
Jag har glömt att testa den i mac'en på jobbet.
Den gör utopin till pragmatik!
User avatar
StreamBag
Posts: 295
Joined: 2002-03-09 19:50:33
Location: Linköping
Contact:

Re: BG Toning

Post by StreamBag »

Tjotte wrote:Kanske lite sent inlagd men det här kör jag: <body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#339900', startColorstr='#FFFFFF', gradientType='0');">
Allt som har ordet Microsoft i namnet fungerar troligtvis bara i IE.
Edit: Blandade ihop lite saker
User avatar
Tjotte
Posts: 77
Joined: 2006-02-06 22:11:33
Location: Lund
Contact:

Ej testat

Post by Tjotte »

Är det någon frivillig som kan testa min gradient kod på en mac el. linux? Jag har inte tillgång till en mac nu.
Den gör utopin till pragmatik!
User avatar
stealth
Hedersbit
Posts: 3364
Joined: 2003-03-11 13:33:10
Location: Göteborg
Contact:

Post by stealth »

Den där koden funkar bara i IE, trust me.
Grundare av webbyrån We made you look http://wemadeyoulook.at
User avatar
Branstrom
Hedersbit
Posts: 3487
Joined: 2002-02-22 16:46:37
Location: Härnösand
Contact:

Post by Branstrom »

Japp, det behöver man bara snegla på den för att veta.
Fredrik Bränström. Blogg + portfolio, så småningom.
User avatar
Niklas Berggren
Hedersbit
Posts: 3524
Joined: 2002-03-08 17:53:04
Location: Göteborg (Skövde)
Contact:

Post by Niklas Berggren »

Och för att bekräfta fungerade inte fulkoden i Konqueror. Detta innebär att den inte heller fungerar i Safari.
"How about the government sticks to courts, police, defense and corruption and leave compassion to the people who have it?" - Penn Jillette.
User avatar
Tjotte
Posts: 77
Joined: 2006-02-06 22:11:33
Location: Lund
Contact:

Kod

Post by Tjotte »

Hittills har jag inte hittat någon kod som funkar med liknande funktioner i alla OS. Kan ni vänligen komma med en vettig lösning. Obs jag vill inte ha en tonad bakgrundsbild. ;D
Den gör utopin till pragmatik!
User avatar
derfian
Posts: 472
Joined: 2004-02-13 0:18:46
Location: Dorotea / Linköping
Contact:

Re: Kod

Post by derfian »

Tjotte wrote:Hittills har jag inte hittat någon kod som funkar med liknande funktioner i alla OS. Kan ni vänligen komma med en vettig lösning. Obs jag vill inte ha en tonad bakgrundsbild. ;D
Då får du väl klara dig utan en tonad bakgrundsbild.
User avatar
Najze
Hedersbit
Posts: 4992
Joined: 2002-03-09 13:14:24
Location: Mölndal

Post by Najze »

1. Gör en bakgrund.
2. Klipp ut de pixlar som behövs, för att bakgrunden ska kunna upprepas.
3. Lägg in i divar och välj repeat-y (eller x) beroende på hur du gjort bakgrunden.

Det där funkar åtminstonde i IE, Firefox, Opera utan problem. Fler har jag inte testat.
User avatar
Tjotte
Posts: 77
Joined: 2006-02-06 22:11:33
Location: Lund
Contact:

Re: Kod

Post by Tjotte »

derfian wrote:
Tjotte wrote:Hittills har jag inte hittat någon kod som funkar med liknande funktioner i alla OS. Kan ni vänligen komma med en vettig lösning. Obs jag vill inte ha en tonad bakgrundsbild. ;D
Då får du väl klara dig utan en tonad bakgrundsbild.
Det blir för tungladdat med bilder, eftersom jag har gradering på flera sidor. Det skall gå att lösa med endast koder. Säg inte att det inte är omöjligt, Ni som kan koda. Jag vet bara inte var jag skall söka info.
Den gör utopin till pragmatik!
User avatar
Xmel
Posts: 1874
Joined: 2003-04-11 21:36:59
Location: Stockholm

Re: Kod

Post by Xmel »

Tjotte wrote:Det blir för tungladdat med bilder, eftersom jag har gradering på flera sidor. Det skall gå att lösa med endast koder. Säg inte att det inte är omöjligt, Ni som kan koda. Jag vet bara inte var jag skall söka info.
Det blir inte tungladdat. Skapa en bild som är 1 pixel bred och cirka 1000 pixlar.

EDIT: 1000pixlar hög ska det ju stå ;)
Last edited by Xmel on 2006-05-29 19:36:35, edited 1 time in total.
#mac.se @ EFnet
User avatar
Eruku
Posts: 2650
Joined: 2002-10-16 15:43:26
Location: Stockholm
Contact:

Re: Kod

Post by Eruku »

Lars wrote:Det blir inte tungladdat. Skapa en bild som är 1 pixel bred och cirka 1000 pixlar.
Exakt, då blir en toning under 1kb stor.
Visst gör jag fel, men det är jävligt mycket mer jag gör rätt.
_______

How to ask a question
User avatar
egar
Hedersbit
Posts: 4192
Joined: 2002-02-18 0:01:59
Location: Göteborg
Contact:

Re: Kod

Post by egar »

Eruku wrote:
Lars wrote:Det blir inte tungladdat. Skapa en bild som är 1 pixel bred och cirka 1000 pixlar.
Exakt, då blir en toning under 1kb stor.
Och fungerar i alla webbläsare.
A fair judgement!
Two-way mirror in the hall
They like to watch everything you do
Transmitters hidden in the walls
So they know everything you say is true
User avatar
derfian
Posts: 472
Joined: 2004-02-13 0:18:46
Location: Dorotea / Linköping
Contact:

Post by derfian »

Som referens, att scripta det (må hända med hjälp av ett fult phphack) resulterar i en >50Kb stor fil.

http://e101.no-ip.org/~derfian/gradient.php

Code: Select all

<?php
define(GRADIENT_HEIGHT,1000);
$color = array();

/* Set from and to colors */

$color['from']['r'] = hexdec("33");
$color['from']['g'] = hexdec("33");
$color['from']['b'] = hexdec("66");

$color['to']['r'] = hexdec("55");
$color['to']['g'] = hexdec("aa");
$color['to']['b'] = hexdec("55");

/* Current color */

$cc['r'] = $color['from']['r'];
$cc['g'] = $color['from']['g'];
$cc['b'] = $color['from']['b'];

$cc['rdiff'] = ($color['from']['r']-$color['to']['r'])/GRADIENT_HEIGHT;
$cc['gdiff'] = ($color['from']['g']-$color['to']['g'])/GRADIENT_HEIGHT;
$cc['bdiff'] = ($color['from']['b']-$color['to']['b'])/GRADIENT_HEIGHT;

?>
<html>
<head>
<title>Gradients, hah</title>
<style type="text/css">
  div {position: absolute; height: 1px; width: 100%; margin: 0; padding: 0; left: 0;}
</style>
</head>
<body>
<?php
for ($n = 0; $n < GRADIENT_HEIGHT; $n++)
  {
	$colorstring = sprintf("%'02X%'02X%'02X",$cc['r'],$cc['g'],$cc['b']);
	echo '<div style="top: '.$n.'px; background-color: #'.$colorstring.'"></div>';
	$cc['r'] -= $cc['rdiff'];
	$cc['g'] -= $cc['gdiff'];
	$cc['b'] -= $cc['bdiff'];
  }
?>
</body>
</html>

Code: Select all

derfian@masamune ~ $ wget http://e101.no-ip.org/~derfian/gradient.php
--20:07:12--  http://e101.no-ip.org/~derfian/gradient.php
           => `gradient.php'
Resolving e101.no-ip.org... 192.168.1.1
Connecting to e101.no-ip.org|192.168.1.1|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: unspecified [text/html]

    [ <=>                                                                                                                         ] 56,083        --.--K/s

20:07:12 (1.10 MB/s) - `gradient.php' saved [56083]
56000 byte. Det är många gradient-bilder det.
User avatar
StreamBag
Posts: 295
Joined: 2002-03-09 19:50:33
Location: Linköping
Contact:

Post by StreamBag »

derfian wrote:Som referens, att scripta det (må hända med hjälp av ett fult phphack) resulterar i en >50Kb stor fil.

http://e101.no-ip.org/~derfian/gradient.php
...
Gå in på den länken och kolla på den resulterande html-koden. Det är nog något av den gräsligaste jag har sett i html-väg. :)
User avatar
Tjotte
Posts: 77
Joined: 2006-02-06 22:11:33
Location: Lund
Contact:

Post by Tjotte »

StreamBag wrote:
derfian wrote:Som referens, att scripta det (må hända med hjälp av ett fult phphack) resulterar i en >50Kb stor fil.

http://e101.no-ip.org/~derfian/gradient.php
...
Gå in på den länken och kolla på den resulterande html-koden. Det är nog något av den gräsligaste jag har sett i html-väg. :)
Tack för alla försök! Och tack åt alla som försökt! Den senaste var inget snyggt hack. Dessutom ger den tydliga synliga horisontella övergångar både i IE och FF. Jag tror jag kör med microsoft koden eftersom inte hitta nåt bättre. Det är få så många procent som inte kan se den.
Den gör utopin till pragmatik!
User avatar
derfian
Posts: 472
Joined: 2004-02-13 0:18:46
Location: Dorotea / Linköping
Contact:

Post by derfian »

Tjotte wrote:Tack för alla försök! Och tack åt alla som försökt! Den senaste var inget snyggt hack. Dessutom ger den tydliga synliga horisontella övergångar både i IE och FF. Jag tror jag kör med microsoft koden eftersom inte hitta nåt bättre. Det är få så många procent som inte kan se den.
(min markering) :o

Mitt script inte menat för att användas. Poängen var att visa på hur man inte skall göra en gradient. Trots det är scriptet en bättre lösning, på grund av att det i alla fall fungerar på fler plattformar. Jag ser dessutom inga horisontella övergångar som du pratar om.

Mitt råd: Skapa väldigt smal/bred bild och läs på om repeat-x/repeat-y. Varför nöja sig med 80-85% när man kan stödja 100%?
Post Reply