01 ноября 2017

Коллекция полупрозрачных фонов


    Коллекция полупрозрачных фонов.
   Здесь приведено большое количество полупрозрачных фоновых картинок, любую из которых можно скачать на свой компьютер по кнопке "download", расположенной на каждой полупрозрачной картинке внизу справа. Эти полупрозрачные картинки можно наложить на цветной фон.
   Прямо на странице сайта можно посмотреть, как сочетаются между собой фоны основной и полупрозрачный. Для этого выбираем цвет страницы на палитре цветов слева и подбираем подходящий нам полупрозрачный фон из приведенной коллекции.  
   Полупрозрачный фон можно использовать как при оформлении страницы сайта так и в качестве фона под сообщение. Вот на одном таком фоне написан данный текст, точнее, текст написан на двойном фоне: нижний - вишневый, а сверху - полупрозрачный серый.


Сначала записываем в HTML редакторе код нижнего фона (редактируем по вкусу), затем вместо слова "содержимое" вписываем тот же код, заменив в нем адрес-ссылку на полупрозрачный фон и по желанию размеры. Получим двухслойный (двойной) фон. 

Генератор фоновых рисунков с повторяющимся узором





   Генератор фоновых рисунков с повторяющимся узором. Любой из приведенных шаблонов можно видоизменить, получив совершенно новый рисунок. 

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

18 августа 2017

Печатающийся текст в окне







HTML код печатающегося текста:

<center>
<span style="color: #20ffff;"><h3>
<center>
</center>
</h3>
</span>
<html>
<body alink="#ff0000" bgcolor="#923947" link="#0000ff" onload="textticker()" text="#000000" vlink="#800080">
<script language="JavaScript">
      <!-- begin
      var max=0;
      function textlist()
      {
      max=textlist.arguments.length;
      for (i=0; i<max; i++)
      this[i]=textlist.arguments[i];
      }
      tl=new textlist
      (
       "Четыре копыта, подковы несущие",   
       "Мягкие губы, сахар берущие",
       "Глаза лошадиные в душу заглянут",
       "От глаз лошадиных печали увянут.Вдовина В."
      );
      var x=0; pos=0;
      var l=tl[0].length;
      function textticker()
      {
        document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
        if(pos++==l) { pos=0; setTimeout("textticker()",1000); x++;
        if(x==max) x=0; l=tl[x].length; } else
        setTimeout("textticker()",50);
      }
      // end -->
      </script>
<form name="tickform">
  <input name="tickfield" size="40" /><br />
</form>
</body>
</html>
</center>


 Источник: www.javascriptt.ru


Заменяем в коде текст на свой, имея в виду при этом, что длина окна ограничена, и текст следует заносить построчно.

   

HTML код рамки:

Рамка детская с лягушонком


содержимое рамки 1



HTML код этой рамки:

<table width="600" height="82" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/zhulan/1/ramka_s_ljagushonkom_verkh.png)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 1</span></td></tr></table>
<table width="600" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/zhulan/1/ramka_s_ljagushonkom_seredina.png)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 2</span></td></tr></table>
<table width="600" height="170" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/zhulan/1/ramka_s_ljagushonkom_niz.png)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 3</span></td></tr></table>










содержимое рамки 3



 
.
   Для удобства размещения содержимого в рамке, чтобы текст читался, есть, как минимум, два варианта:
  • вместо слов "содержимое рамки..." первой разместить таблицу в 2 графы, шириной не больше ширины всей этой рамки (в данном случае до 600 px). При создании таблицы ширину правой ячейки, которая будет находится на зеленом фоне) установить не более  ширины зеленого фона (в данном случае до 340 px). И дальше в этой ячейке размещать содержимое (так сделано в этом примере);
  • вместо слов "содержимое рамки..." разместить полупрозрачный фон шириной равной ширине всей этой рамки (600 px).
   Внимание: при размещении содержимого (контента) в любой "сложной" рамке - как в данном примере трехуровневой или, как еще называют, трехслойной - следует следить за соблюдением размеров частей рамки, не допуская искажений. В разных браузерах картина может быть разной.

 

16 августа 2017

Онлайн генератор линеек отсчета времени и надписей



ОНЛАЙН ГЕНЕРАТОР  X-Lines.ru




 

   Такие симпатичные линейки отсчета времени до какого-то события или после можно сделать в этом онлайн генераторе.


Кроме того, здесь можно сделать надписи разным шрифтом и глиттер надписи.


 



HTML код рамки:
Related Posts Plugin for WordPress, Blogger...