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

В данном уроке мы разберёмся, как создать оригинальную форму для сообщений в виде пишущей машинки. Все основные функции данного агрегата, вышедшего из употребления, будут бережно восстановлены с помощью 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

Читать комменты и комментировать

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



Защитный код
Обновить

Форма для сообщения в виде пишущей машинки | | 2012-06-19 12:10:07 | | Статьи Web-мастеру | | В данном уроке мы разберёмся, как создать оригинальную форму для сообщений в виде пишущей машинки. Все основные функции данного агрегата, вышедшего из употребления, будут бережно восстановлены с | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: