Patternian Softobase

by Vladimir

HTML

Цвет фона: 
<input type="color" value="#003300" /> &lt;-кликабельно<br />
Паттерн: <span></span>
<div>
    Softobase Client
</div>

CSS

span,
div {
    height: 200px;
    background-color: #030;
    color: #FFF;
    text-align: center;
    font: 16px/200px Verdana;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAeCAYAAAEp2mxLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDQyMjBFOEQxOTU0MTFFNDkxRjk5RkYxMzZDNEZGMzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDQyMjBFOEUxOTU0MTFFNDkxRjk5RkYxMzZDNEZGMzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NDIyMEU4QjE5NTQxMUU0OTFGOTlGRjEzNkM0RkYzMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NDIyMEU4QzE5NTQxMUU0OTFGOTlGRjEzNkM0RkYzMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrRT7McAAAFlSURBVHjaYvz7968VAwR8BWIxIL7CxIAFMAJVSkPZGlD6IwuQkIdyrgKxKBALAAQQI9RMmHkMOM0ECT4EYhEg/gfF0jAzYeaBgABAADEiuRPmVgYk88F2oDsT2anI4COIQHY6zPkMSFaCrYU5kigAEECMaGHJgObGK8jeJgqQZLU0IR+TZCJ6zDKgBY8A7TwDEEDocc2AJUwZsMQ/A3o4k2wzOcHNQCCxMeCLDpq5kOoGomcXBixpgwFLFmJATy80cyFAAGEkGyYmpmP//v3TRxO7CBRzRRPbDRSTRBN7PvgjZWgkm4dYxEWwiP3DIoaey0YjhUZ5+SmOvPwKixjnaBhS30CAAMNV6zEQKtJwqMMo5nCowyj6cKijfs4b9FEy4hzI+P///0HtQBZgYpUmIrE+BapzJkLdXhLUmRCh7sxoGhzNJIMhkxBbk0gQoe4FUJ0uEeouA9XZEqHu8GgaHM0kAw0A3+iBrpm6ygYAAAAASUVORK5CYII=);
}
span {
    height:30px;
    width: 40px;
    overflow: hidden;
    background-color: #000;
    display: inline-block;
}

JavaScript

$('input').change(function() {
    $('div').css('background-color', $(this).val());
});