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

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

Как написать CSS правила только для IE

Пишем стили для IE

Всем привет. Если при верстке сайтов с использованием современных инструментов, таких, как Flexbox или Grid, вы получаете огромное удовольствие от того, насколько классно страница выглядит в современных браузерх. Но попробуйте открыть ее в IE 8 и вы поймете, на сколько все печально. Здесь мы разберем как написать CSS стили только для Internet Explorer. Надеюсь, что совсем скоро мы забудем о нем, как о страшном сне, но пока IE еще рано списывать со счетов.

Статистика посещаемости с браузера Internet ExplorerЭто годовая статистика посещаемости моего блога через IE. Траблы начинаются с версии 9- . Как видно на скриншоте с IE-8 заходит не так много посетителей. Но Сайт сайту рознь, поэтому у вас эти показатели могут быть значительно выше.

CSS только для IE

Проблему решить действительно можно. Есть даже специальный термин под названием: «Изящная деградация». Это когда вы делаете сначала под современные браузеры со всеми прибамбасами и плюшками, а затем пишете CSS стили специально для тех, которые их не поддерживают. Этим мы с вами сейчас и займемся. Сразу скажу, что Media запросы мало чем нам помогут. Но прежде, чем кодить CSS для IE важно понимать для чего мы это делаем. Представьте ситуацию, когда пользователь зашел на сайт с поехавшей версткой, какое у него останется впечатление? В большинстве случаев негативное. А что ели страница выглядит не поехавшей, а немного не так, как, например в Google Chrome и все элементы стоят на своих местах? В таком случае отношение будет не негативное, просто оно будет другим, вот и все.

Именно поэтому имеет смысл писать CSS стили специально для IE. В моем случае стили для версии меньше, чем IE-8 прописывать не имеет смысла. Как это делается:

1
2
3
4
5
6
7
<!--[if IE 8]>
  <style>
   body{
    background: red;
   }
  </style>
< ![endif]-->

Или же так:

1
2
3
<!--[if IE 8]>
  <link rel="stylesheet" href="IE.css"/>
< ![endif]-->

Пишется это в head. Называется: Условные комментарии. Эти правила будут полностью проигнорированы новыми Browsers воспримутся только Internet Explorer-ом. Но это еще не все. Еще одна идея написания стилей только для IE заключается в создании дополнительных классов. Если реализовать вот так:

<!--[if IE]><html class="ie">< ![endif]--></html>

CSS:

1
2
3
.ie body{
  background: red;
}

Честно говоря мне этот способ нравится больше. Тем более, что можно указать if IE и это сработает для всех версий начиная с 9-й и ниже.

Прелоадер для сайта на CSS и jQuery

preloader-css

Привет, ребята! В этом материале вы узнаете как сделать прелоадер для сайта с использованием CSS и jQuery. Он нужен в тех случаях, когда скорость загрузки вашего сайта оставляет желать лучшего. Мы не будем заморачиваться с GIF картинками, а напишем preloader на чистом CSS. И реализуем вариант, который применяется на Яндекс метрике при загрузке данных с сервера. И давайте сразу перейдем к примеру. Но для того, чтобы увидеть предзагрузчик, нужно понизить скорость соединения, так как данных на странице слишком мало и она грузится моментально. В хроме жмите F12 — вкладка Network и выберите низкую скорость (Slow 3G), так же установите галочку: Disable cach.

network-chrome
Демо

Создаем красивый прелоадер на CSS

Перед этим создадим слой, который будет перекрывать содержимое HTML документа, пока все не загрузилось до конца. Его желательно установить сразу после открывающего тега body. А после него уже сам прелоадер.

<div class="overlay"></div> // overlay
<div class="preloader"></div> // preloader

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
.overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #333;
    top: 0;
}
.preloader{
    width: 50px;
    height: 50px;
    border: 6px solid transparent;
    border-bottom: 6px solid #fc0 ;
    border-left: 6px solid #fc0 ;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: animate 1s infinite linear;
}
/* Анимируем наш прелоадер */
@keyframes animate{
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}

Скрипт

1
2
3
4
5
<script>
$(document).ready(function() {
  $('.preloader, .overlay').fadeOut();
});
</script>

Тут мы говорим, что когда документ будет полностью загружен, то прелоадер и слой перекрытия скроется из вида. Это можно сделать и на чистом JS, но что-то мне подсказывает, что в современном вебе его мало кто использует. Но если очень нужно — пишите об этом в комментах. Теперь у нас есть готовый и очень простой прелоадер для сайта и даже не пришлось искать для этого генераторы? а обошлись всего лишь CSS и jQuery. Поставить можно на Joomla, WordPress, Bitrix и любые другие CMS.

Необычные CSS тени для блоков

css-shadow

Привет, ребята. Про CSS тени уже есть на блоге материал, но мы идем дальше и будем делать не совсем обычные и стандартные эффекты, а разберем как сделать тень блока в css при помощи псевдоклассов before и after. На сегодняшний день у всех этих свойств довольно сильная поддержка браузерами, поэтому можно смело применять в своих проектах. Для начала взгляните на примеры теней для блоков.

Демо

Создадим первый вариант исполнения, как на странице. Будем делать тень внизу блока слева и справа. Выглядит как прилипающий стикер. Понять это очень просто. Мы нарисуем еще 2 блока (before и after), повернем их по своей оси (rotate) на пару градусов и поместим под основной div. Только есть один маленький нюанс, без которого у вас ничего не поучится. Нужен родительский элемент, у которого будет свойство z-index с любым значением, а у псевдокласса он должен быть отрицательным, например -1, чтобы он разместился под основным блоком. Пишем HTML:

<div class="content">
  <div class="block">Первый блок</div>
</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
.content{
    z-index: 1;  
}
.block{
    width: 40%;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-bottom: 40px;
    position: relative;
    background: #fff;
}
.block:before{
	position: absolute;
	content: "";
	width: 50%;
	height: 20px;
	bottom: 7px;
	left: 5px;
	background: transparent;
	transform: rotate(-3deg);
	z-index: -1;
	box-shadow: 0 11px 10px -2px #676767;
}
.block:after{
	position: absolute;
	content: "";
	width: 50%;
	height: 20px;
	bottom: 7px;
	right: 5px;
	background: transparent;
	transform: rotate(3deg);
	z-index: -1;
	box-shadow: 0 11px 10px -2px #676767;
}

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

Добавить страницу в закладки браузера на jQuery

bookmark

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

Первый и самый простой в исполнении, это при клике по ссылке или кнопке показать всплывающий alert с текстом-предложением добавить страницу в закладки. Делается это очень просто:

HTML

1
<span class="selector">Добавить в закладки</span>

jQuery

1
2
3
4
5
$(function(){
  $('.selector').click(function(){
    alert('Нажмите сочетание клавиш Ctrl + D');
  })
});

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

HTML

1
2
<div class="modal-offer">Нажмите сочетание клавиш Ctrl + D<span>&times;</span></div>
<a class="bookmark" href="#">Добавить в закладки</a>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.modal-offer {
    width: 250px;
    height: 100px;
    position: fixed;
    top: -160px;
    left: 50%;
    transform: translate(-50%, 0);
    background-image: linear-gradient(to right, #ccc, #fdf, #ccc);
    padding: 10px;
    border-radius: 4px;
    z-index: 3;
    box-shadow: 0 10px 14px 0;
}
.modal-offer span { /* Крестик закрытия окошка */
    position: absolute;
    top: -6px;
    right: 6px;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
}

Обратите внимание, что position обязательно нужно указывать fixed, иначе при прокрутке страницы сообщение никто не увидит. Добавим код-обработчик.

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
 $('.bookmark').click(function(){
  $('.modal-offer').animate({
    top: 10
   });
})
$('.modal-offer span').click(function(){
  $('.modal-offer').animate({
    top: '-160px'
    });
  })
});

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

HTML

<span class="selector">Добавить в закладки браузера</span>

jQuery

1
2
3
$('.selector').click(function(){
    $(this).html('<b>Нажмите сочетание клавиш Ctrl + D</b>').css('color', 'red');
 })

Все примеры на одной странице
Демо

Теперь вы знаете как добавить страницу в закладки браузера с применением библиотеки jQuery. Все ли вам было понятно в данном материале?

Адаптируем меню под мобильные устройства

Адаптивное меню для сайта

Всем привет! В предыдущей статье я показывал как сделать мобильное меню для сайта. Теперь пришло время выяснить как адаптировать обычное горизонтальное меню под маленькие разрешения экрана. В частности для планшетов и смартфонов. Помогут нам в этом CSS3 и медиа-запросы.

Демо

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

Для начала нужно определить точку (ширину экрана), при достижении которой наше меню будет меняться на мобильное. Можно сразу установить max-width: 768px (именно такое разрешение имеют большинство  популярных планшетов), но в моем случае смотрится довольно неплохо, поэтому постараемся вручную найти значение, при котором наш шаблон будет «ломаться». И это место находится на 593px. Теперь нужно написать CSS код для меню, которое мы собираемся адаптировать.

Но для начала нужно определиться, где оно будет располагаться, всплывать слева, справа или сверху. Будет логично, если оно будет появляться справа. Так и запишем. В HTML пропишем иконку гамбургера, overlay (затемнение фона) и крестик закрытия меню.

1
2
3
4
5
6
7
8
9
10
<ul class="mobile">
 <span>+</span>
  <li>О нас</li>
  <li>Услуги</li>
  <li>Цены</li>
  <li>Отзывы</li>
  <li>Контакты</li>
 </ul>	
 <span class="hamb"></span>
<span class="overlay"></span>
1
2
3
4
}
.mobile span, .hamb{
 display: none;
}

Код адаптивного меню

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
@media(max-width: 593px){
	.mobile{
		width: 250px;
		height: 100vh;
		background: #333;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: -250px;
		padding: 15px;
		font-size: 25px;
		z-index: 2;
		color: #fff;
 
	}
 
	.mobile li{
		margin-bottom: 20px;
	}
	.mobile li:last-child{
		margin-bottom: 0px;
	}
	.mobile span{
		display: block;
		position: absolute;
		top: -5px;
		right: 10px;
		font-size: 40px;
		transform: rotate(45deg);
		color: #fff;
	}
	.hamb{
	display: block;
	font-size: 35px;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
  $('.hamb').click(function(){
    $('.mobile').animate({
	right: 0
    });
$(this).hide();
 $('.overlay').fadeIn();
});
$('.mobile span, .overlay').click(function(){
  $('.mobile').animate({
	right: -250
  });
$('.hamb').show();
$('.overlay').fadeOut();
});
});

На этом все. В завершении проверяем страницу через адаптиватор. Пишите в комментариях свои мысли по этому поводу.