CSS

Как сделать кнопку «наверх» / to-top с плавной прокруткой
Как сделать кнопку «наверх» / to-top с плавной прокруткой

Здравствуйте! В сегодняшнем уроке, рассмотрим реализацию простого кода кнопки «вверх» на Html, jquery и css.

Как и всегда, приступаем к рассмотрению HTML кода. Сегодня он будет довольно примитивный:


<div class="to-top" data-btn="toTop">
	&#10145;
</div>

где:
to-top — класс, используя который мы будем стилизировать нашу кнопку
data-btn="toTop" — дата-атрибут, используя который мы будем отслеживать события скрола и клика по кнопке (да-да, мы можем это сделать и по классу «to-top», я же остановился на дата-атрибуте)

читать полностью...

Как написать самый простой скрипт степпера
Как написать самый простой скрипт степпера

В этой статье рассмотрим разработку простейшего скрипта степпера. Степпер — такой скрипт, который переключает экраны/слайды по нажатию на кнопки вперед или назад. Определения так себе, но думаю по примеру будет понятнее что это такое и для чего оно нужно.

Лично мне, приходилось раза два или три использовать примерную реализацию данного скрипта в своих работах. И подумал я, почему бы не написать нормальную заготовку для будущих подобных задач, и выложить ее в качестве статьи блога.

Подключаем библиотеки

Нам понадобится:

  1. bootstrap. Нам он просто облегчит подключение шрифтов и визуализацию кнопок
  2. font-awesome. От него мы получим три иконки (стрелка назад, вверх и вперед)
  3. animate.css, для простенькой анимации (вам никто не мешает использовать чистый css для этого)
  4. jquery, да-да, пора от него отказываться и отлавливать события на чистом JS. Но пока что лень)

А выглядит это так:

<link rel="stylesheet" href="../library/bootstrap-4/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../library/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../library/animate.css/animate.min.css">
<script src="../library/jquery/dist/jquery.min.js"></script>

читать полностью...

Как сделать табы на flexbox и jQuery
Как сделать табы на flexbox и jQuery

В этом уроке рассмотрим, как самостоятельно реализовать дружественные СЕО табы на flex и jQuery.
Наш код будет разделен на три части.

HTML код

Первое. HTML код без которого никуда:

<div class="tabs" data-tabs="name">
	<ul class="tab-items">
		<li class="tab__item active" data-tab-item="tab-item-1">
			Вкладка 1
		</li>
		<li class="tab__item" data-tab-item="tab-item-2">
			Вкладка 2
		</li>
		<li class="tab__item" data-tab-item="tab-item-3">
			Вкладка 3
		</li>
	</ul>

	<div class="tab-contents">
		<div class="tab__content active" data-tab-content="tab-item-1">
			Содержимое вкладки 1
		</div>
		<div class="tab__content" data-tab-content="tab-item-2">
			Содержимое вкладки 2
		</div>
		<div class="tab__content" data-tab-content="tab-item-3">
			Содержимое вкладки 3
		</div>
	</div>
</div>

грубо говоря, наш код состоит из трех частей:

  1. Обертки для табов, с названием одной группы. Это задано в дата-свойстве «data-tabs».
  2. В наших табах (или вкладках). Где у каждой вкладки есть свое название, определенное в свойстве «data-tab-item». Название данного свойства должно совпадать с одним из названий свойств «data-tab-content» в блоках хранящих содержимое вкладок (табов).
  3. Содержимое табов, обернутое в класс «tab-contents». Каждое содержимое таба имеет свойство «data-tab-content», и должно совпадать с одним из свойств вкладок «data-tab-item». Данные свойства служат для сопоставления того, какой таб, какое содержимое должен отображать.

читать полностью...

Как сделать автоматически расширяемое поле на чистом CSS3
Как сделать автоматически расширяемое поле на чистом CSS3

Все доброго времени и хорошего настроения.

Т.к. в последнее время мне пришлось податься в верстку, то некоторые статьи будут посвящены HTML5, CSS3, Flexbox и прочим подобным вещам. Знающим программистам данные уроки могут показаться достаточно простыми. Но возможно, вы все же сможете почерпнуть для себя что-то новенькое а может быть найдете более простое решение тому чем пользуетесь на данный момент.

читать полностью...

Как сделать гамбургер кнопку на HTML и CSS
Как сделать гамбургер кнопку на HTML и CSS

В данной статье рассмотрим простейший пример реализации анимированный кнопки-гамбургер (hamburger).

Похожие кнопки вы наверняка встречали в сайтах с мобильной адаптацией. В bootstrap 3/4 версии так же можно найти такую кнопку.

читать полностью...