Background schuin met 2 kleuren

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tim Kampherbeek

Tim Kampherbeek

05/10/2014 14:46:51
Quote Anchor link
Hoi,

De hele dag ben ik al aan het zoeken maar het lukt me maar niet om het te vinden, ik wil graag met css een background met 2 kleuren maken die schuin oversteken.

Hiermee bedoel ik dus: streep begint linksonder en eindigd rechtsboven en de vlakken zijn 2 verschillende kleuren, boven blauw, onder wit.

Weet iemand hoe ik dit voor mekaar kan krijgen? alvast bedankt!
 
PHP hulp

PHP hulp

12/12/2019 11:42:57
 
Frank Nietbelangrijk

Frank Nietbelangrijk

05/10/2014 16:59:39
Quote Anchor link
Ik denk dat je op zoek bent naar 'background gradient'.

Hier een leuk tooltje die zo jouw background css in elkaar zet:

http://www.colorzilla.com/gradient-editor/
 
Tim Kampherbeek

Tim Kampherbeek

05/10/2014 19:24:11
Quote Anchor link
Het is logisch dat het met grandient moet maar ik kan maar niet uitvogelen hoe op deze manier.

Ik wil namelijk maar 2 strakke kleuren geen overschimming
 
- SanThe -

- SanThe -

05/10/2014 19:47:07
Quote Anchor link
Misschien gewoon een plaatje maken.
 
D B

D B

05/10/2014 20:00:24
Quote Anchor link
Volgens mij moet dit met die tool van Frank aardig lukken.

Is dit wat je zoekt?

http://www.colorzilla.com/gradient-editor/#004799+0,004799+49,000000+50,ffffff+51;Custom

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
background: #004799; /* Old browsers */
background: -moz-linear-gradient(45deg,  #004799 0%, #004799 49%, #000000 50%, #ffffff 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#004799), color-stop(49%,#004799), color-stop(50%,#000000), color-stop(51%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #004799 0%,#004799 49%,#000000 50%,#ffffff 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #004799 0%,#004799 49%,#000000 50%,#ffffff 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #004799 0%,#004799 49%,#000000 50%,#ffffff 51%); /* IE10+ */
background: linear-gradient(45deg,  #004799 0%,#004799 49%,#000000 50%,#ffffff 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004799', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
Gewijzigd op 05/10/2014 20:02:49 door D B
 
Tim Kampherbeek

Tim Kampherbeek

05/10/2014 22:47:26
Quote Anchor link
Nee ik wil het zo: http://jsbin.com/iqemot/284/edit

Maar dan niet met border want dan is de lijn niet mooi, kan dan de pixels ervanaf lezen.
Een plaatje is geen optie want dit is voor een phonegap app
 
Wouter J

Wouter J

05/10/2014 23:08:14
Quote Anchor link
Een andere optie is er niet, dit is het beste wat je met CSS kan bereiken. Schuine zijdes werkt nog niet optimaal in de browsers (probeer maar eens een element dat je 45 graden gedraaid hebt een border te geven).
 
Phpnuke r

phpnuke r

06/10/2014 01:49:07
Quote Anchor link
Valt er niet iets te bereiken met transform:rotate ? Het is wel even div's over elkaar heen plaatsen(tenzij de div buiten de pagina word getoond) maar op deze manier zou het volgens mij moeten kunnen. Echter word het er geen mooie duidelijke code van. Maar het zou een oplossing kunnen bieden voor jouw probleem? Het is volgens mij scherper dan border-top&right.

p.s. Wouter betreft 45 graden draaien, is dat niet al voldoende om zoiets na te bootsen.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform
Gewijzigd op 06/10/2014 01:56:32 door phpnuke r
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.