Форум

DyadkaSashka · #1 (**permalink**) 15.01.2011, 17:39

Как зделать повторяющийся от центра фон по диагонали с помощью однопиксельной картинки. При этом фон должен быть резиновым по высоте.

Вот пример фона

Kolyaj · #2 (**permalink**) 15.01.2011, 17:42

Сообщение от DyadkaSashka

Как зделать повторяющийся от центра фон по диагонали с помощью однопиксельной картинки.

Как из букв О, П, Ж и А составить слово "вечность"?

x-yuri · #3 (**permalink**) 15.01.2011, 18:25

попиксельно рисуем фон на canvas с помощью одного однопиксельного img, который для каждой точки меняем с помощью data: url

var a = ['О', 'П', 'Ж', 'А'];
alert(a[0].replace('О', 'в')+a[1].replace('П', 'е')+a[2].replace('Ж', 'ч')+a[3].replace('А', 'н')+a[0].replace('О', 'о')+a[1].replace('П', 'с')+a[2].replace('Ж', 'т')+a[3].replace('А', 'ь'))

ну как?

Logo · #4 (**permalink**) 15.01.2011, 18:26

Из картики 1x1 пиксель не сделать такой фон.

Подобный фон можно сделать векторной графикой - VML/SVG

monolithed · #5 (**permalink**) 15.01.2011, 18:33

Logo, не только, можно даже с градиентом

<script type="text/javascript">
window.onload = function(){
    var i = 0;
    (function(){
         for(j=0; j<15; j++){
             if(++i <= document.documentElement.clientHeight){
                 var element = document.createElement('div');
                 element.style.cssText = 'background: #'+0+j+j+j+j+j+'; top:'+i+'px; left:'+i+'px';
                 document.body.appendChild(element);
                 setTimeout(arguments.callee, 10);
             }
         } 
    })();
};
</script>

<style type="text/css">
body {background: red;}
div {
    position: absolute;
    color: white;
    text-align: center;
    width: 50px;
    height: 50px;
}
</style>
<div></div>

monolithed · #6 (**permalink**) 15.01.2011, 19:15

или даже что-то высоко художественное, без всяких canvas

<script type="text/javascript">
window.onload = function(){
    var div = document.getElementsByTagName('div')[0], square = document.body.offsetWidth, i = 0;
    (function(){
        if(i++<square){
            for(j=0; j<15; j++){
                var element = document.createElement('div');
                element.style.top = 50+50*Math.sin(20*(i+Math.PI/2)*20)+'px';
                element.style.left = i+'px';
                element.style.background = '#'+i+i+0+j+i+i;
                document.body.appendChild(element);
            }
         }
        window.setTimeout(arguments.callee, 1);
    })();
};
</script>

<style type="text/css">
body {background: #DDD;}

div {
    position: absolute;
    width: 8px;
    height: 8px;
}
</style>

DyadkaSashka · #7 (**permalink**) 15.01.2011, 19:49

Я дико извиняюсь за дачу ложной информации

Я имел ввиду, что 1px - высота картинки, а ширина 1000px

DyadkaSashka · #8 (**permalink**) 15.01.2011, 19:52

Нужно чтобы эта фоновая картина при каждой прорисовке вниз, меняла позицию на 1px влево

Aetae · #9 (**permalink**) 15.01.2011, 19:59

В таком случае надо вручную(не совсем конечно) сделать изображение в полный цикл и поэксперементировать с pngout. Есть вероятность что результирующий вес будет немногим больше оригинала.

x-yuri · #10 (**permalink**) 15.01.2011, 20:01

а чего, я вот квадратный градиент в вакууме нарисовал (осторожно, браузер может уйти в себя и не вернуться)

<!DOCTYPE HTML>
<html>
  <head>   
  </head>
  <body>   

  <style type="text/css">
    div {
      width: 1px;
      height: 1px;
      overflow: hidden;
      float: left;
    }
  </style>

  <script>

  for( var j=0; j<128; j++ )
    for( var k=j; k<j+128; k++ ){
      var div = document.createElement('div');
      div.style.background = 'rgb('+[0,0,k].join(',')+')';
      if( k == j )
        div.style.clear = 'left';
      document.body.appendChild( div );
    }

  </script>


  </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript