Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 5 - октября Текст и ссылки
2921 - 0
  • Адаптировал: 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>
На этом все ,кому что не понятно,пишем комментарии

Можешь почитать и вот эту статейку "Выводим интересный вариант меню для вашего сайта"

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4011 дней
  • Новостей: 564
  • Комменты: 254
  • Зарегистрированно : 642
  • Онлайн всего: [5]
  • Гости: [4]
  • Поисковики: [1] Google
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 33
  • Генерация страницы: 0.391сек
  • Потребление памяти: 5.166 Mb 
  •   Яндекс.Метрика