IE9, по-видимому, способен обрабатывать закругленные углы, используя стандартное определение CSS3 border-radius.
Как насчет поддержки радиуса границы и фонового градиента? Да, IE9 должен поддерживать их как отдельно, так и если вы смешиваете два градиента, выходите из закругленного угла.
Я также вижу странность с тенями, показывающими сплошную черную линию под ящиком с закругленными углами.
Вот изображения, показанные в IE9:
Как я могу обойти эту проблему?
Здесь одно решение, которое добавляет градиент фона, используя URI данных для создания полупрозрачного изображения, которое накладывает любой цвет фона. Я проверил, что он правильно отрезал границу радиуса в IE9. Это более легкий вес, чем предложения на основе SVG, но, как недостаток, не зависит от разрешения. Другое преимущество: работает с вашим текущим HTML/CSS и не требует обертывания дополнительными элементами.
Я захватил случайный 20x20 градиент PNG через веб-поиск и преобразовал его в URI данных с помощью онлайн-инструмента. Полученный URI данных меньше, чем код CSS для всего, что связано с SVG, а тем более сам SVG! (Вы можете применить это условно к IE9 только с использованием условных стилей, CSS-классов, специфичных для браузера, и т.д.). Конечно, создание PNG отлично подходит для градиентов размера кнопки, но не для градиентов размера страницы!
HTML:
<span class="button">This is a button</span>
CSS
span.button {
padding: 5px 10px;
border-radius: 10px;
background-color: orange;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
background-size: 100% 100%;
border: 2px solid white;
color: white;
}
Я также работаю над этой проблемой. Другим "решением" является добавление div вокруг элемента с градиентом и закругленными углами. Сделайте div той же высотой, шириной и округленными значениями угла. Установите переполнение в скрытое. Это в основном просто маска, но она работает для меня.
HTML:
<div class="mask roundedCorners">
<div class="roundedCorners gradient">
Content
</div>
</div>
CSS
.mask
{
overflow: hidden;
}
.roundedCorners
{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.gradient
{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}
Я думаю, стоит упомянуть, что во многих случаях вы можете использовать вставную тень для "подделки" эффекта градиента и избегать уродливых ребер в IE9. Это особенно хорошо работает с кнопками.
Смотрите этот пример: http://jsfiddle.net/jancbeck/CJPPW/31/
Вы также можете использовать CSS3 PIE для решения этой проблемы:
Конечно, это может быть излишним, если вы просто зависите от одного элемента с закругленными углами и фонового градиента, но это возможность рассмотреть, если вы включаете в себя несколько общих функций CSS3 на своих страницах и нужна простая поддержка IE6 +
Я тоже столкнулся с этой ошибкой. Мое предложение было бы использовать повторное фоновое изображение для градиента в ie9. IE9 правильно разбивает изображение за округленные границы (как на RC1).
Я не вижу, как писать 100 строк кода для замены одной строки CSS просто или элегантно. SVG классный и все, но зачем все это проходить, когда более простые решения для градиентного фона существуют уже много лет.
Я также застрял в одной и той же проблеме. n обнаружил, что IE не может отображать радиус и градиент границы одновременно, это и конфликты, единственный способ решить эту головную боль - удалить фильтр и использовать градиент через svg, только для IE..
вы можете получить код svg, используя свой цветовой код градиента, от Microsoft этого сайта (специально для градиента svg):
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
наслаждайтесь:)
Просто используйте оболочку div (округленное и переполненное), чтобы скопировать радиус для IE9. Простой, работает кросс-браузер. SVG, JS и условные комментарии не нужны.
<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>
.ie9roundedgradient {
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}
.roundedgradient {
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
/* use colorzilla to generate your cross-browser gradients */
}
Это сообщение в блоге помогло мне: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
В принципе, вы используете условный комментарий для удаления фильтра, а затем создаете SVG "спрайты" градиентов, которые вы можете использовать в качестве фоновых изображений.
Простой и элегантный!
IE9 правильно обрабатывает граничный радиус и градиенты. Проблема в том, что IE9 делает фильтр надлежащим в дополнение к градиенту. Способ правильно решить это - отключить фильтры в объявлениях стиля, которые используют свойство фильтра.
В качестве примера, как лучше всего решить эту проблему:
У вас есть класс кнопки в вашей основной таблице стилей.
.btn {
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
В условной таблице стилей IE9:
.btn { filter: none; }
Пока эта таблица стилей IE9 указана в вашей голове после вашей основной таблицы стилей, это будет работать отлично.
Существует простой способ заставить его работать в IE9 только с одним элементом.
Взгляните на эту скрипту: http://jsfiddle.net/bhaBJ/6/
Первый элемент устанавливает граничный радиус. Второй псевдоэлемент устанавливает фоновый градиент.
Несколько ключевых инструкций:
Объявление базового элемента выглядит примерно так:
.button{
position: relative;
overflow: hidden; /*make childs not to overflow the parent*/
border-radius: 5px; /*don't forget to make it cross-browser*/
z-index:2; /*just to be sure*/
}
Объявление псевдоэлемента:
.button:before{
content: " "; /*make it a node*/
display: block;
position: absolute;
top:0;left:0;bottom:0;right:0; /*same width and height as parent*/
z-index: -1; /*force it to NOT overlay the TEXT node*/
/*GRADIENT declarations...*/
background: -ms-linear-gradient(top, #ff3232 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232',endColorstr='#7db9e8',GradientType=0 );
}
Я решил отключить IE9 от закругления углов, чтобы обход этой ошибки. Он чист, прост и универсален.
{
border-radius:10px;
border-radius:0px \0/;
background:linear-gradient(top , #ffeecc, #ff8800);
/* ... (-moz -ms,-o, -webkit) gradients */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffeecc,endColorstr=#ff8800);
}
Маска div в IE9 - хорошая идея. Я поставляю некоторый полный код, чтобы немного разъяснить. Хотя я не доволен обертыванием кнопки в DIV, мне кажется, что это легче понять, чем внедрить маску PNG или пройти все усилия, используя SVG. Возможно, IE 10 будет поддерживать его должным образом.
<!DOCTYPE html>
<html>
<head>
<title>Button Test</title>
<style>
.btn_mask { cursor:pointer;padding:5px 10px;border-radius:11px 11px 11px 11px;
background-color:transparent;-moz-border-radius:11px 11px 11px 11px;
-webkit-border-radius:11px 11px 11px 11px;overflow:hidden;padding:0px;
float:left; }
.btn { cursor:pointer;text-decoration:none;border:1px solid rgb(153,153,153);
padding:5px 10px;color:rgb(0,0,0);font-size:14px;font-family:arial,serif;
text-shadow:0px 0px 5px rgb(255,255,255);font-size:14px;
border-radius:11px 11px 11px 11px;-moz-border-radius:11px 11px 11px 11px;
-webkit-border-radius:11px 11px 11px 11px;box-shadow:0px 0px 0px rgb(0,0,0);
-moz-box-shadow:0px 0px 0px rgb(0,0,0);
-webkit-box-shadow:0px 0px 0px rgb(0,0,0);background-color:rgb(255,204,0);
background-image:linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,153)),to(rgb(255,204,0)));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#ffcc00)')";background-image:-moz-linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
}
.btn:hover { cursor:pointer;text-decoration:none; border:1px solid rgb(153,153,153); padding:5px 10px 5px 10px; color:rgb(0,0,0); font-size:14px; font-family:arial,serif; text-shadow:0px 0px 5px rgb(255,255,255); font-size:14px; border-radius:11px 11px 11px 11px; -moz-border-radius:11px 11px 11px 11px; -webkit-border-radius:11px 11px 11px 11px; box-shadow:0px 0px 0px rgb(0,0,0); -moz-box-shadow:0px 0px 0px rgb(0,0,0); -webkit-box-shadow:0px 0px 0px rgb(0,0,0); background-color:rgb(255,255,0); background-image:linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,0)),to(rgb(255,255,153))); background-image:-moz-linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); }
</style>
</head>
<body>
<form name='form1'>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
</form>
</body>
</html>
background: #4f81bd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmODFiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWJiZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #4f81bd 0%, #8abbd7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4f81bd), color-stop(100%,#8abbd7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* IE10+ */
background: linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f81bd', endColorstr='#8abbd7',GradientType=1 ); /* IE6-8 */
Делал это со мной, и как только я удалил строку "фильтр:", кровотечение исчезло. Плюс я использую PIE.
Вылеты:
background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8abbd7', endColorstr='#4f81bd',GradientType=0 ); /* IE6-8 */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);
Не кровоточит:
background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);
Quick IE Shadow Fix:
fixBoxShadowBlur($('*'));
function fixBoxShadowBlur(jQueryObject){
if($.browser.msie && $.browser.version.substr(0, 1) == '9'){
jQueryObject.each(function(){
boxShadow = $(this).css('boxShadow');
if(boxShadow != 'none'){
var bsArr = boxShadow.split(' ');
bsBlur = parseInt(bsArr[2]) || 0;
bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length);
bsArr[2] = (bsBlur * 2) + bsBlurMeasureType;
$(this).css('boxShadow', bsArr.join(' '));
}
});
}
}
Вы можете использовать тень для достижения градиента и будете работать в Internet Explorer 9 с помощью border-radius
Что-то вроде этого:
box-shadow: inset 0px 0px 26px 5px gainsboro;
Не уверен, что это был один или действительный обходной путь, но...
Я обнаружил, что при условии, что радиус границы больше ширины границы, я не столкнулся с проблемой. Когда они были такими же, я получал квадратные углы.
Используя компас и сасси, вы можете легко достичь этого так:
@import "compass";
#border-radius {
@include border-radius('RADIUS'px); }
#gradiant{
$experimental-support-for-svg: true;
@include background-image(linear-gradient('COLOR') %,('COLOR') %,...; }
Компас создаст для вас изображение SVG.
так:
#gradiant {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9InRvIiB5MT0iYm90dG9tIiB4Mj0idG8iIHkyPSJ0b3AiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwODJhMmUiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0icmdiYSg4LCA0MiwgNDYsIDAuNzYpIi8+PHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9InJnYmEoNywgNDMsIDQ3LCAwLjcxKSIvPjxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSJyZ2JhKDQsIDQ0LCA1MCwgMC41OCkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDJjMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #082a2e), color-stop(35%, rgba(8, 42, 46, 0.76)), color-stop(43%, rgba(7, 43, 47, 0.71)), color-stop(58%, rgba(4, 44, 50, 0.58)), color-stop(100%, #042c32));
background-image: -webkit-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -moz-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -o-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
}
/* line 28, ../sass/boxshadow.scss */
#border-radius {
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-right-radius: 8px;
}
Работает для меня...
<!--[if gte IE 9]>
<style type="text/css">
.gradient{
filter: ;
}
</style>
CSS
border-radius: 10px;
background: #00a8db; /* Old browsers */
background: -moz-linear-gradient(top, #00a8db 0%, #116c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a8db), color- stop(100%,#116c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a8db 0%,#116c8c 100%); /* W3C */
-webkit-box-shadow: 1px 5px 2px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8db', endColorstr='#116c8c',GradientType=0 ); /* IE6-8 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTZjOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #116C8C 0%, #00A5D7 100%);