Web Scripts

Как конвертировать scss или sass в css

Все проще чем вы думали! Для начало, перед тем, как работать с sass или scss у вас должен быть установлен sass, для этого достаточно в командной строке написать следующее: npm install -g sass Это сработает, только, если у вас установлен Node.js, если же нет, то нужно установить! Работаем с SCSS Дальше для теста, создаем папку […]

  • 17-09-2019
  • 4273
  • 4

Web Scripts

Адаптивный анимированный аккордеон HTML, CSS, JS

Что если вам надо сделать аккордион, не используя при этом стороние библиотеки? Нашел на просторах интернета очень классный вариант анимированного аккордиона на чистом JS Анимированный аккордеон HTML <div class=»accordion»> <dl> <dt> <a href=»#accordion1″ aria-expanded=»false» aria-controls=»accordion1″ class=»accordion-title accordionTitle js-accordionTrigger»>First Accordion heading</a> </dt> <dd class=»accordion-content accordionItem is-collapsed» id=»accordion1″ aria-hidden=»true»> <p>Lorem ipsum dolor sit amet, consectetur <a href=»https://www.google.com»>Test</a>adipiscing […]

  • 28-08-2018
  • 2389
  • 0

Web Scripts

Красивый выпадающий список

Часто новички сталкиваются с проблемой оформления выпадающего списка. Так как с оригинальным select особенного ничего не сделаешь. Тогда на помощь приходит jQuery, и тогда можно сделать чуть ли не что угодно. А что если я скажу, что можно и стандартный HTML выпадающий список не плохо оформить на чистом CSS? Выпадающий список на HTML Цвет фона […]

  • 28-08-2018
  • 5131
  • 0

Web Scripts

Слайдер галерея для интернет магазина

В интернет магазинах часто можно увидеть слайдер галерею, где можно просмотреть фото товара с возможностью увеличить фото при наведении курсора. Это очень удобно для посетителя сайта, так как можно рассмотреть товар в деталях. Слайдер галерея Чтобы сделать такой слайдер, нам понадобиться следующее: jQuery Slick Slider Не будем изобретать велосипед, а возьмем готовый и быстрый слайдер, […]

  • 15-08-2018
  • 4221
  • 5

Web Scripts

Как сделать галерею со слайдером?

Галерея со слайдером, где вместо точек переключение слайда, которые обычно распологаются под блоком с основным слайдом, является картинка самого слайда. Т.е есть картинка, вы кликаете на нее и слайдер переключается. Так же есть возможность увеличить картинку или фотографию, если навести на нее курсор, при этом картинка будет перемещаться в зависимости от направлении курсора. Такой вариант […]

  • 28-06-2018
  • 3284
  • 0

Web Scripts

Как подключить google map с отметками?

Часто в некоторых проектах, на странице о нас или связаться с нами, просят вставить google map с отметкой по их адресу. А бывает и так, что адресов несколько и соответственно отметок должно быть несколько. А что если отметки должны быть кликабельны и при нажатии должен всплывать текст? Google map с отметками Первое, что надо сделать, […]

  • 28-06-2018
  • 4179
  • 0

Web Scripts

Крутые кнопки для вашего сайта

Кнопки, не мало важная состовляющая почти для каждого сайта. Ведь за кнопкой может стоят ценный функционал, который к примеру отвечает за отображения определенного контента, за отправку формы, за перелиновку и многое другое. В любом случае, если не на декстопную, то на мобильную версию 100% потребуется Кнопка bars Кнопка отправка сообщения Стилей получилось много, но кнопка […]

  • 27-06-2018
  • 2386
  • 1

Уроки верстки

Урок 4 — Мобильная версия

В этом уроке мы будем прописывать стили для мобильной версии. Мобильная версия определяется шириной экрана. Как определить ширину экрана с помощью CSS @media only screen and (max-width: 768px) { section h3{ font-size: 25px; } } Выше, мы задали стиль заголовку. Он сработает, если ширина устройства будет 768px или меньше Попробуем теперь преобразовать наш сайт, под […]

  • 15-06-2018
  • 4287
  • 2