Большинство градиентов, которые я видел, являются вертикальными или горизонтальными. Возможно ли иметь диагональный градиент с использованием css? Я хотел бы иметь градиент, который начинается темным в одном углу и становится легче в противоположном углу.Диагональный градиент в css
1
A
ответ
2
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000',GradientType=1); /* IE6-9 fallback on horizontal gradient */
2
Да. http://www.colorzilla.com/gradient-editor/ имеет возможность выбирать диагональ, см. Ориентацию.
1
Смотрите эту демку http://jsfiddle.net/FQSdb/
, а также проверить http://www.colorzilla.com/gradient-editor/
различные варианты ориентации
Смежные вопросы
- 1. Диагональный градиент в Internet Explorer
- 2. Диагональный CSS-градиент для <tr> в Chrome
- 3. Ускорить диагональный градиент, чтобы быть вертикальным
- 4. Как рисовать слегка диагональный градиент Заполните PHP?
- 5. Как мы можем реализовать диагональный градиент PSD в нашем коде xssx css?
- 6. Как создать диагональный градиент от угла к углу?
- 7. Создайте динамический диагональный градиент, используя javascript для холста html5?
- 8. Диагональный наведение по css или JQuery
- 9. (CSS) диагональный текст на изображении (SVG)
- 10. Радиальный градиент CSS?
- 11. CSS динамический градиент текста
- 12. CSS Однолинейный градиент
- 13. CSS фон градиент, изображение
- 14. CSS - неправильный линейный градиент
- 15. CSS-Графический линейный градиент
- 16. CSS Градиент не отображается
- 17. CSS-градиент с изображения
- 18. Css множественный градиент
- 19. Scaling градиент фона в CSS
- 20. CSS линейный градиент в светлячок
- 21. Css Переход наклонный градиент
- 22. CSS градиент фон
- 23. CSS Градиент цвета
- 24. Css текстура радиальный градиент
- 25. CSS -moz-линейный градиент
- 26. Диагональный угол в углу divs
- 27. CSS Градиент текста, деградация Opera
- 28. CSS Градиент фона со смещением
- 29. Chrome радиальный CSS градиент гладкостью
- 30. CSS градиент останавливается и повторяется