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

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

Как делать треугольники на CSS

corner
Приветствую всех, кто оказался на страницах моего блога. Сейчас будем учиться рисовать треугольники на CSS. Уровень сложности здесь простейший, поэтому разобраться во всех тонкостях сможет даже совсем новичок. Создадим блок div без указания ширины и высоты:

1
<div class="corner1"></div>

И пропишем ему такие классы:

1
2
3
4
5
.corner1{
 border: 50px solid transparent;
 border-top: 50px solid #333;
 display: inline-block;
}

И вот такой треугольник мы в итоге получаем. У первого я сделал прозрачные границы, а у второго — видимые, для наглядности, чтобы было более понятно как это работает.

Точно таким же образом делаем и другие треугольники, вправо и влево:

1
2
3
4
5
6
7
8
9
10
11
.corner3{
  border: 50px solid transparent;
  border-right: 50px solid #333;
  display: inline-block;
}
 
.corner4{
  border: 50px solid transparent;
  border-left: 50px solid #333;
  display: inline-block;
}

Где применяются такие треугольники? Наиболее часто их можно встретить при стилизации всплывающих подсказок, а так же тегов. Но что делать, если нужен нестандартный треугольник. К примеру вот такой:

подсказка

Для самой подсказки стили будут такими:

1
2
3
4
5
6
7
8
9
10
.corner5{
  background: #333;
  padding: 3px 10px;
  display: inline-block;
  color: #fff;
  font-size: 20px;
  border-radius: 3px;
  bottom: 20px;
  position: relative;
}

А для уголка к ней будем использовать псевдокласс :before и css трансформацию.

1
2
3
4
5
6
7
8
9
.corner:before{
  content: "";
  border: 5px solid transparent;
  border-top: 22px solid #333;
  position: absolute;
  top: 20px;
  transform: rotate(30deg);
  left: 5px;
}

Конечно создание треугольников на CSS этим не ограничивается и существует еще масса вариантов их применения. Можно рисовать ленты с тенями и много других элементов веб дизайна.

Модальное окно на JS и CSS своими руками

popup

Всем привет. Сегодня будем делать самостоятельно модальное окно с использованием чистого JavaScript и CSS. Подобные попап окна очень хорошо делать на jQuery, как это показано в этом примере, но бывают случаи, когда нет необходимости подключать тяжеловесную библиотеку к простой странице. Тем более, что пишется это все в несколько строчек JS кода.

Демо

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

popup-mobile

Давайте начнем с разметки страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="box">
  <input type="button" value="button" id="btn" />
  <p>POPUP CONTENT</p>
  <div id="popup">
    <header>
      <span id="close">+</span>
    </header>
    <div class="content">
      <p>POPUP CONTENT</p>
      <img src="Copy of Stopwatch.svg" width="100" alt="" />
    </div>
    <footer></footer>
  </div>
</div>
<div class="overlay" id="overlay" style="display:none;"></div>

Следующим шагом будет добавление 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
body {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #d9d9d9;
  font-family: Arial;
}
 
.box {
  width: 90%;
  height: auto;
  background: #fff;
  border-radius: 4px;
  margin: 0 auto;
  z-index: -9999;
  padding: 10px;
}
 
input[type="button"] {
  margin-left: 5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#04b709), to(#005d0b));
  background: linear-gradient(#04b709, #005d0b);
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 5px 12px;
  color: #ddd;
  cursor: pointer;
}
input[type="button"]:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(#005d0b), to(#04b709));
  background: linear-gradient(#005d0b, #04b709);
}
 
#popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%;
  height: 250px;
  -webkit-box-shadow: 0 10px 15px #222;
          box-shadow: 0 10px 15px #222;
  border-radius: 5px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-animation: animate 0.5s ease-in-out;
          animation: animate 0.5s ease-in-out;
  background: #fff;
  text-align: center;
  z-index: 999;
}
 
img {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
 
#close {
  position: absolute;
  right: 5px;
  top: -5px;
  cursor: pointer;
  font-weight: bold;
  color: #fff;
  font-size: 35px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  display: block;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#close:hover {
  color: #d9d9d9;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
 
.left {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-animation: left 0.3s ease-in-out;
          animation: left 0.3s ease-in-out;
}
 
header {
  width: 100%;
  height: 30px;
  background: #00d87e;
  border-radius: 5px 5px 0 0;
}
 
footer {
  width: 100%;
  height: 30px;
  background: #00d87e;
  border-radius: 0 0 5px 5px;
  position: absolute;
  bottom: 0;
}
 
.overlay {
  background: rgba(0, 0, 0, 0.8);
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
 
@-webkit-keyframes animate {
  0% {
    opacity: 0.5;
    top: -100px;
    z-index: 1;
  }
  100% {
    opacity: 1;
  }
}
 
@keyframes animate {
  0% {
    opacity: 0.5;
    top: -100px;
    z-index: 1;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  #popup {
    width: 50%;
  }
}

И в заключении подключим JS файл и напишем следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
var popup = document.getElementById('popup'),
  btn = document.getElementById('btn'),
  close = document.getElementById('close'),
  body = document.getElementsByTagName('body');
  btn.onclick = function () {
	  popup.style.display = 'block';
	  document.getElementById("overlay").style.display="block";
 };
  close.onclick = function () {
    popup.style.display = 'none';
    document.getElementById("overlay").style.display="none";		
    }

На этом все. Открытие модального окна происходит после нажатия на кнопку, а закрыть его можно, кликнув на крестик в правом верхнем углу. К нему я добавил для красоты эффект вращения на 360 градусов по часовой стрелке при наведении. В само окно поставил SVG анимацию.

Media Screen CSS в адаптивной верстке

Пришло время разобраться, что такое Media Screen в CSS3 и как это применять в своих проектах. Это так называемые Медиа-запросы CSS, с помощью которых можно адаптировать элементы дизайна под разные размеры экранов. Например можно скрыть определенный блок на мобильных и наоборот показывать его только на широких экранах (десктопах). Как я с этим столкнулся. На клиентском сайте логотип на мобильных съезжает вправо, на компьютерах он наоборот слева. Была поставлена задача написать текст, который будет показан слева от лого на маленьких экранах. На больших его быть не должно. На выручку как раз и пришли медиа-запросы Media Screen CSS. Я знаю, что многие из вас очень любят, когда им показывают наглядно, поэтому приготовил пример.

Media-screen примеры

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

Адаптивная страница

CSS код сейчас такой:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#header{
	height:120px;
	position:relative
	padding:5px;
}
#content{
	background:#fff000;
	padding:5px;
}
p {
    padding: 5px;
}	
 .txt {
    font: 65px Verdana bold;
    position: relative;
    top: 16px;
    color: #fff;
    left: 80px;
   }
img{
     margin:5px;
}

Ставим пред собой задачу на экранах шириной меньше 1000 px изменять цвет текста, фона, покрасить шапку, сместить значок вправо, а слева от него будет появляться надпись. И выглядеть это будет вот так:

Page Responsive

То есть мы произведем кардинальные изменения на странице средствами Media screen 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
 @media screen and (max-width: 1000px) {
#header {
	background:#543567; /* Красим шапку */
	}
   }
 @media screen and (min-width: 1000px) {
 .txt {
      font: 25px Verdana bold; /* Показываем заголовок */
      position:relative;
      top; 15px;
      left: 30px;
      display:none;	
	}
   }
@media screen and (max-width: 1000px) {
#content {
	 background:#657493; /* Меняем цвет текста и фона содержимого */
	 color:#fff;			
	}
   }
@media screen and (max-width: 1000px) {
    img {
	float:right; /* Смещаем логотип вправо */			
	}
   }

Более подробно можно посмотреть код демонстрационной страницы и самостоятельно разобраться что к чему.

Демо

Изменяйте ширину окна браузера, чтобы увидеть изменения. В Хроме есть функция просмотра на разных устройствах. Клавиша F12 Фактически в Media screen CSS мы создаем новые правила, которые вступят в силу только при определенных условиях. В данном случае, если дисплей будет меньше или равен 1000 px. Если будет больше, то ничего меняться не будет.

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

1
<link rel= "stylesheet" href= "device.css" media= "only screen and (max-device width:640px)"/>

Можно так же взять готовые стили из Bootstrap CSS и подогнать под свой дизайн.

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

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

Демо

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

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

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

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

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

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

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

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

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

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

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

СКАЧАТЬ

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

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

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