Background schuin met 2 kleuren
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!
Hier een leuk tooltje die zo jouw background css in elkaar zet:
http://www.colorzilla.com/gradient-editor/
Ik wil namelijk maar 2 strakke kleuren geen overschimming
Is dit wat je zoekt?
http://www.colorzilla.com/gradient-editor/#004799+0,004799+49,000000+50,ffffff+51;Custom
Code (php)
1
2
3
4
5
6
7
8
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 */
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
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
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform
Gewijzigd op 06/10/2014 01:56:32 door phpnuke r