Серая текстура GIF & Data URI (ASCII)

Серая текстура

Красивая и качественная текстура для фона элементов сайта в двух форматах, gif и data url, описание установки и демо применение на странице.

Установка текстуры для страницы в формате GIF

body{
background:transparent;
background:url(//atmpl.ru/design/free-textures/2015/free_texture_19.gif) repeat;
}

Установка текстуры для блока в формате GIF


<style>
.block-textures-gif{
width:100%;
height:160px;
background:transparent;
background:url(//atmpl.ru/design/free-textures/2015/free_texture_19.gif) repeat;
overflow:hidden;
}
</style>
<div class="block-textures-gif"></div>

Установка текстуры для страницы в формате Data URI

body{
background:transparent;
background-repeat:repeat;
background-image:url(data:image/gif;base64,R0lGODlhHAAcALMAAMDHtVNtQVRuQo6XfI+XfI+XfVNuQo6WfMHItsHItcDItVNtQgAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAcABwAAAT/0KSllq02zQ0sXcKCLIAyjUmlVcbImpNSuZdGEEixTZ1MEQlCQeZCoEyL2CH2iwUSiJ1AMkkmCgCC6oM4KA4IhYE0EVxVCbOIckpIPimKl+TVzBNecHI4V+hkAxpJg18ub24VYgB9gyJ5iWAaBS51X2JnQxRbYj54G0siIwgBiTNyZ1UpYyQskkExMZkbSDIwFGGDV0xQdEFACiMXJgVeA4nBL7iCnFEUEio+VtIXHgmkhB4VAUkYCGMpFQBMwIlJR24GnaJeBEtGHmEKA0NapCdJgenPsytWMelznlDgo8HAk2C3FqTDo0BLrnIxEulIoqUFRG4Cvpz5IUPXjyhdV1BgGdCsXBZTW2i8SqJGAphhKrToAOhJDrAu1gCQZLMmopUWcFRMTDciQBQdEy+d0mFNU6hLYQSeSZdkTgdwPLl90QLEzAZNRvPUsRanFLcq5UQIUrUhAgA7);
}

Установка текстуры для блока в формате Data URI


<style>
.block-textures-data_url{
width:100%;
height:300px;
background:transparent;
background-repeat:repeat;
background-image:url(data:image/gif;base64,R0lGODlhHAAcALMAAMDHtVNtQVRuQo6XfI+XfI+XfVNuQo6WfMHItsHItcDItVNtQgAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAcABwAAAT/0KSllq02zQ0sXcKCLIAyjUmlVcbImpNSuZdGEEixTZ1MEQlCQeZCoEyL2CH2iwUSiJ1AMkkmCgCC6oM4KA4IhYE0EVxVCbOIckpIPimKl+TVzBNecHI4V+hkAxpJg18ub24VYgB9gyJ5iWAaBS51X2JnQxRbYj54G0siIwgBiTNyZ1UpYyQskkExMZkbSDIwFGGDV0xQdEFACiMXJgVeA4nBL7iCnFEUEio+VtIXHgmkhB4VAUkYCGMpFQBMwIlJR24GnaJeBEtGHmEKA0NapCdJgenPsytWMelznlDgo8HAk2C3FqTDo0BLrnIxEulIoqUFRG4Cvpz5IUPXjyhdV1BgGdCsXBZTW2i8SqJGAphhKrToAOhJDrAu1gCQZLMmopUWcFRMTDciQBQdEy+d0mFNU6hLYQSeSZdkTgdwPLl90QLEzAZNRvPUsRanFLcq5UQIUrUhAgA7);
}
</style>
<div class="block-textures-data_url"></div>

Геометрические примеры использования текстуры

Чтобы увидеть результат html & css нажмите на значёк Кнопка выполнения кода html & css в редакторе.

Текстура в виде круга

Текстура в виде эллипса

Параметры текстуры в формате GIF

Формат
Graphics Interchange Format (GIF)
Размер
28 X 28 px
Вес
426 Bytes
Лицензия
CC BY-SA 4.0

Параметры текстуры в формате Data URI

Формат
Data URI (ASCII)
Размер
28 X 28 px
Вес
568 Bytes
Лицензия
CC BY 4.0

Испытание текстуры

Скачать текстуру бесплатно

Скачать

Рейтинг: 4.0/5 из 3



Добавлено Автор Ник Источник Просмотров Комментариев Теги
23-06-2015 Михаил Меренков aTmpl © 455 0 серая текстура, data url, gif, бесплатная текстура