Сегодня мы сделаем текст 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>

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

Пришло время адаптивных сайтов, продолжаем эту тематику в галерее, одинаково хорошо отображаемой как на компе, так и на мобильных устройствах. В галерее используется плагин lazyload - отложенная загрузка картинок, который позволяет экономить трафик. При наведении курсора на изображение отображается краткое описание, а по клику происходит показ полной версии изображения. По умолчанию изображения формируются случайным образом на странице.
Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам gallery_least.zip (2.68 Mb)[/is-logged] ,заливаем в папку вашего шаблона.
Этот код размещаем между body :

Код:

 <section>
    <ul id="gallery">
        <li id="fullPreview"></li>
       
        <!--  один элемент галереи -->
            <li>
                <a href="images/p1.jpg"></a>
                <img data-original="images/t1.jpg" src="img/effects/white.gif" alt="Фото 1" />
 
                <div class="overLayer"></div>
                <div class="infoLayer">
                    <ul>
                        <li>
                            <h2>Заголовок фото</h2>
                        </li>
                        <li>
                            <p>Краткое описание изображения</p>
                        </li>
                    </ul>
                </div>
                <div class="projectInfo">
                    Полное описание изображения
                </div>
            </li>
        <!--  /один элемент галереи -->
    </ul>
</section>

Для работы галереи в хеад подключаем следующие скрипты и стили:

Код:

 
<link href="{tpl_url}/css/least.min.css" rel="stylesheet" type="text/css" />
<!-- jQuery libary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- least.js JS-file -->
<script src="{tpl_url}/js/least.min.js"></script>
<!-- Lazyload JS-file -->
<script src="{tpl_url}/js/jquery.lazyload.js"></script>

Вызов плагина :

Код:

 $(document).ready(function(){
    $('#gallery').least();
});

Опции:
'random': true/false (по умолчанию true - включено)
'lazyload': true/false (по умолчанию true - включено)
Здесь можно подключить любой плагин,последние новости,популярные,и т .д.