Diskuze: Linear gradient

HTML a CSS HTML a CSS Linear gradient American English version English version

Avatar
softk
Člen
Avatar
softk:

Ahoj,

vytvářím jednoduchý web a s pomocí stránek http://www.colorzilla.com/…ient-editor/
jsem na svoje stránky přidal linear gradient.

.gradiont {
background: #b4ddb4;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I0ZGRiNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE0JSIgc3RvcC1jb2xvcj0iI2ZmZWE0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2ZmZDU0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmYmIwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2ZmYjYzMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOTkwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #b4ddb4 0%, #ffea4c 14%, #ffd54c 25%, #ffbb00 40%, #ffb630 70%, #c99000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(14%,#ffea4c), color-stop(25%,#ffd54c), color-stop(40%,#ffbb00), color-stop(70%,#ffb630), color-stop(100%,#c99000));
background: -webkit-linear-gradient(top,  #b4ddb4 0%,#ffea4c 14%,#ffd54c 25%,#ffbb00 40%,#ffb630 70%,#c99000 100%);
background: -o-linear-gradient(top,  #b4ddb4 0%,#ffea4c 14%,#ffd54c 25%,#ffbb00 40%,#ffb630 70%,#c99000 100%);
background: -ms-linear-gradient(top,  #b4ddb4 0%,#ffea4c 14%,#ffd54c 25%,#ffbb00 40%,#ffb630 70%,#c99000 100%);
background: linear-gradient(to bottom,  #b4ddb4 0%,#ffea4c 14%,#ffd54c 25%,#ffbb00 40%,#ffb630 70%,#c99000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#c99000',GradientType=0 );
}

Vše funguje vpohodě, ale při validaci na stránkách http://jigsaw.w3.org/css-validator/

napíše že kód neni validní:
3 .gradient Chyba : background url(data:image/svg+xml;b­ase64,PD94bWw­gdmVyc2lvbj0iM­S4wIiA/Pgo8c3ZnIH­htbG5zPSJodHRwO­i8vd3d3LnczLm9y­Zy8yMDAwL3N2Zy­Igd2lkdGg9IjEw­MCUiIGhlaWdod­D0iMTAwJSIgdmlld0JveD0iM­CAwIDEgMSIgcHJlc2Vyd­mVBc3BlY3RSYX­Rpbz0ibm9uZSI+Ci­AgPGxpbmVhckdy­YWRpZW50IGlkPSJncmFkL­XVjZ2ctZ2VuZXJhdGVkI­iBncmFkaWVudFVu­aXRzPSJ1c2VyU3BhY2VPblVz­ZSIgeDE9IjAlI­iB5MT0iMCUiIH­gyPSIwJSIgeTI9I­jEwMCUiPgogICAg­PHN0b3Agb2Zmc2V0PSIw­JSIgc3RvcC1jb2xv­cj0iI2I0ZGRiN­CIgc3RvcC1vcGFj­aXR5PSIxIi8+Ci­AgICA8c3RvcCBvZ­mZzZXQ9IjE0JSIg­c3RvcC1jb2xvcj0i­I2ZmZWE0YyIgc3RvcC1vcGFj­aXR5PSIxIi8+Ci­AgICA8c3RvcCBvZ­mZzZXQ9IjI1JSIg­c3RvcC1jb2xvcj0i­I2ZmZDU0YyIgc3RvcC1vcGFj­aXR5PSIxIi8+Ci­AgICA8c3RvcCBvZ­mZzZXQ9IjQwJSIg­c3RvcC1jb2xvcj0i­I2ZmYmIwMCIgc3RvcC1vcGFj­aXR5PSIxIi8+Ci­AgICA8c3RvcCBvZ­mZzZXQ9IjcwJSIg­c3RvcC1jb2xvcj0i­I2ZmYjYzMCIgc3RvcC1vcGFj­aXR5PSIxIi8+Ci­AgICA8c3RvcCBvZ­mZzZXQ9IjEwMCU­iIHN0b3AtY29sb3I9I­iNjOTkwMDAiIH­N0b3Atb3BhY2l0eT0iM­SIvPgogIDwvbGluZ­WFyR3JhZGllbnQ+Ci­AgPHJlY3QgeD0iM­CIgeT0iMCIgd2lkdGg9I­jEiIGhlaWdodD0iM­SIgZmlsbD0idXJsKCNncmFkL­XVjZ2ctZ2VuZXJhdGVkKSIg­Lz4KPC9zdmc+) je nesprávná URL url(data:image/svg+xml;b­ase64,PD94bWw­gdmVyc2lvbj0iM­S4wIiA/Pgo8c3ZnIH­htbG5zPSJodHRwO­i8vd3d3LnczLm9y­Zy8yMDAwL3N2Zy­Igd2lkdGg9IjEw­MCUiIGhlaWdod­D0iMTAwJSIgdmlld0JveD0iM­CAwIDEgMSIgcHJlc2Vyd­mVBc3BlY3RSYX­Rpbz0ibm9uZSI+Ci­AgPGxpbmVhckdy­YWRpZW50IGlkPSJncmFkL­XVjZ2ctZ2VuZXJhdGVkI­iBncmFkaWVudFVu­aXRzPSJ1c2VyU3BhY2VPblVz­ZSIgeDE9IjAlI­iB5MT0iMCUiIH­gyPSIwJSIgeTI9I­jEwMCUiPgogICAg­PHN0b3Agb2Zmc2V0PSIw­JSIgc3RvcC1jb2xv­cj0iI2I0ZGRiN­CIgc3RvcC1vcGFj­aXR5PSIxIi8+Ci­AgICA8c3RvcCBvZ­mZzZXQ9IjE0JSIg­c3RvcC1jb2xvcj0i­I2ZmZWE0YyIgc3RvcC1vcGFj­aXR5PSIxIi8+Ci­AgICA8c3RvcCBvZ­mZzZXQ9IjI1JSIg­c3RvcC1jb2xvcj0i­I2ZmZDU0YyIgc3RvcC1vcGFj­aXR5PSIxIi8+Ci­AgICA8c3RvcCBvZ­mZzZXQ9IjQwJSIg­c3RvcC1jb2xvcj0i­I2ZmYmIwMCIgc3RvcC1vcGFj­aXR5PSIxIi8+Ci­AgICA8c3RvcCBvZ­mZzZXQ9IjcwJSIg­c3RvcC1jb2xvcj0i­I2ZmYjYzMCIgc3RvcC1vcGFj­aXR5PSIxIi8+Ci­AgICA8c3RvcCBvZ­mZzZXQ9IjEwMCU­iIHN0b3AtY29sb3I9I­iNjOTkwMDAiIH­N0b3Atb3BhY2l0eT0iM­SIvPgogIDwvbGluZ­WFyR3JhZGllbnQ+Ci­AgPHJlY3QgeD0iM­CIgeT0iMCIgd2lkdGg9I­jEiIGhlaWdodD0iM­SIgZmlsbD0idXJsKCNncmFkL­XVjZ2ctZ2VuZXJhdGVkKSIg­Lz4KPC9zdmc+)
10 .gradient pokuste se najít před názvem vlastnosti dvojtečku. přidejte ji
10 .gradient Vlastnost progid neexistuje : DXImageTransform
10 .gradient Chyba při analýza DXImageTransfor­m.Microsoft.gra­dient( startColorstr='#b4ddb4­', endColorstr='#c99000­',GradientType=0 );
11 .gradient Chyba při analýza }

Můžete mi prosím poradit co se s tím dá dělat.

Děkuji.

 
Odpovědět 26.8.2013 2:47
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na softk
Jan Vargovský:

Vadí tomu ten filter řádek + to URL je fakt doslova maras.

Po pár testech prošly všechny, když ignoruješ ten filter řádek :)

 
Nahoru Odpovědět 26.8.2013 2:59
Avatar
softk
Člen
Avatar
Odpovídá na Jan Vargovský
softk:

Ahoj,

Dík za pomoc :) techal by si tam to šílený URL a ten filtr?? Nebo to mám dát rovnou pryč. Chtěl bych aby stránky vypadaly slušně i v starší prohlížečích jako ie6.

 
Nahoru Odpovědět 26.8.2013 7:53
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na softk
Jiří Gracík:

Tak pro ně to vyřešíš obrázkem na pozadí ;)

Nahoru Odpovědět 26.8.2013 9:30
Creating websites is awesome till you see the result in another browser ...
Avatar
softk
Člen
Avatar
softk:

Ahoj,

ještě by mě zajímalo co znamená u tý validace zpráva s varováním:

can't find the warning message for vendor-extension

Jak se toho zbavim
Dík

 
Nahoru Odpovědět 26.8.2013 16:44
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.