Архив месяца: Март 2019

Прелоадер для сайта на 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();
});
});

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