Я хотів би мати можливість створювати красиві кнопки будь-якого кольору динамічно в межах веб-сторінки, не визначаючи окремий клас CSS для кожного кольору достроково.
Використання градієнтів CSS3 з альфа-каналами здається, що це було б найкращим способом зробити це, коли градієнти з низькою непрозорістю накладені поверх твердого фонового кольору.
Однак я не знаю достатньо про CSS, щоб навіть сказати, чи це можливо чи ні, тим більше реально реалізувати це.
У Інтернеті я знайшов пару ресурсів, схожих на те, що вони допоможуть:
Чи може хтось із більшим досвідом роботи з CSS сказати мені, чи це можливо, і, можливо, вказати мені на інші ресурси, щоб зробити це легше зняти?
Відповіді:
1 для відповіді № 1Використовуючи щось подібне Менше або SASS, це досить легко зробити законно. Створіть такий мікс (надійний варіант):
.auto-gradient(@color) {
/* Use any of the built in functions like saturate() or spin() */
@topcolor: lighten(@color, 20);
@bottomcolor: darken(@color, 20);
background: @color;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(@topcolor), to(@bottomcolor));
background: -webkit-linear-gradient(@topcolor, @bottomcolor);
background: -moz-linear-gradient(@topcolor, @bottomcolor);
background: -ms-linear-gradient(@topcolor, @bottomcolor);
background: -o-linear-gradient(@topcolor, @bottomcolor);
background: linear-gradient(@topcolor, @bottomcolor);
/* If using PIE.htc for IE */
-pie-background: linear-gradient(@topcolor, @bottomcolor);
behavior: url(pie.htc);
}
Використання:
.my-button {
.auto-gradient(darkviolet);
}
Це буде компілюватися у дійсний CSS (3), він повинен бути приблизно таким:
.my-button {
background:darkviolet;
background:-webkit-gradient(linear,0 0,0 bottom,from(#c43aff),to(#4c006d));
background:-webkit-linear-gradient(#c43aff,#4c006d);
background:-moz-linear-gradient(#c43aff,#4c006d);
background:-ms-linear-gradient(#c43aff,#4c006d);
background:-o-linear-gradient(#c43aff,#4c006d);
background:linear-gradient(#c43aff,#4c006d);
}
Примітка: я використовую lessphp себе, і версія, яку я зараз використовую, здається, задавлюється названими кольорами DarkViolet передаються для світлішого / затемнення, якщо вони не малі.
1 для відповіді № 2
Пропозиція MrOBrian від Кінцевий генератор градієнтів CSS зробив це нескладно. Ось таке рішення, з яким я закінчився, - це відносно простий стиль CSS, зібраний разом із вищезгаданого генератора градієнтів та Посібник із кнопки перехресного браузера CSS.
Наступний код додає приємну гладку кнопкупоява при застосуванні до елемента із заданим атрибутом CSS фонового кольору. Це дозволить мені використовувати загальний стиль для всіх моїх кнопок, вказати їх колір за допомогою атрибута background-color.
Дякую за всі поради та пропозиції!