Статьи / CSS + HTML


Градиент base64 png

Чтобы сделать кроссбраузерный градиент, например на кнопке со скругленными углами, пишем в стили следующий код:

background-image: url(data:image/png;base64,iVBLGLlKAEIcFQ8fuT3AAAAAElFTkSuQmCC);

// где iVBLGLlKAEIcFQ8fuT3AAAAAElFTkSuQmCC файл png в формате base64


Чтобы закодировать файл в base64 можно воспользоваться утилитой base64

//привет линуксоиды ;)

base64 имя_файла.png --wrap=0

// выведет файл: имя_файла.png в формате base64
// прямо в окно терминала
// далее копируем и вставляем в файл css


Или можно поставить модуль gulp:

npm install --save-dev gulp-css-base64

gulpfile.js:

var cssBase64 = require('gulp-css-base64');

//Without options
gulp.task('default', function () {
return gulp.src('src/css/input.css')
.pipe(cssBase64())
.pipe(gulp.dest('dist'));
});

//With options
gulp.task('default', function () {
return gulp.src('src/css/input.css')
.pipe(cssBase64({
baseDir: "../../images",
maxWeightResource: 100,
extensionsAllowed: ['.gif', '.jpg']
}))
.pipe(gulp.dest('dist'));
});

И собирать css по необходимости для продакшна, а в разработке держать с ссылками на файлы.