Бесплатные обучающие уроки

Эта рубрика целиком и полностью посвящена урокам на разные темы. Здесь содержаться статьи по компьютерной грамотности, уроки создания сайтов на HTML, CSS, PHP, CMS Wordpress и других, программировании на Javascript, работе в редакторе Adobe Photoshop и других программах, поисковой оптимизации и многих других.

Подключение и примеры использования Animate.css

Монитор ImacПривет. Напомню, что уже писал про плавность и анимацию в CSS3, но это были всего лишь базовые принципы. Сейчас же предлагаю ознакомиться с готовым набором свойств анимации в одном файле animate.css. Это не генератор, а библиотека, которая вполне корректно работает во всех популярных браузерах. И вы можете посмотреть вот эти примеры.

Демо

Подключение Animate.css

Если вы хотите сделать CSS анимацию картинки, текста, или кнопок для сайта и реализовать все это без использования Javascript, то необходимо всего лишь подключить один файлик, о котором уже говорилось выше, стандартным образом, то есть между тегами head.

<link rel="stylesheet" href="animate.min.css" type="text/css"/>

Вы сами можете решить, когда будет срабатывать CSS анимация, при клике, при наведении или же загрузке сайта, кому-то хочется пери скроллинге. По умолчанию все эффекты настроены таким образом, что проигрываются только один раз, когда страница сайта только что была загружена. Но лично меня интересовала циклическая или бесконечная анимация. И настроить это вполне реально.

<a href="#" class="animated tada">Ссылка</a>

Именно таким образом прописывается свойства анимации объектов. Пишем 2 класса, animated — обязательный, а tada — один из эффектов. Но нам нужен непосредственно цикл и сейчас мы это сделаем. Это можно сделать, создав новый класс и прописать к нему специальные свойства или же к уже существующему.

Циклическая анимация Animate.css

.tada{animation-iteration-count: infinite;}

То есть при создании своего класса, это будет выглядеть вот так:

<a href="#" class="animated tada new">Ссылка</a>
.new{animation-iteration-count: infinite;}

А чтобы вам было еще более понятно, что я тут пытался объяснить, то посмотрите это видео, где я наглядно демонстрирую на реальном примере как это работает, а так же скачайте сами стили.

СКАЧАТЬ

Как сделать текст по кругу в фотошопе

текст по кругу в фотошопеПриветствую вас на своем блоге. Когда-то я искал информацию о том, как написать текст по кругу в фотошопе, но оказалось, что сделать это на удивление просто? так же, как и круглые изображения. Я знаю целых два способа, которыми готов с вами поделиться. Ну что ж, как говорится — меньше слов, больше дела, поехали.

Итак, открывает программу Photoshop, создаем документ, подготавливаем необходимый фон, чтобы сделать круговой текст и начнем с первого метода. Берем инструмент «Овальная область», вызывается клавишей M. Зажимаем Shift и делаем круглое выделение. Круговое выделение в фотошопеЗатем жмем правой кнопкой по выделенному и в контекстном меню выбираем пункт Образовать рабочий контурОбразовать рабочий контур в фотошопеТеперь берем текст, ставим курсор на край круга и пишем, все, что вздумается. Получится что-то вроде этого.Пишем текст по кругу в Photoshop CS6Ну и второй вариант создания текста по кругу в фотошопе, который еще проще, чем первый. А вы уже сами выберете, какой именно подходит лично вам. Возьмем на этот раз «Эллипс» и создадим фигуру нужного нам размера. И можно сразу брать текст и писать.Text in Photoshop for circleКстати, для этих целей я использую версию Photoshop CS6 и она меня вполне устраивает. Иногда выходят очень даже художественные произведения, если можно так выразится. Хотя я далеко не художник, меня все больше уносит в геометрию, то есть работа с какими-то угловатыми объектами, текстом, нежели рисованием кистью, ретушью и прочими фишками, с которыми я справляюсь постольку-поскольку. На этом все, надеюсь, что вы тоже справились с тем, как создать текст по кругу в фотошопе. Вот мой результат, а так же смотрите видео.Photoshop text for circle

CSS3 эффект для изображений при наведении (hover)

hover эффект для изображенийЗдравствуйте, друзья. Есть у меня для вас отличный эффект для изображений с применением спецификации CSS3 и псевдокласса hover.  При наведении курсора мыши на картинку, она превращается в 3D модель и, тем самым привлекает внимание. И что самое главное, создано это все без JS скриптов. А чтобы не тянуть кота за хвост предлагаю посмотреть пример.

Демо

Эффект объемного изображения

Я уже писал об анимации в и о возможностях использования CSS, но там говорилось скорее о базовых принципах, нежели о чем-то серьезном. Но здесь уже принципиальной новый уровень эффектов для изображений, которые можно реализовывать на сайтах, а о том, где именно, поговорим немного позже. HTML разметка будет такая:

1
2
3
4
5
6
7
<div class="thumb">
   <!-- Изображение -->
   <a href="#">
	<!-- Надпись -->
        <span>Крутой Эффект При Наведении</span>
   </a>
</div>

В строковом параметре span будет появляться надпись с торца картинки. А вот и сам CSS код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.thumb {
	width: 740px; height: 400px; margin: 70px auto;
	perspective: 1000px;
}
.thumb a {
	display: block; width: 100%; height: 100%;
	/*double layered BG for lighting effect*/
	background: 
		linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
		url("images/6.jpg");
	/*disabling the translucent black bg on the main image*/
	background-size: 0, cover;
	/*3d space for children*/
	transform-style: preserve-3d;
	transition: all 0.5s;
}
.thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
/*bottom surface */
.thumb a:after {
	/*36px high element positioned at the bottom of the image*/
	content: ''; position: absolute; left: 0; bottom: 0; 
	width: 100%; height: 36px;
	/*inherit the main BG*/
	background: inherit; background-size: cover, cover;
	/*draw the BG bottom up*/
	background-position: bottom;
	/*rotate the surface 90deg on the bottom axis*/
	transform: rotateX(90deg); transform-origin: bottom;
}
/*label style*/
.thumb a span {
	color: white; text-transform: uppercase;
	position: absolute; top: 100%; left: 0; width: 100%;
	font: bold 12px/36px Arial; text-align: center;
	/*the rotation is a bit less than the bottom surface to avoid flickering*/
	transform: rotateX(-89.99deg); transform-origin: top;
	z-index: 1;
}
/*shadow*/
.thumb a:before {
	content: ''; position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.5); 
	box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
	transition: all 0.5s; 
	/*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/
	opacity: 0.15;
	transform: rotateX(95deg) translateZ(-80px) scale(0.75);
	transform-origin: bottom;
}
.thumb:hover a:before {
	opacity: 1;
	/*blurred effect using box shadow as filter: blur is not supported in all browsers*/
	box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
	/*pushing the shadow down and scaling it down to size*/
	transform: rotateX(0) translateZ(-60px) scale(0.85);
}

На мой взгляд получилось прикольное изображение с 3д эффектом, но остается один вопрос: где можно его применять? Самым подходящим местом будет, я считаю, на одностраничниках, их задача как раз сфокусировать посетителя на каком-то объекте, а этот hover эффект для изображений подойдет как нельзя лучше. На основных сайтах, блогах им, конечно, не место. например у себя я бы не стал такое размещать. Красиво? Безусловно, но здесь не какое-нибудь портфолио, а в большей степени информационный контент. Поэтому не нужно вставлять это для того, что бы просто было туда, где это не совсем уместно. И в завершении предлагаю скачать папку со всеми файлами.

СКАЧАТЬ

Иконки с эффектом Long Shadow или как сделать длинную тень в фотошопе

Long Shadow photoshopПривет,друзья. Речь пойдет о том, как очень быстро, легко и непринужденно делать красивые иконки с новомодным эффектом Long Shadow, что в переводе на русский означает длинная тень. Если лень читать. можете перейти сразу к видео. Для остальных скажу, что перепробовал кучу всяких Long Shadow Generator, но ни один из них ни в какую не хотел работать с моей версией фотошопа. Но решение вскоре нашлось. Возможно оно подойдет не для любой задачи, но для создания иконок — будет практически идеальным вариантом.

Как сделать Long Shadow

Сложно будет показать на скриншотах, как делается длинная тень в фотошопе с помощью экшена, поэтому предоставляю вам возможность увидеть все это действо своими глазами в видеоформате. Если потренироваться, то можно создавать значки в считанные секунды.

Скачать Long Shadow Action

И напоследок предлагаю вам скачать Long Shadow preset и уже пробовать самостоятельно создавать эффектные картинки с применением таких популярных эффектов. Подойдет так же для текста, написанного по кругу

СКАЧАТЬ

Появление объекта (кнопки) на странице через определенное (заданное) время

Появление кнопки на страницеЗдравствуйте, друзья. Вы наверняка уже видели, как на странице какого-нибудь товара, через определенное время появляется кнопка заказа. Например после просмотра видео. Я тоже совсем недавно искал решение, чтобы под видео установить кнопку и чтобы она появлялась только после просмотра видео (примерно). Способ решения этой проблемы я благополучно нашел и сейчас мы с вами его разберем и рассмотрим некоторые нюансы. Посмотреть пример можно на этой странице. Кнопка появляется через 5 секунд.

Демо

Вся эта конструкция работает на JavaScript. Вот такой у нее код:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="link"></div>
<script type="text/javascript">
var obj = document.getElementById('link');
var timerFIG = 50; // Время в секундах, через которое появляется кнопка
var timer = setInterval("startTimer()",1000);
function startTimer() {
if(timerFIG !== 1) {
timerFIG--;
} else {
clearInterval(timer);
obj.innerHTML = 'Код кнопки или другого объекта'; // кнопка
}}
</script>

В самом начале нужно прописать пустой div, а после него уже сам скрипт. Нюанс заключается вот в чем. Как вы заметили, кнопка появляется под видео, но время появления кнопки нельзя связать с временем видео. Отсчет начинается сразу после загрузки страницы. Пользователь может не сразу нажать на просмотр видео, а кнопка все равно появится. Но все равно это решение очень хорошо подойдет, если вы захотели сделать что-то подобное. Скорее всего большинство пользователей после загрузки страницы нажимают на просмотр видео, тем более если на странице кроме него больше ничего нет. Поэтому переживать из-за этого не стоит. 🙂