Фальшивый переход градиента фона

Трансформации CSS не оказывают эффекта на градиенты фона. Хотя существуют простые способы имитировать плавные переходы градиентов и в данном уроке мы рассмотрим их.

А зачем беспокоиться о переходах градиентов? Ответ очень прост: представьте ситуацию, когда вы разрабатываете кнопки на CSS3. Чтобы придать им стильный вид почти обязательно использовать тени, скругленные углы и градиенты.

Читайте материал урока и у вас будет метод существенно улучшить градиент кнопок, особенно для состояния :hover.

 

Начальные стили

Для демонстрации мы используем три цветных прямоугольника, с которыми будут производиться все следующие действия.

Ниже приводятся только важные стили, которые необходимы для работы, и можно видеть, что background-color играет значимую роль, так как фоновый цвет будет единственным подвергаться переходу.

.boxes li{
	transition: background-color .2s ease-out;
}

.boxes .red{
	background-color: #da232a;
}

.boxes .red:hover{
	background-color: #e75f64;
}	

.boxes .green{
	background-color: #72b01a;
}

.boxes .green:hover{
	background-color: #9ed354;
}	

.boxes .blue{
	background-color: #269ce9;
}

.boxes .blue:hover{
	background-color: #70b9e8;
}

 

1. Background-image

Так как переход значений осуществляется для свойства background-color, нужно установить полупрозрачный фон с помощью background-image. В результате получим плавный переход градиента для элемента, к которому применяются стили.

background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));

 

2. Box-shadow

Возможно данный метод более "грязный", но он отлично работает. Вместо полупрозрачного фонового изображения можно использовать внутреннюю тень:

box-shadow: 0 60px 50px -30px rgba(255, 255, 255, .5) inset;

Заключение

Методы очень просты и легко реализуются. Большим преимуществом является отсутствие требований к использованию дополнительных элементов разметки.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/iHmVBolGJjU/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Фальшивый переход градиента фона | | 2012-08-16 21:03:38 | | Статьи Web-мастеру | | Трансформации CSS не оказывают эффекта на градиенты фона. Хотя существуют простые способы имитировать плавные переходы градиентов и в данном уроке мы рассмотрим их.А зачем беспокоиться о переходах | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: