Css3 linear-gradient

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
stig
Entusiast
Entusiast
Indlæg:37
Tilmeldt:6. aug 2012, 07:04
Css3 linear-gradient

Indlæg af stig » 22. aug 2012, 16:19

har med stor fornøjelse set samtlige video omkring css3 har på siden, og er begynd at lege med det.

Har været inde på denne her side http://lea.verou.me/css3patterns/ som bliver omtalt i video 4.

nogle at koder køre helt fint med prefix som beskrevet, men hvis jeg bruger stairs, carbon og japanese cube fryser fierfox og mønstret ser ikke rigtig ud.
Så har jeg prøvet med chrome og her ser mønstret heller ikke rigtig ud men chrome fryser i det mindste ikke.

Har prøvet at køre både lokalt og eksterne, med lige lidt hjælper det.

jeg har også prøvet kun at havde koden til firefox, med det gør heller ikke den store forskel.

Ccs3 koden ser sådan har ud, hvad pokker er det som jeg gør galt,

Kode: Vælg alt

body{
 font-family: Arial,Helvetica,sans-serif;
background:
-moz-linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
-moz-linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
-moz-linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
-moz-linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
-moz-linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
-moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;background:
-webkit-linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
-webkit-linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
-webkit-linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
-webkit-linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
-webkit-linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
-webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
    
}

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Css3 linear-gradient

Indlæg af scootergrisen » 22. aug 2012, 17:10

Du bruger background: 2 gange. Det vil sige anden gang bliver det overskrevet.

Prøv sådan her...

Kode: Vælg alt

   body{
      font-family: Arial,Helvetica,sans-serif;

      background:
      -moz-linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
      -moz-linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
      -moz-linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
      -moz-linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
      -moz-linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
      -moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424),
      -webkit-linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
      -webkit-linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
      -webkit-linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
      -webkit-linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
      -webkit-linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
      -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);

      background-color: #131313;

      background-size: 20px 20px;

   }
Senest rettet af scootergrisen 22. aug 2012, 18:03, rettet i alt 1 gang.

stig
Entusiast
Entusiast
Indlæg:37
Tilmeldt:6. aug 2012, 07:04

Re: Css3 linear-gradient

Indlæg af stig » 22. aug 2012, 17:23

Det har jeg også prøvet.
Problemet er der også hvis jeg kun laver en kode som ser sådan her ud.

Kode: Vælg alt

 body{
      font-family: Arial,Helvetica,sans-serif;

      background:
      -moz-linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
      -moz-linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
      -moz-linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
      -moz-linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
      -moz-linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
      -moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
      

      background-color: #131313;

      background-size: 20px 20px;

   }

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Css3 linear-gradient

Indlæg af scootergrisen » 22. aug 2012, 18:13

At browseren fryser kan du ikke gøre så meget ved.
Det bliver sikkert bedre i kommende versioner.

Koden der vises når man går ind på "Carbon" for eksempel passer ikke med den kode der er brugt på siden så de har åbenbart lavet nogen fejl. Du kan eventuelt skrive til dem så de kan rette det.

Carbon demo : http://scootergrisen.dk/test/test0156.html

stig
Entusiast
Entusiast
Indlæg:37
Tilmeldt:6. aug 2012, 07:04

Re: Css3 linear-gradient

Indlæg af stig » 22. aug 2012, 20:47

Super.
Det havde jeg ikke lige tænk over, havde godt nok undret mig over at mønstret så fint ud på deres side men var ikke faldet over at der har to forskellige koder, så jeg sender lige den en mail, når jeg får tid.

Men du har nu også fejl i din kode, jeg kan i vært fald ikke se noget mønster lige meget hvilke browser jeg bruger.
Her er der en kode som virker, lige på nær at firefox fryse men der kommer er fint mønster, så der går nok liget et stykke tid før fierfox kan være med på mode.

Jeg takker for hjælpen.

Kode: Vælg alt

body{

      background:
      -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
      -moz-linear-gradient(-117deg, #151515 5px, transparent 5px) 10px 0px,
      -moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
      -moz-linear-gradient(-117deg, #222 5px, transparent 5px) 10px 5px,
      -moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
      -moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
      -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
      -webkit-linear-gradient(-117deg, #151515 5px, transparent 5px) 10px 0px,
      -webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
      -webkit-linear-gradient(-117deg, #222 5px, transparent 5px) 10px 5px,
      -webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
      -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
      linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
      linear-gradient(-117deg, #151515 5px, transparent 5px) 10px 0px,
      linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
      linear-gradient(-117deg, #222 5px, transparent 5px) 10px 5px,
      linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
      linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
      background-color: #131313;
      background-size: 20px 20px;

   }

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Css3 linear-gradient

Indlæg af scootergrisen » 23. aug 2012, 10:50

Ok jeg troede kun man skulle skrive background: én gang også komma i mellem hver værdi men det virker åbenbart ikke.

Nu har jeg opdateret og testet til det virke i Firefox, Opera, Safari og Chrome : http://scootergrisen.dk/test/test0156.html

stig
Entusiast
Entusiast
Indlæg:37
Tilmeldt:6. aug 2012, 07:04

Re: Css3 linear-gradient

Indlæg af stig » 23. aug 2012, 11:11

scootergrisen skrev:Ok jeg troede kun man skulle skrive background: én gang også komma i mellem hver værdi men det virker åbenbart ikke.

Nu har jeg opdateret og testet til det virke i Firefox, Opera, Safari og Chrome : http://scootergrisen.dk/test/test0156.html
Jep det var noget beder.
Sid i går aftes og rodet med at grappe koden fra deres hjemme side, men syndes ikke rigtig jeg kunde finde ”rigtige” kode som du har fundet, hvor nappet du den fra

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Css3 linear-gradient

Indlæg af scootergrisen » 23. aug 2012, 11:39

Jeg brugte Firefox.
Der er et addon der hedder DOM inspector så kan du højre klikke et sted på hjemmesiden og vælge "inspect element" for at se koden for diverse ting.

Ved ikke om det kræver firebug men ellers bare installer begge de addons.

I firefox kan du gå op i tilføjelser > udviddelser også søge efter de addons.

De meget smart fordi så kan du se koden efter javascript er udført og du kan bruge musen til at finde det du leder efter.

stig
Entusiast
Entusiast
Indlæg:37
Tilmeldt:6. aug 2012, 07:04

Re: Css3 linear-gradient

Indlæg af stig » 23. aug 2012, 12:09

Bruger selv firefox men har først her fornylig begyndt at bruge web udvikler værktøjerne, men har snuset lidt til det og kan se at jeg har ”inspect element” og kan se det virker super, Takker

Det som jeg havde gjort i første omgang var at grabbe hele css koden på side for at finde kode stumpen og det var en smule uoverskuelig.

stig
Entusiast
Entusiast
Indlæg:37
Tilmeldt:6. aug 2012, 07:04

Re: Css3 linear-gradient

Indlæg af stig » 23. aug 2012, 22:58

Så har jeg leget en smule hvider med problemer og blevet en del kloger

Jeg har lavet en side hvor samtlige mønstre forekommer i nogle fælder på 300*300px.
Det køre helt fint uden problemer.
Men alt efter hvilke mønster jeg bruger til baggrund på body så fryser fierfox.
Men jeg kan se en rød tråd og det er at jo længer koden til mønstret er jo dårlige køre firefox, så det er nok et overbelastnings problem i firefox.
Så hvis man har tænkt sig at bruger de ny smarte muligheder skal man lige teste en ekstra gang.

Test siden kan ses her http://team7000.dk/csstest/index.html hvis det skulle havde intrasse, med den virker kun i fierfox da jeg ikke har brugt prefix til andre browser.

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Css3 linear-gradient

Indlæg af ThomasI » 24. aug 2012, 09:59

Ser fedt ud! - Lækkert at se mulighederne i CSS3 blive udnyttet :D

Besvar