Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 25. Favicon сайта, трансформация элементов - свойство transform, вставка flash-анимации

Содержание курса

Favicon

favicon - это картинка размером 16×16px и расширением .ico, сейчас допускаются и другие расширения. Эта картинка отображается в левой части вкладки и результатах поиска (после индексации - обхода вашего сайта поисковыми роботами) и должна лежать в корне сайта.


В коде страницы фавиконка прописывается в элементе <head></head> при помощи тега <meta> на главной (индексной) странице сайта следующим образом:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>favicon</title>
			<meta rel="icon" href="/favicon.gif" type="image/x-icon" />
		</head>

Трансформация элементов - свойство transform

При помощи трансформации - свойства transform - с элементом можно делать всё, что угодно. Начнём с функционала поворот rotate(). Обратите внимание на пояснения в виде комментариев в самом коде:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Трансформация элементов</title>
			<style>
			
				.out {
					width: 500px;
					height: 300px; 
					background: #99f; 
					margin: 100px 0 0 100px;
					}
				
				.in {
					width: 200px; 
					height: 100px;
					background: #fc0; 
					transform: rotate(15deg);
					/*поворот по часовой стрелке на 
					15 градусов*/ 
					transform-origin: left top; /*указали точку 
					привязки трансформации*/ 
					box-shadow: 10px 5px 4px ; 
					 /*задали свойство тени*/ 
					border: 5px solid #fff;
					border-radius: 5px;
					}
			
			</style>
		</head>
		<body>
		
			<div class="out">
				<div class="in"></div>
				<p>Text text text</p>
			</div>
			
		</body>
	</html>

Результат отображения:

Свойство transform-origin - это указание точки привязки вращения элемента, в его значении указываются проценты точки привязки - 0% 0% - левый верхний угол; можно указать координаты в пикселях или использовать ключевые слова left right top bottom.

Свойство box-shadow - создание тени элемента, в его значении указываются в пикселях смещение по оси X, по оси Y, растушёвка и цвет с прозрачностью в формате rgba - box-shadow: 10px 5px 4px rgba(0,0,0,0.6) - смещение по оси X 10px, по оси Y 5px, растушёвка 4px.

Функционал translate - смещение элемента, в его значении указываются в пикселях смещение по оси X и по оси Y - transform: translate(40px, 0)- смещение по оси X на 40px. Положительное значение - вправо (вниз), отрицательное - влево (вверх).

Вставка flash

Вставка flash осуществляется при помощи элементов <embed></embed> и <object></object> - эти элементы относятся к группе элементов с замещаемым контентом, в них можно поместить что угодно.

Файлы flash-анимации имеют расширение .swf. На мобильных устройствах, прежде всего "apple" flash-анимация не поддерживается.

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Вставка flash</title>
			<style>
			
				html {
					background: #cfc;
					text-align: center;
					}
			
			</style>
		</head>
		<body>
		<h1>Вставка flash</h1>
			<embed src="flash.swf" width="140" height="100" 
				type="application/x-shockwave-flash" menu="false" >
		</body>
	</html>

Атрибут menu со значением "false" сокращает меню флеш-анимации при клике правой кнопкой мыши.


Результат отображения:

Тег <object> - брат-близнец тега <embed> - также относится к группе элементов с замещаемым контентом, но имеет несколько другой синтаксис. Он делает тоже самое, что и тег <embed>:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Вставка flash</title>
			<style>
			
				html {
					background: #cfc; 
					text-align: center;
					}
			
			</style>
		</head>
		<body>
		<h1>Вставка flash</h1>
		
			<object width="140" height="100" 
			type="application/x-shockwave-flash" menu="false" >
				<param name="menu" value "flash.swf" > <!--Для старых IE-->
				
				<param name="menu" value "false" >
					<param name="wmode" value "opaque" >
					
					<p>Ваш браузер не поддерживает flash</p>
					
			</object>
			
		</body>
	</html>

Атрибуты width и height как в первом, так и во втором случае задают размеры для флеш-плеера.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля