Форма для сообщения в виде пишущей машинки

В данном уроке мы разберёмся, как создать оригинальную форму для сообщений в виде пишущей машинки. Все основные функции данного агрегата, вышедшего из употребления, будут бережно восстановлены с помощью CSS и jQuery.

Принцип работы

Нашу пишущую машинку можно использовать 3 различными способами: можно вводить сообщения с клавиатуры или нажимая изображения клавиш с помощью мыши или сенсорного экрана.

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

Как отправлять сообщения?

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

Используем свойство @font-space

Для нашей формы мы будем использовать свойство @font-face. Особенностью данного свойства является то, что мы можем задействовать специфические шрифты в дизайне, и при этом будем уверенны, что у всех, кто будет просматривать нашу страницу, надписи будут отображаться одинаково. Потому что в действительности шрифты будут подгружаться с определенного адреса URL и посетители смогут их видеть без установки на свой компьютер.

Кроме того, из хранилища Google будет подгружаться шрифт Lobster. Это еще один способ обеспечить поддержку оригинальных шрифтов в веб проектах.

Вызываем библиотеку для работы со звуком в нашей пишущей машинке

Для создания полноценного эффекта работы на пишущей машинке мы используем соответствующие звуки (нажатие клавиши, проворачивание каретки с бумагой, и так далее). Для интеграции всех звуковых эффектов с нашим проектом используется библиотека SoundManager 2. Она позволяет предоставляет API для JavaScript, которое выполняет поддержку звука в HTML и FLASH.

Так осуществляется отличная кросс-браузерная поддержка звука для нашей формы. К сожалению, HTML5 пока не может гарантировать такого же уровня поддержки различными браузерами, поэтому приходится опираться на технологии FLASH.

Шаг 1. Создаем HTML файл

Нам нужен основной файл с разметкой, который будет являться скелетом нашего проекта. Так что создаем документ HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Форма в виде пишущей машинки</title>
</head>

<body>
</body>
</html>

Шаг 2. Создаем элементы интерфейса

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

Шаг 3. Создаем код CSS

Используя изображения элементов интерфейса, создаем код CSS:

* {
margin: 0;
padding: 0;
}
/* изображение для формирования фона */
body {
background-image: url('../img/i27x7ym.jpg') ;

}

/* Контейнер, который содержит нашу пишущую машинку */
#container {
margin: 100px  auto 0 auto  ;
width: 1300px;
position:relative;

}
 
/* Пишущая машинка без клавиш */
#typewritter{
	height:858px;
	width:845px;
	background: transparent url(../img/machine_2.png) no-repeat 0 0;
	position:relative;
	top:120px;
	z-index:2;
}
/* В контейнере write выводится текст сообщения. При загрузке он имеет
ширину 477px и высоту 58 px. Высота может программно изменяться до 260 px. */
#write {
margin: 0 200px;
padding:5px;
width: 477px;
height: 58px;
*height:66px;
font-family: 'B52Regular', Arial, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
color:#000;
background: transparent url(../img/sheet_2.png) no-repeat top left;
line-height:30px;
*line-height:30px;
border:none;
position:absolute;
top:105px;
*top:75px;
z-index:3;
outline:none;
resize:none;
overflow-y:hidden;

}
/* Параметры контейнера для клавиатуры */
#keyboard {
width:auto;
*width:614px;
margin: 0 100px 0 140px ;
list-style: none;
position:absolute;
z-index:3;
overflow:hidden;
top:490px;
}
	/* Параметры элемента li в списке #keyboard*/
	#keyboard li {
	float: left;
	margin: 0 0 0 0;
	width: 40px;
	height: 49px;
	line-height: 40px;
	text-align:	 center;
	font-family: 'Lobster', arial, serif;
	font-size:16px;
	color:#4B3005;
	text-shadow: -1px -1px 1px #ccc;
	}
		/* фон для всех клавиш */	
		li.letter,li.symbol {
				background: transparent url(../img/key.png) no-repeat  center  5px;	
			}
		.capslock, .tab, .left-shift {
		clear: left;
		}
			/* Фон для клавиш Tab, Удалить и Return */	
			#keyboard .tab, #keyboard .delete ,#keyboard .return {
				background: transparent url(../img/shift_key.png) no-repeat   center  7px;
					width: 58px;
			}
			#keyboard .delete {
				font-size:12px;
			}
			/* Фон для клавиши Caps Lock */	
			#keyboard .capslock {
				background: transparent url(../img/return.png) no-repeat -2px 5px;									
				width: 104px;
			}	
			/* Фон для клавиш Shift*/				
			#keyboard .left-shift, #keyboard .right-shift {
				background: transparent url(../img/shifts_keys.png) no-repeat   center  7px;
					width: 90px;
			}

		.lastitem {
				margin-right: 0;
		}
		/* Используется для символов в режиме верхнего регистра */
		.uppercase {
		text-transform: uppercase;
		}
		/* Стили для клавиши пробела*/						
		#keyboard .space {
		clear: left;
		width: 544px;
		*width: 534px;		
		background: transparent url(../img/key_space.png) no-repeat  center center;
		}
		/* Стили, которые используются при удерживаемой клавише Shift */								
		.on {
		display: none;
		}
		/* Курсор мыши при прохождении над клавишей */
		#keyboard li:hover {
		cursor: pointer;
		}
		
		/* Стили для клавиши Отправить*/								
		li#send {
				font-size:14px;
				color:#4B3005;
				text-shadow: -1px -1px 1px #fff;
				width:80px;
				background: transparent url(../img/shifts_keys.png) no-repeat    center center;
		}

Шаг 4. JavaScript

  
 var top_init=105;/*Начальная позиция (область текста)*/

 var browser_info= new Array();
    jQuery.each(jQuery.browser, function(i, val) {
			browser_info[i]=val;

    });

(function($) {

    /*
     * Автоматическое расширение области текста
     */
    $.fn.autogrow = function(options) {
        
        this.filter('textarea').each(function() {
            
            var $this       = $(this),
                minHeight   = $this.height(),
                lineHeight  = $this.css('lineHeight');
            
            var shadow = $('<div></div>').css({
                position:   'absolute',
                top:        -10000,
                left:       -10000,
                width:      $(this).width() - parseInt($this.css('paddingLeft')) - parseInt($this.css('paddingRight')),
                fontSize:   $this.css('fontSize'),
                fontFamily: $this.css('fontFamily'),
                lineHeight: $this.css('lineHeight'),
                resize:     'none'
            }).appendTo(document.body);
            for(var i in browser_info )
				{
					if(i==='msie' )
						{
							var top_init=24;
							break	;
						}
						else{
								var top_init=20;							
								break;	
							}
						
				}
            var update = function() {
    
                var times = function(string, number) {
                    for (var i = 0, r = ''; i < number; i ++) r += string;
                    return r;
                };
                
                var val = this.value.replace(/</g, '&lt;')
                                    .replace(/>/g, '&gt;')
                                    .replace(/&/g, '&amp;')
                                    .replace(/\n$/, '<br/>&nbsp;')
                                    .replace(/\n/g, '<br/>')
                                    .replace(/ {2,}/g, function(space) { return times('&nbsp;', space.length -1) + ' ' });
                
                shadow.html(val);
				var top_o=parseFloat($(this).css('height'));
				/* В данной части процесс проверки определяет выход области текста за высоту 260px.*/
				if (top_o<260 || shadow.height()<=240)					
					{
				       	$(this).css('height', Math.max(shadow.height() + top_init, minHeight));
						$(this).css('overflow-y','hidden' );							
					}
				if (top_o==260 || top_o==272)					
						{
							$(this).css('overflow-y','auto' );							
						}
			 		if (top_o<parseFloat($(this).css('height')))
						{
							var top=parseFloat($(this).css('top'));

							$(this).css('top', big = (top===105) ? top-22 : top-30 );
							 var aSoundObject2 = soundManager.createSound({id:'mySound1',url:'sound/typewriter_line_break.mp3'});aSoundObject2.play();		  		  
							 /*  Запускаем звуковой эффект в случае новой строки */
						}
			 		if (top_o>parseFloat($(this).css('height')))
						{
							var top=parseFloat($(this).css('top'));
							$(this).css('top',big = (top===83) ? top+22 : top+30);
						}

				

            }

            $(this).change(update).keyup(update).keydown(update);
            update.apply(this);
            
        });
        
        return this;
        
    }
    
})(jQuery);

/* Функция определяет, что клавиша нажата в режиме Caps Lock */
function isCapslock(e){

	var ascii_code	= e.which;
		var shift_key	= e.shiftKey;
		if( (65 <= ascii_code) && (ascii_code <= 90) && !shift_key )
		{
			return true
		}
		else
		{
			return false;
		}
}



  
  var $keyboard = jQuery.noConflict();	/*Загружаем переменную jQuery, чтобы исключить конфликты */
  var caps_lock=false;
  var atCount = 2;/* Начальное значение счетчика строк. Должно иметь значение 2*/
  var control_sc=false;/* Состояние прокрутки, когда создается новая строка */
  var click_focus=false;
  
  /* Область текста получит фокус ввода при загрузке страницы  */
	$keyboard(document).ready(function(){
	$keyboard("#write").focus();
	
  });
  
  $keyboard(function() {
    $keyboard('#write').autogrow();
  });

  /* Обработка событий мыши */
  $keyboard(function(){
	  var $write = $keyboard('#write'),
		  shift = false,
		  capslock = false;
	  /* События mousedown и mouseup обрабатываются только для виртуальной клавиатуры */
	  $keyboard('#keyboard li').bind({
		   mousedown: function() {
				  /*При поступлении события mousedown изображение клавиши смещается на два пикселя по вертикали и горизонтали */
			  $keyboard(this).css('position','relative');
			  $keyboard(this).css('top','2px');
			  $keyboard(this).css('left','2px');
			  $keyboard(this).css('border-color','#e5e5e5');	

			  var $this = $keyboard(this),
			  
				  character = jQuery.trim($this.html()); 
		  if (! $this.hasClass('send'))
		  {

     			 if ($this.hasClass('return'))
				 {
		  			 /*  Проигрываем звуковой эффект при нажатии клавиши Return - перевод на новую строку */					 
	  			 	 var aSoundObject1 = soundManager.createSound({id:'mySound3',url:'sound/typewriter_line_break.mp3'});
					 aSoundObject1.play();		  		  
				 }
			 else{
		  			 /*  Проигрываем звуковой эффект нажатия клавиши */
					 var aSoundObject = soundManager.createSound({id:'mySound2',url:'sound/typewriter_key_4.mp3'});
					 	aSoundObject.play();		  		  
		  
				 }
				

			  // Клавиша Shift
			  /* Изменяем состояние клавиш */
			  if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
				  $keyboard('.letter').toggleClass('uppercase');
				  $keyboard('.symbol span').toggle();
			  
				  shift = (shift === true) ? false : true;
				  capslock = false;
				  return false;
			  }
		  
		  // Клавиша Caps lock
			  /* Изменяем регистр клавиш */
			  if ($this.hasClass('capslock')) {
				  $keyboard('.letter').toggleClass('uppercase');
				  capslock = true;
				  return false;
			  }
		  
		  // Клавиша Удалить
  				/*Удаляем символ*/
				  if ($this.hasClass('delete')) {	
  
					  document.getElementById('write').value=document.getElementById('write').value.substr(0, document.getElementById('write').value.length - 1);
				  return false;
			  }
		  
		  // Специальные символы
		  
			  if ($this.hasClass('symbol')) character = $keyboard('span:visible', $this).html();
			  if ($this.hasClass('space')) character = ' ';
			  if ($this.hasClass('tab')) character = "\t";
			  if ($this.hasClass('return')) character = "\n";


		  // Символы в верхнем регистре
			  if ($this.hasClass('uppercase')) character = character.toUpperCase();
		  
		  // Удаляем влияние клавиши Shift как только была нажата символьная клавиша.
			  if (shift === true) {
				  $keyboard('.symbol span').toggle();
				  if (capslock === false) $keyboard('.letter').toggleClass('uppercase');
			  
				  shift = false;
			  }
		  				if(click_focus==true)
						{
						  $keyboard('#write').val('');
						  click_focus=false;
						}
		  // Добавляем символ
						  if (! $this.hasClass('delete')) {	
							  document.getElementById('write').value+=character;
						  }
			    $keyboard('#write').autogrow();						  
				/* Если имеется более одной строки, то проводится автоматическое расширение области текста  */						  
			 
			  }

			},
			   mouseup:  function (){
			/* При наступлении события mouseup восстанавливаем прежнее положение клавиши*/
			  $keyboard(this).css('position','static');
			  $keyboard(this).css('top','2px');
			  $keyboard(this).css('left','2px'); 
			  $keyboard(this).css('border-color','#000');	
			  	if(! $keyboard(this).hasClass('send'))
				{
				  $keyboard("#write").focus();
				}
			}
			
	  });
	  /* При нажатии клавиши Отправить, формируем email и удаляем все из области текста */
	  $keyboard('#send').stop(true,true).click(function()
	  {
	  			 /* Генерируем звуковой эффект нажатия на клавишу Отправить */					 
				 var aSoundObject5 = soundManager.createSound({id:'mySound5',url:'sound/typewriter-paper-1.mp3'});aSoundObject5.play();		  		  													 
				 /* Анимация изменения страницы выполняется одновременно с генерацией звукового эффекта */
				$keyboard('#write').animate({"top": "-=300px"},'fast',function() {
				var message=$keyboard(this).val();
				$keyboard(this).css('height','58px');
				$keyboard(this).val('     Письмо отправлено    ');
				$keyboard(this).css('top','163px');
				$keyboard(this).css('overflow-y','hidden' );				
				$keyboard(this).css('z-index','1');
				$keyboard(this).animate({"top": "-=58px"},'slow',function(){
					$keyboard(this).css('z-index','3');
					/* Запускаем PHP скрипт, который отправляет сообщение*/
					$keyboard.post("Mail/sendmail.php", { mail:message  },
										function(data){
									
										});
					});		
					click_focus=true;				

				});
				

  	  });
	  
	  /* Здесь выполняется обработка нажатия клавиш на реальной клавиатуре */
	  var keypressed = 0;

	  $keyboard('#write').bind(
	  {
		  /*Обработка данного события аналогична обработке события mousedown для клавиши виртуальной клавиатуры */
		  click:function(event){
					if(click_focus==true)
						{
						  $keyboard('#write').val('');
						  click_focus=false;
						}
			  },
		  
		  keydown:	function(event) {

			  var lowercase=String.fromCharCode(event.keyCode);


			  switch(event.keyCode)
				{
					case 8:
						lowercase='delete';
					break;
					case 13:
						lowercase='return';
						break;
					case 16:
						lowercase='shift';
					break;						
					case 20:
					 	lowercase="caps lock";

 							if (isCapslock(event)===true ||caps_lock===false)
							{
								if (caps_lock===false)
								{
								$keyboard('.letter').toggleClass('uppercase');	
								caps_lock=true;
								}
							}
							else
							{
								if (event.keyCode!=32)
								{
									if (caps_lock===true)
									{
										$keyboard('.letter').toggleClass('uppercase');										
										caps_lock=false;
									}
								}
							}

					break;
					case 32:
						lowercase="&nbsp;";	
			  		break;					
					case 186:
						lowercase='<span class="off">;</span><span class="on">:</span>';	
			  		break;
					
					case 188:
						lowercase='<span class="off">,</span><span class="on">&lt;</span>';	
			  		break;
					case 190:
						lowercase='<span class="off">.</span><span class="on">&gt;</span>';	
			  		break;
					case 191:
						lowercase='<span class="off">/</span><span class="on">?</span>';	
			  		break;
					case 222:
						lowercase='<span class="off">'+"'"+'</span><span class="on">&quot;</span>';	
			  		break;				
					
					
				}


			  $keyboard('#keyboard li').each(function(){
				  /* Обработка события аналогична обработке события mousedown*/

				  if ((jQuery.trim($keyboard(this).html())===lowercase.toLowerCase())|| jQuery.trim($keyboard(this).html())===lowercase)
				  {
					  $keyboard(this).css('position','relative');
					  $keyboard(this).css('top','2px');
					  $keyboard(this).css('left','2px');
					  $keyboard(this).css('border-color','#e5e5e5');	
				  }
		  

				  			
		  });
		  			 if (event.keyCode===13)
			 {
	  		 	 var aSoundObject1 = soundManager.createSound({id:'mySound3',url:'sound/typewriter_line_break.mp3'});
			 /* Генерируем звуковой эффект создания новой строки */
				 	 aSoundObject1.play();		  		  
			 }
			 else{

				 var aSoundObject = soundManager.createSound({id:'mySound2',url:'sound/typewriter_key_4.mp3'});
				 	aSoundObject.play();		  		  
			 /* Генерируем звуковой эффект нажатой клавиши */
		  
			 }


	  },
	  keyup: function(event){
		  /* При обработке данного события изображения клавиш возвращаются в исходные положения */
			  var lowercase=String.fromCharCode(event.keyCode);
			  switch(event.keyCode)
				{
					case 8:
						lowercase='delete';
					break;
					case 13:
						lowercase='return';
						break;
					case 16:
						lowercase='shift';
					break;						
					case 20:
					 	lowercase="caps lock";
					break;
					
					case 32:
						lowercase="&nbsp;";	
			  		break;
					case 186:
						lowercase='<span class="off">;</span><span class="on">:</span>';	
			  		break;
					
					case 188:
						lowercase='<span class="off">,</span><span class="on">&lt;</span>';	
			  		break;
					case 190:
						lowercase='<span class="off">.</span><span class="on">&gt;</span>';	
			  		break;
					case 191:
						lowercase='<span class="off">/</span><span class="on">?</span>';	
			  		break;
					case 222:
						lowercase='<span class="off">'+"'"+'</span><span class="on">&quot;</span>';	
			  		break;
					

				}

  	
			 /* Аналогично обработке события mouseup */
			  $keyboard('#keyboard li').each(function(){
  
				  if (jQuery.trim($keyboard(this).html())===lowercase.toLowerCase())
				  {
					  $keyboard(this).css('position','static');
					  $keyboard(this).css('top','2px');
					  $keyboard(this).css('left','2px');
					  $keyboard(this).css('border-color','#000');	
				  }

				  
		  });



	  },
	  keypress: function(event){
		 /* Обработка события при вводе текста. Определяет регистр введенного текста. */

		 						if (isCapslock(event)===true)
							{
								if (caps_lock===false)
								{
								$keyboard('.letter').toggleClass('uppercase');	
								caps_lock=true;
								}
							}
							else
							{
								if (event.keyCode!=32)
								{
									if (caps_lock===true)
									{
										$keyboard('.letter').toggleClass('uppercase');										
										caps_lock=false;
									}
								}
							}


	
	  }
	  });
});

Шаг 5. Завершенный HTML код.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Оригинальная форма для сообщения | Демонстрация для сайта RUSELLER.COM</title>
    <link href='http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/css/stylesheet.css" type="text/css" charset="utf-8" />
	<link href="/css/style.css" rel="stylesheet" type="text/css"  />
    <link rel="stylesheet" type="text/css" href="/css/flashblock.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="/js/soundmanager2.js"></script>
	<script type="text/javascript">
		var winLoc = window.location.toString();
		// Подключаем звуковые эффекты
		if (winLoc.match(/flash9/i)) {
		  soundManager.flashVersion = 9;
		  if (winLoc.match(/highperformance/i)) {
			soundManager.useHighPerformance = true;
			soundManager.useFastPolling = true;
		  }
		} else if (winLoc.match(/flash8/i)) {
		  soundManager.flashVersion = 8;
			}

			soundManager.useFlashBlock = true;
			soundManager.url = 'swf/'; // Путь к файлам swf SoundManager2 (обратите внимание на обратный слеш)
			soundManager.debugMode = false;
			soundManager.consoleOnly = false;
			soundManager.onready(function(oStatus) {
 				 if (!oStatus.success) {
				    return false;	
				  }
			  // soundManager инициализован и готов к использованию. Создаем звуки для демонстрационной страницы.
				 soundManager.createSound({
				    id: 'mySound2',
				    url: 'sound/typewriter_key_4.mp3'
				});
				soundManager.createSound({
					id: 'mySound3',
				    url: 'sound/typewriter_line_break.mp3'
  				});
			    soundManager.createSound({
				    id: 'mySound5',
			    	url: 'sound/typewriter-paper-1.mp3'
				});

			});
</script>
    
 		<script type="text/javascript" src="/js/keyboard.js"></script> 


</head>
<body>
<div id="container">
	<div id="typewritter">
	</div>
    <!-- Область для ввода текста -->
	<textarea id="write"  wrap="virtual" autocomplete="off"  ></textarea>
    <!-- Виртуальная клавиатура -->
	<ul id="keyboard">
		<li class="letter">ё</li>
		<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
		<li class="symbol"><span class="off">2</span><span class="on">"</span></li>
		<li class="symbol"><span class="off">3</span><span class="on">№</span></li>
		<li class="symbol"><span class="off">4</span><span class="on">;</span></li>
		<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
		<li class="symbol"><span class="off">6</span><span class="on">:</span></li>
		<li class="symbol"><span class="off">7</span><span class="on">?</span></li>
		<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
		<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
		<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
		<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
		<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
		<li class="delete lastitem">Удалить</li>
		<li class="tab">Tab</li>
		<li class="letter">й</li>
		<li class="letter">ц</li>
		<li class="letter">у</li>
		<li class="letter">к</li>
		<li class="letter">е</li>
		<li class="letter">н</li>
		<li class="letter">г</li>
		<li class="letter">ш</li>
		<li class="letter">щ</li>
		<li class="letter">з</li>
		<li class="letter">х</li>
		<li class="letter">ъ</li>
		<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
		<li class="capslock">caps lock</li>
		<li class="letter">ф</li>
		<li class="letter">ы</li>
		<li class="letter">в</li>
		<li class="letter">а</li>
		<li class="letter">п</li>
		<li class="letter">р</li>
		<li class="letter">о</li>
		<li class="letter">л</li>
		<li class="letter">д</li>
		<li class="letter">ж</li>
		<li class="letter">э</li>
		<li class="return lastitem">return</li>
		<li class="left-shift">shift</li>
		<li class="letter">я</li>
		<li class="letter">ч</li>
		<li class="letter">с</li>
		<li class="letter">м</li>
		<li class="letter">и</li>
		<li class="letter">т</li>
		<li class="letter">ь</li>
		<li class="letter">б</li>
		<li class="letter">ю</li>
		<li class="symbol"><span class="off">.</span><span class="on">,</span></li>
		<li class="right-shift lastitem">shift</li>
		<li class="space lastitem">&nbsp;</li>
        <li id="send" class="send"><span>Отправить</span></li>
	</ul>
</div>
</body>
</html>

Теперь наша печатная машинка полностью готова. Можно потестировать ее в различных браузерах. В IE8 и IE9 прокрутка листа сообщения не работает.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/cchs0hnq2cQ/lessons.php

Комментарии

Добавить комментарий / отзыв

Статьи по теме

Как быстро запустить Laravel на Windows

Все привет, меня зовут Павел Жуковский и сегодня я расскажу о том как быстро развернуть Laravel на Windows. Как развернуть чере...

2024-09-30

Next.js

На мой взгляд, Next.js - это лучший на сегодняшний день инструмент для разработки веб-приложений. Обратите внимание: руководство актуально �...

2024-09-25

OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения

OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения Либо ограничить доступ. OpenAI рассказа...

2024-09-05

WebSocket

Протокол WebSocket («веб-сокет»), описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером че...

2024-08-01

Ошибка 404: что это такое и как ее использовать для бизнеса

Для SEO 404 Error — возможность сохранить клиента и позиции в выдаче. Как это сделать, в статье. Окно «404 Not Found» вид...

2024-07-17

PostgreSQL 16. Изоляция транзакций. Часть 2

Введение Данная статья является продолжением первой части: "PostgreSQL 16. Организация данных. Часть 1". Как и первая часть, эта является объед�...

2024-05-27

Комментирование кода и генерация документации в PHP

Зачем нужны комментарии к программному коду? В каком виде их писать? Где они нужны, а где нет? Как правильно комментировать код? Как прид�...

2024-04-22

Что такое CSS-модули и зачем они нам?

В последнее время меня интригуют CSS-модули. Если вы о них не слышали — эта статья для вас. Мы рассмотрим, что это за проект, какие задачи о�...

2024-04-22

23 сервиса для эффективного экспресс-аудита любого сайта

Аудит сайта – комплексный процесс, который позволяет оценить эффективность сайта и понять, на каком этапе теряются продажи, почему люди...

2024-04-17

Яндекс переходит на новую версию Wordstat

Часть старой функциональности уже недоступна. Обновленный Яндекс Вордстат полностью перейдет на основной домен wordstat.ru 20 марта. С...

2024-04-08

Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть

Она умеет распознавать эмоции человека по голосу. Алгоритм-эмпат определяет характер речи пользователя: говорит он с явным негатив...

2024-04-08

Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI

Скорость обработки сложных научных статей составляет менее трех секунд. Новое поколение моделей ИИ от компании Antropic под названием Cl...

2024-04-08

Как пользоваться GPT 4 и Claude бесплатно и без VPN

Как бесплатно пользоваться GPT 4, его плагинами, а также новой нейросетью Claude 3? Это можно делать в рамках одного сайта, который называет�...

2024-04-08

Как использовать анимацию с помощью JavaScript-библиотеки GSAP

Узнайте, как использовать мощную JavaScript-библиотеку GSAP для создания захватывающих анимаций на веб-страницах, освоив основы и примеры. GSAP...

2024-03-13

Использование GSAP 3 для веб-анимации

Использование GSAP 3 для веб-анимации От автора: Greensock Animation Platform (GSAP) — это простая в использовании библиотека JavaScript для веб-анимации....

2024-03-13

| В данном уроке мы разберёмся, как создать оригинальную форму для сообщений в виде пишущей машинки. Все основные функции данного агрегата, вышедшего из употребления, будут бережно восстановлены с | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |

Дайджест новых статей по интернет-маркетингу на ваш email

Продающие сайты "под ключ"!

Наши сайты зарабытывают вам деньги. Landing-page. Эффективные продающие сайты точно в срок и под ключ! Всего от 14700 рублей
Подробнее...

Интернет-магазины и каталоги "под ключ"!

Эффективные и удобные инструменты торговли (электронной торговли) "под ключ". Продают, даже когда вы спите! Всего от 33800 рублей
Подробнее...

Комплексный интернет-маркетинг и продвижение сайтов

Максимальную эффективность дает не какой-то конкретный метод, а их комбинация. Комбинация таких методов и называется комплексным интернет-маркетингом. Всего от 8000 рублей в месяц
Подробнее...

Скидка 50% на разработку логотипа

Профессиональный логотип поможет вашему бизнесу привлечь новых покупателей и усилить их приверженность к торговой марке, а также повысить доверие, так как он работает на вас 24 часа в сутки. В заключение к этому можно сказать, что лoготип занимает центральное место в индивидуальности компании.
Подробнее...

Реклама в Yandex и Google

Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров. Всего от 8000 рублей в месяц
Подробнее...

Social media marketing (SMM) — продвижение в социальных медиа

Реклама в Однокласcниках и на Mail.ru Создание, ведение и раскрутка групп и реклама ВКонтакте и Facebook. Всего от 8000 рублей в месяц
Подробнее...

Приглашаем к сотрудничеству рекламные агентства и веб-студии!

Внимание Акция! Приглашаем к сотрудничеству рекламные агентства и различные веб-студии России! Индивидуальные и взаимовыгодные условия сотрудничества.
Подробнее...

Ускоренная разработка любого сайта от 5 дней!

Внимание Акция! Ускоренная разработка любого сайта! Ваш сайт будет готов за 5-10 дней. Вы можете заказать разработку любого сайта "под ключ" за 5-10 рабочих дней, с доплатой всего 30% от его стоимости!
Подробнее...

Ждем новых друзей!

Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
Подробнее...

Приведи друга и получи скидку!

Внимание Акция! Приведи друга и получи скидку! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта, если клиент заказавший наши услуги, пришел по Вашей рекомендации.
Подробнее...

1 2 3 4 5 6 7 8 9

Смотреть все акции и спец. предложения Оставить заявку на заказ!

Новые статьи и публикации

2024-09-30 » Как быстро запустить Laravel на Windows
2024-09-25 » Next.js
2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
2024-08-01 » WebSocket
2024-07-26 » Интеграция с Яндекс Еда
2024-07-26 » Интеграция с Эквайринг
2024-07-26 » Интеграция с СДЕК
2024-07-26 » Интеграция с Битрикс-24
2024-07-26 » Интеграция с Travelline
2024-07-26 » Интеграция с Iiko
2024-07-26 » Интеграция с Delivery Club
2024-07-26 » Интеграция с CRM
2024-07-26 » Интеграция с 1C-Бухгалтерия
2024-07-24 » Что такое сторителлинг: техники и примеры
2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
2024-07-01 » Профилирование кода в PHP
2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
2024-06-17 » Зачем вам знать потребности клиента
2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
2024-06-11 » Поведенческие факторы ранжирования в Яндексе
2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
2024-05-27 » Подборка сервисов для расшифровки аудио в текст
2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
2024-04-22 » Комментирование кода и генерация документации в PHP
2024-04-22 » SEO в России и на Западе: в чем основные отличия
2024-04-22 » SEO для международного масштабирования
2024-04-22 » Как использовать XML-карты для продвижения сайта

Темы

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

Толстой Лев Николаевич - (1828-1910) - великий русский писатель. Его творчество оказало огромное влияние на мировую литературу

Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!

Качественное и объемное представление своего бизнеса в Сети требуется любой растущей коммерческой структуре, стремящейся увеличить продажи, именно по этой причине среди наших клиентов как крупные так и небольшие компании во многих городах России и ближнего зарубежья.

Как мы работаем

Заявка
Позвоните или оставьте заявку на сайте.

Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!

Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.

Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.

Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Остались еще вопросы? Просто позвоните и задайте их специалистам

8 (800) 550-9899

с 2:30 до 11:30 по Мск, звонок бесплатный
Или напишите нам в WhatsApp

8 (924) 311-3435

с 9:30 до 18:30 по Хабаровску
Или напишите нам в WhatsApp

Создание сайта	Копирайтинг
Поисковое продвижение	Контекстная реклама
Реклама в соц. сетях	Сопровождение сайта
Не знаю, посоветуйте

Смена дизайна сайта	Установка модулей
Чистка кода от вирусов	Внутренняя оптимизация
Перенос сайта	Установка аналитики
Нет в списке

Форма для сообщения в виде пишущей машинки

Принцип работы

Как отправлять сообщения?

Используем свойство @font-space

Вызываем библиотеку для работы со звуком в нашей пишущей машинке

Шаг 1. Создаем HTML файл

Шаг 2. Создаем элементы интерфейса

Шаг 3. Создаем код CSS

Шаг 4. JavaScript

Шаг 5. Завершенный HTML код.

Статьи по теме

Дайджест новых статей по интернет-маркетингу на ваш email

Продающие сайты "под ключ"!

Интернет-магазины и каталоги "под ключ"!

Комплексный интернет-маркетинг и продвижение сайтов

Скидка 50% на разработку логотипа

Реклама в Yandex и Google

Social media marketing (SMM) — продвижение в социальных медиа

Приглашаем к сотрудничеству рекламные агентства и веб-студии!

Ускоренная разработка любого сайта от 5 дней!

Ждем новых друзей!

Приведи друга и получи скидку!

Новые статьи и публикации

Темы

Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!

Как мы работаем

Заказать услуги со скидкой \ Бесплатная консультация

КАКИЕ УСЛУГИ ВАС ИНТЕРЕСУЮТ?

КАКИЕ ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ ПОТРЕБУЮТСЯ?

Что нужно сделать, чтобы заказать создание сайта у нас?

Для всех тарифных планов на создание и размещение сайтов включено:

Комплексная раскрутка работает в рамках стратегии развития вашего бизнеса в сети и направлена

ЭФФЕКТИВНОЕ СОПРОВОЖДЕНИЕ (ПОДДЕРЖКА, ОБСЛУЖИВАНИЕ) САЙТОВ

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

Адаптивный дизайн сайтов и веб-приложений

Реклама в поисковых системах Яндекс и Google. Профессиональная настройка рекламы и отслеживание эффективности!