»

 Будь в курсе событий:

gradients css

Градиенты CSS
Градиенты CSS

свой прошлый урок я закончил на том, что обнаружил баг, который хотел бы исправить в этом уроке. Некоторым покажется данное решение довольно странным и необычным, но оно того стоит, так как в этом случае кроссбраузерность градиентов дает 100% результат.

Градиенты CSS

Очередной урок будет посвящен кроссбраузерности градиентов. В предыдущем уроке я допустил оплошность и в результате чего получил неподдерживаемые градиенты в шапке таблицы в браузерах Opera и IE последних версий. CSS я не стал править в том уроке, сделано это было исключительно ради того, чтобы каждый мог понять, где именно решается проблема. Решение как всегда простое и лежит на поверхности. Сначала я подумал про давно избитые готовые изображения градиентов. Но нашел более легкий способ. И сейчас мы попробуем разобраться в чем же преимущество данного решения.

Шаг 1. Используем css-код линейного градиента из предыдущего урока

В предыдущем уроке мы использовали такой варинт css-кода при написании настроек градиента. По сути ошибки как таковой нет, только вот кроссбраузерности в этом случае тоже нет, несмотря на то, что мы уже прописали знакомые нам префиксы для оперы и осла. Тем не менее давайте удалим полностью блоки, которые отвечают за наши градиенты, а именно /*linear-gradient*/

css
.CSSTable-Ex2 tr:first-child td{ /* заливаем градиентом первую строку таблицы */

/*linear-gradient - начало*/
background:-webkit-gradient(linear,left bottom,left top,color-stop(#d3d3d3,0.05),color-stop(#9b9b9b,1));
background:-webkit-linear-gradient(bottom, #d3d3d3 5%, #9b9b9b 100%);
background:   -moz-linear-gradient(bottom, #d3d3d3 5%, #9b9b9b 100%);
background:     -o-linear-gradient(bottom, #d3d3d3 5%, #9b9b9b 100%);
background:        linear-gradient(bottom, #d3d3d3 5%, #9b9b9b 100%);
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d3d3d3), color-stop(1, #9b9b9b) );
background:-webkit-gradient(linear,,color-stop(#d3d3d3,0.05),color-stop(#9b9b9b,1));
background:-webkit-linear-gradient( center top, #d3d3d3 5%, #9b9b9b 100% );
background:   -moz-linear-gradient( center top, #d3d3d3 5%, #9b9b9b 100% );
background:     -o-linear-gradient( center top, #d3d3d3 5%, #9b9b9b 100% );
background:        linear-gradient( center top, #d3d3d3 5%, #9b9b9b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#d3d3d3", endColorstr="#9b9b9b");
background:-webkit-gradient(linear,left top,left bottom,from(#d3d3d3),to(#d3d3d3));
background:-webkit-linear-gradient(top,#d3d3d3,9b9b9b);
background:   -moz-linear-gradient(top,#d3d3d3,9b9b9b);
background:     -o-linear-gradient(top,#d3d3d3,9b9b9b);
background:        linear-gradient(top,#d3d3d3,9b9b9b);
/*linear-gradient - конец*/

/*этот блок не отвечает за градиент*/
background-color:#d3d3d3;
border:0px solid #ffffff;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:16px;
font-family:Times New Roman;
font-weight:bold;
color:#353535;
}

.CSSTable-Ex1 tr:first-child:hover td{ /* заливаем градиентом первую строку таблицы при наведении */

/*linear-gradient - начало*/
background:-webkit-gradient(linear,left bottom,left top,color-stop(#9b9b9b,0.05),color-stop(#d3d3d3,1));
background:-webkit-linear-gradient(bottom, #9b9b9b 5%, #d3d3d3 100%);
background:   -moz-linear-gradient(bottom, #9b9b9b 5%, #d3d3d3 100%);
background:     -o-linear-gradient(bottom, #9b9b9b 5%, #d3d3d3 100%);
background:        linear-gradient(bottom, #9b9b9b 5%, #d3d3d3 100%);
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9b9b9b), color-stop(1, #9d3d3d3) );
background:-webkit-gradient(linear,,color-stop(#9b9b9b,0.05),color-stop(#d3d3d3,1));
background:-webkit-linear-gradient( center top, #9b9b9b 5%, #d3d3d3 100% );
background:   -moz-linear-gradient( center top, #9b9b9b 5%, #d3d3d3 100% );
background:     -o-linear-gradient( center top, #9b9b9b 5%, #d3d3d3 100% );
background:        linear-gradient( center top, #9b9b9b 5%, #d3d3d3 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#9b9b9b", endColorstr="#d3d3d3");
background:-webkit-gradient(linear,left top,left bottom,from(#9b9b9b),to(#9b9b9b));
background:-webkit-linear-gradient(top,#9b9b9b,d3d3d3);
background:   -moz-linear-gradient(top,#9b9b9b,d3d3d3);
background:     -o-linear-gradient(top,#9b9b9b,d3d3d3);
background:        linear-gradient(top,#9b9b9b,d3d3d3);
/*linear-gradient - конец*/

/*этот блок не отвечает за градиент*/
background-color:#d3d3d3;
}

и получим css-код без градиентов:

css
.CSSTable-Ex2 tr:first-child td{ /* заливаем градиентом первую строку таблицы */

/*этот блок не отвечает за градиент*/
background-color:#d3d3d3;
border:0px solid #ffffff;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:16px;
font-family:Times New Roman;
font-weight:bold;
color:#353535;
}

.CSSTable-Ex1 tr:first-child:hover td{ /* заливаем градиентом первую строку таблицы при наведении */

/*этот блок не отвечает за градиент*/
background-color:#d3d3d3;
}

Шаг 2. Создаем изображения градиентов в PNG или любом другом формате

Для создания градиентов мы используем любые доступные нам средства, будь то Adobe Photoshop, либо просто изображение. Я использую изображения, созданные на подобие необходимых нам градиентов в формате PNG, размером 1 х 40 px, где 1px - это наша ширина градиента, а 40px - высота. Чтобы посмотреть как выглядят эти градиенты, можно скачать их. Но по большому счету они вам не понадобятся, если вы будете использовать свои изображения.

Градиенты
images.zip
Сжатый архив в Zip формате 1.2 KB

Шаг 3. Кодируем изображения

Кодируем наши изображения в base64 с помощью онлайн-сервиса вроде DailyCoding (очень удобно, ничего лишнего). Вписываем получившиеся строки в css-код, заменяя «ТИП» на MIME-тип наших изображений — jpeg/png/gif или (OMG!) bmp и «КОД» на нужную строку в base64:

background-image: url("data:image/ТИП;base64,КОД");

Где ТИП - это формат изображения, в нашем случае PNG, а КОД - кодированное изображение. В закодированном виде изображение a.png будет выглядеть так:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAYAAAA/tpB3AAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3Ag SUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/ 0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFIC pA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU 6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVah vAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAAMklEQVR42mK4fPnyf yYGBgYGCPHv3z8Gpv///0NZaFycLCKU4GT9+/cPu+U4FWORAAwAJ3FvH9W0zkgAAAAASUVORK5CYII=

А изображение b.png - следующим образом:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAYAAAA/tpB3AAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSU NDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx 6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0 KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRy Pw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y /Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAAMUlEQVR42mKYPXv2fyYGBgYG CMHExMTAxMjICGWhcXGyiFCCk8XExITdcpyKsUgABgCHVwPHaAzdVAAAAABJRU5ErkJggg==

Напомню, что изображение a.png используется нами для заливки шапки таблицы в состоянии покоя, а изображение b.png - в момент наведения мыши. Так же следует отметить еще один момент, что нам необходимо сделать так, чтобы наши закодированные изображения растягивались по горизонтали, то есть по оси X, так как градиент у нас имеет по высоте полную отрисовку, а по ширине отрисовку в 1px. Для этого допишем в наш css-код следующую характеристику изображения:

background-repeat:repeat-x;

Шаг 4. Вставляем настройки градиента в css

css
.CSSTable-Ex1 tr:first-child td{ /* заливаем градиентом первую строку таблицы */

/*изображение a.png в кодировке base64*/
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAYAAAA/tpB3AAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAAMklEQVR42mK4fPnyfyYGBgYGCPHv3z8Gpv///0NZaFycLCKU4GT9+/cPu+U4FWORAAwAJ3FvH9W0zkgAAAAASUVORK5CYII=");
background-repeat:repeat-x; /*растягиваем изображение a.png по горизонтали*/

border:0px solid #ffffff;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:16px;
font-family:Times New Roman;
font-weight:bold;
color:#353535;
}


.CSSTable-Ex1 tr:first-child:hover td{ /* заливаем градиентом первую строку таблицы при наведении */

/*изображение b.png в кодировке base64*/
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAYAAAA/tpB3AAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAAMUlEQVR42mKYPXv2fyYGBgYGCMHExMTAxMjICGWhcXGyiFCCk8XExITdcpyKsUgABgCHVwPHaAzdVAAAAABJRU5ErkJggg==");
background-repeat:repeat-x; /*растягиваем изображение b.png по горизонтали*/
}

Шаг 5. Результат

 
Фамилия Имя Телефон
Петр Петров 12345-12345
Иван Иванов 0123-12345

Теперь можно наслаждаться двумя запросами к вебсерверу (html + css), вместо трех (html + css + изображение). На этом урок закончен, если у вас есть более рациональные варианты решения, пишите.

 

Отсавляйте ваши комментарии, не стесняйтесь!

Оставить комментарий

Комментарии: 0