| Olegan | Дата: Среда, 11.04.2012, 23:49 | Сообщение # 1 |
|
| Приветствую!
Часто возникает необходимость сделать у какого-либо блока на сайте фон - градиентом. Конечно можно просто пустить фоном картинку с этим самым градиентом, но зачем, если большинство нормальных браузеров поддерживает CSS3, да и к тому же тем, которые его по каким то причинам не поддерживают можно на всякий случай всё таки "скормить" картинку с градиентом.. (кстати в случаи если браузер поддерживает градиенты, то загружать картинку он не будет, так что ничего не теряем  )
К сути
1. linear-gradient
нам надо сделать вот такую шляпу:
а сделаем собственно, вот так:
css
.gradient_css3 {
/* зальём этим цветом (#FF6600) если браузер не держит градиент */
background-color: #FF6600;
/* ... или этим заранье приготовленным изображением */
background-image: url(gradient.png);
/* ну а если всё хорошо, то погнали: */
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#FF9900, #FF6600);
/* Safari 4+ / Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF6600), to(#FF9900));
/* Safari 5.1+ / Chrome 10+ */
background-image: -webkit-linear-gradient(#FF9900, #FF6600);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#FF9900, #FF6600);
/* это так, бонус  */
width:300px; height:200px;
}
html:
Собственно вот и всё, дальше уже дело вкуса.
Плюсы такого способа
можно не использовать фоновую картинку с градиентом, что увеличит быстродействие.
удобно управлять самими градиентом (не придётся заливать новую картиночку ;))
Из минусов, разве что только всё таже не поддержка некоторыми браузерами, ну и величина кода..
в примере выше описан linear-gradient - тоесть линейный градиент. Есть также ещё и radial-gradient, что как не трудно догадаться - радиальный.
2. radial-gradient
Линейный готов, теперь про радиальный.
Получаем это: (с теми же цветами..)
(квадратик белый случайно попал)
вот так:
css
.radaial {
/* Firefox 3.6+ */
background-image: -moz-radial-gradient(#FF9900, #FF6600);
/* Webkit - ы */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#FF9900), to(#FF6600));
background-image: -webkit-radial-gradient(#FF9900, #FF6600);
background-image: radial-gradient(#FF9900, #FF6600);
/* и это */
width:200px; height:200px;
}
кстати надо не забыть ещё добавить заливку, в случи чего.. опять же для тех браузеров, которые пока не алё с css3..
также можно добиться градиента от скажем одного цвета к прозрачному.. в этом поможет RGBa модель цвета.
пока всё...
|
| |
| |
