Хаки и Скрипты Next Generation CMS : Текст и ссылки, Интерфейс, CSS : Текст 3D на CSS3

irbees2008 Опубликовано - 5 - октября Текст и ссылки

Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css hmlt
Демо:

Сегодня мы сделаем текст 3D,смотрится классно,можно использовать в качестве лого или названия сайта.Основная идея очень проста. Вы можете получить хороший эффект 3D объеденив нескольких слоев text-shadow .
И так приступим
1. Заключаем текст который хотим изменить в блок с id="text":

Код:

<div id="text">
	<h1>Это наш текст</h1>
	<h2>И это красиво!</h2>
</div>

2.В CSS добавляем :

Код:

#text {
	position:absolute;
	width:600px;
	height:120px;
	left:50%;
	top:50%;
	margin-left:-300px;
	margin-top:-60px;
	text-align:center;
	text-transform:uppercase;
	-webkit-tranform:translateZ(0);
	-webkit-transition-duration:0.05s;
	-moz-tranform:translateZ(0);
	color:#f3f3f3;
	text-shadow:0 0 1px rgba(0,0,0,.2);
}

2.И последнее ,перед /body добавляем скрипт :

Код:

<script type="text/javascript">
var text = document.getElementById('text'),
	body = document.body,
	steps = 7;
function threedee (e) {
	var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)),
		y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)),
		shadow = '',
		color = 190,
		radius = 3,
		i;

	for (i=0; i<steps; i++) {
		tx = Math.round(x / steps * i);
		ty = Math.round(y / steps * i);
		if (tx || ty) {
			color -= 3 * i;
			shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), ';
		}
	}

	shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)';

	text.style.textShadow = shadow;
	text.style.webkitTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
	text.style.MozTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
}

document.addEventListener('mousemove', threedee, false);
</script>

На этом все ,кому что не понятно,пишем комментарии

Можешь почитать и вот эту статейку "Это простенький график посещаемости на странице статистики сайта"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.