Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.01.2011, 17:39
Новичок на форуме
Отправить личное сообщение для DyadkaSashka Посмотреть профиль Найти все сообщения от DyadkaSashka
 
Регистрация: 15.01.2011
Сообщений: 4

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

Вот пример фона
Изображения:
Тип файла: jpg img_01.jpg (3.1 Кб, 12 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 15.01.2011, 17:42
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от DyadkaSashka
Как зделать повторяющийся от центра фон по диагонали с помощью однопиксельной картинки.
Как из букв О, П, Ж и А составить слово "вечность"?
Ответить с цитированием
  #3 (permalink)  
Старый 15.01.2011, 18:25
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

попиксельно рисуем фон на 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('А', 'ь'))


ну как?
Ответить с цитированием
  #4 (permalink)  
Старый 15.01.2011, 18:26
Аспирант
Отправить личное сообщение для Logo Посмотреть профиль Найти все сообщения от Logo
 
Регистрация: 15.03.2008
Сообщений: 91

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

Подобный фон можно сделать векторной графикой - VML/SVG
Ответить с цитированием
  #5 (permalink)  
Старый 15.01.2011, 18:33
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

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, 15.01.2011 в 18:43.
Ответить с цитированием
  #6 (permalink)  
Старый 15.01.2011, 19:15
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

или даже что-то высоко художественное, без всяких 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>

Последний раз редактировалось monolithed, 15.01.2011 в 21:01.
Ответить с цитированием
  #7 (permalink)  
Старый 15.01.2011, 19:49
Новичок на форуме
Отправить личное сообщение для DyadkaSashka Посмотреть профиль Найти все сообщения от DyadkaSashka
 
Регистрация: 15.01.2011
Сообщений: 4

Я дико извиняюсь за дачу ложной информации Я имел ввиду, что 1px - высота картинки, а ширина 1000px
Ответить с цитированием
  #8 (permalink)  
Старый 15.01.2011, 19:52
Новичок на форуме
Отправить личное сообщение для DyadkaSashka Посмотреть профиль Найти все сообщения от DyadkaSashka
 
Регистрация: 15.01.2011
Сообщений: 4

Нужно чтобы эта фоновая картина при каждой прорисовке вниз, меняла позицию на 1px влево
Ответить с цитированием
  #9 (permalink)  
Старый 15.01.2011, 19:59
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,484

В таком случае надо вручную(не совсем конечно) сделать изображение в полный цикл и поэксперементировать с pngout. Есть вероятность что результирующий вес будет немногим больше оригинала.
Ответить с цитированием
  #10 (permalink)  
Старый 15.01.2011, 20:01
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

а чего, я вот квадратный градиент в вакууме нарисовал (осторожно, браузер может уйти в себя и не вернуться)
<!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>

Последний раз редактировалось x-yuri, 16.01.2011 в 05:09.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Срезание дива по диагонали Acrossfy jQuery 15 15.10.2010 11:00
Виртуальная Машину вычисляющую НОД. n! слогаемых. Машина по принципам фон Неймана. Chaos1993 Общие вопросы Javascript 2 08.10.2010 11:07
Плывущий фон grefon jQuery 8 04.08.2010 23:02
Фон сайта.Бесконечная анимация цвета mdbm Элементы интерфейса 10 22.03.2010 17:09
Как сделать фон, главной страницы на изображении ? asked86 (X)HTML/CSS 3 03.04.2009 02:54