Верстка html - css- sass

 

 

Ссылка Transition Плавный на hover (решение 1) Transition Плавный на hover (решение 1) Transition Плавный (решение 3) с параметром скорости Gist Button Style Установка FontsAwesome и Инструкция! items-список блоком span внутри тэга <h3> Треугольный уголок Новая Секция Section в 2 команды CONVERTER CSS SASS Cursor-Pointer Border - ALL Darken - затемнение опорного цвета Lighten - Осветление опорного цвета Font's - вставка шрифта Padding - слева-справа-с верху-с низу .col-sm-10.col-sm-offset-1 OwlCarousel2 - Скачать и Документация Выравнивание адресного блока Центрирование текста - Global Class Групповое оборачивание в <span> <?> - что бы не кэшировался iMakerTxtFile - Создание текстовых файлов Починили ёрзание фона под MagnificPopUp Боремся с ПОДРАВНИВАНИЕМ текста у Items Состояние кнопки ПОСЛЕ НАЖАТИЯ Применение SASS/CSS стилей из GULP в MODX Перекраска стилей мобильного menu Плавный переход Меню к якорю Mouse-wheel СКРОЛЛ ДО ПОИНТА Responsive - Изображение в статье.. КАЧАЕМ ВЕБ-ШРИФТ С ЛЮБОГО САЙТА PRELOADER - ПРЕЛОАДЕР Добавить КНОПКУ-GO TO PARALAX - Делаем СЛАЙДЕР - Автоматический AKKORDION - Часто задаваемые вопросы Animate - Подключаем! ПУНКТЫ МЕНЮ Одинаковые ОТЗЫВЫ - КАРУСЕЛЬ + OVERLAY hidden-xs - прячем слово Transform + Rotate rgba - Процентное дозирование COLOR Адаптивим ТАБЛИЦУ ЦЕН Универсальный COLOR flip-container

 

 

 

 

    А почему не WordPress? Почему MODX?

 

 

 

Начинаем,

 

Делаем Ссылку

 

Ссылка в текущем ОКНЕ:

 

 

 

 

Ссылка в новом ОКНЕ:

 

 

 

 

     АТРИБУТЫ ССЫЛКИ:   

 

   accesskey     Активация ссылки с помощью комбинации клавиш.

   coords     Устанавливает координаты активной области.

   download     Предлагает скачать указанный по ссылке файл.

   href     Задает адрес документа, на который следует перейти.

   hreflang     Идентифицирует язык текста по ссылке.

   name     Устанавливает имя якоря внутри документа.

   rel     Отношения между ссылаемым и текущим документами.

  rev    Отношения между текущим и ссылаемым документами.

   shape     Задает форму активной области ссылки для изображений.

   tabindex     Определяет последовательность перехода между ссылками при нажатии на кнопку Tab

   target     Имя окна или фрейма, куда браузер будет загружать документ.

   title     Добавляет всплывающую подсказку к тексту ссылки.

   type      У казывает MIME-тип документа, на который ведёт ссылка.

 

 

Начнем:

   Плавный переход на hover  (решение 1)  

 

main.sass

 

 

Далее

 

   Плавный переход на hover  (решение 2)  

 

Добавим класс плавного изменения сразу в переменные:

 

 

 

и используем класс перехода:

 

 

 

Далее:

 

  Плавный переход на hover  (решение 3 универсальное)

 

 

И вызов соответственно:

 

 

Далее:

 

 

   Gist Button Style   

 

 

 

 

 

 

Далее:

 

   Установка и подключение FontsAwesome  

 

 

 

 

 

  <i class="fa fa-mobile"></i> +7 926 674 52 25  

 

 

  <i class="fa fa-image"></i>

 

 

   <i class="fa fa-angle-left"></i>  

 

 

  <i class="fa fa-angle-right"></i>  

 

 

 

 

 

 

 

 

 

 

 

 

Качаем  

 

  • Это уже подготовленный файл с правильным внутренним путем.

Другими словами: Нужно что бы был правильный путь до самого шрифта:        fontawesome-webfont.eot

 

 

 

   Элементарно! Путь до файла!   

 

А если скачивать      Font Awesome     с официального сайта - то будут другие пути.

 

 

И кладем папку с     в папку libs:

 

 

Далее:

 

 

ЭТО ЕЩЕ НЕ ВСЕ!

 

Переносим файлы со шрифтами:

 

 

   ГОТОВО! FontsAwesome - Подключен!  

 

 

   Как пользоваться:  

 

Идем на страницу иконок:

 

 

 

 

И стилизуем иконку:

 

 

Смотрим:

 

 

  Готово! 

 

 

Далее,

 

Items - списки:

 

 

Результат:

 

 

 

 

Далее,

 

span внутри тэга <h3>

 

 

 

Padding и margin - оформление

 

 

 

 

 

 

Однако - при уменьшении экрана - фото все же репитится !

 

 

Что бы этого не было:

 

 

 

Конвертер CSS > SASS

 

 

 

Далее

 

Треугольный уголок SASS

 

Тут урок очень редкий)

 

 

html:

 

 

sass:

 

Готово:

 

 


 

    Цветные треугольники:   

 

   SASS  

 

.text-otzivi
&::before
content: ''
position: absolute
border-top: 30px solid $btn
border-bottom: 30px solid $blue
border-left: 30px solid $red
border-right: 30px solid $accent
left: 185px
top: 260px

 

 


 

Далее

 

Новая Секция Section в 2 команды
 
 
1)
 
 
section.s-wide.s-works
 
 
 
2)
 
 
.container>.row>h2{Выполненные работы}
 
 

3)

 

Более подробный сниппет:

 

 .container>.row>.col-sm-12>h2{Выполненные работы}  
 
 
 

 

 

   Кроме того, снип по созданию Item's:  

 

    .col-sm-4{ Item новый }*3    

 

 

  Например таких Items:  

 

 

 

И отдельно создать новый обернутый заголовок:

 

    h4{Валентина Петровна}   

 

Результат:

 

 

 

Далее,

 

CONVERTER CSS SASS

 

 

 

 

 

Далее

 

Cursor-Pointer

 

  cup  

 

  cursor: pointer  

 

 

 

 

Далее,

 

Внутренний border

 


 

Border color:

 

   bc#f   

 

Срабатывает со 2-го раза:

 

Результат:

 

    border-color: #fff  

 


 

Border Radius:

 

   brs2  

 

 


 

Border-none:

 

   bdn  

 

 

Border-Bottom-4px-Solid:

 

   bb4-s  

 

 

 


 

Border-RGBA:

 

 

 

 


 

 

 

 bd1-s 

 


 

 

    bd5-s-$accent   

 

 


 

 

  brs10em 

 


Box-shadow:

 

  bxs  

 

    box-shadow: rgba($gray_text,.35) 5px 5px 7px  

 

 

 

 

  box-shadow: $grey_2 0 0 0 5px inset  

 

 

 

 

 

Далее

 

       ЗАТЕМНЕНИЕ ОПОРНОГО ЦВЕТА        

 

 

 

 

Далее,

 

 

       ОСВЕТЛЕНИЕ ОПОРНОГО ЦВЕТА        

 

 

 

 

Далее,

 

 

< ПРОЦЕНТНОЕ ДОЗИРОВАНИЕ ЦВЕТА >

 

 

 

 

Далее

 

Универсальный COLOR

 

 

 

 

 

Далее

 

 

 

Fonts шрифты:     Ковычки только МЕНЯТЬ!!!  

 

font-family: "RobotoRegular_azorr", sans-serif

 

font-family: "RobotoBold_azorr", sans-serif

 

font-family: "Exo2Bold_azorr", sans-serif

 

font-family: "OpenSansBold_azorr", sans-serif

 

font-family: "OpenSansLight_azorr", sans-serif

 

font-family: "OpenSansRegular_azorr", sans-serif

 

font-family: "OpenSansSemiBold_azorr", sans-serif

 

 

Далее

 

   padding: 40px 20px 20px  

 

 

 

Далее

 

 

Bootstrup колонки col-sm-12

 

 

    .col-sm-10.col-sm-offset-1   

 

    .col-sm-8.col-sm-offset-2  

 

    .col-sm-6.col-sm-offset-3  

 

    .col-sm-4.col-sm-offset-4  

 

    .col-sm-2.col-sm-offset-5  

 

 

 

 

 

Далее

 

 

OwlCarousel2 - Скачать и Документация

 

Плагин Owl Carousel 2 + Документация:

 

 

 

Далее,

 

Выравнивание адресного блока

 

 

 

 

Далее

 

 

Центрирование текста - Global Class

 

 

 

 

Далее

 

Групповое оборачивание в <span>

 

 

Далее

 

<?> - что бы не кэшировался

 

 

 

  '!'   - Означает Не кэшировать данные!

 

 

  ++   - Означает, что мы вводим какое то Системное значение!

 

 

 

Далее,

 

 

 

iMakerTxtFile - Создание текстовых файлов

 

 

А здесь рассмотрим, как быстро создавать текстовые файлы в паке на MAC.

 

Качаем программку    iMakerTxtFile  

 

Например здесь:
https://sageleo.com/wp-content/uploads/2017/05/iMakerTxtFile.zip

 

Распаковываем в папке и далее один ньюанс:

 

Для того чтобы перенести Значек программы ( иконку ) на панель папки - необходимо  Разрешить  использование сторонней программы  в настройках  самого MAC:

 

 

 

    Разрешим     нужную программу:

 

 

 

И затем, перетащим иконку программы на панель папки удерживая   (Comand)     Cmd  

 

 

 

 

Теперь для создания текстового файла - кликнуть на иконке (на панели папки) и получим окно создания файла:

 

 

 

 

     Готово! Работает! Файлы создаются!    

 

 

Далее

 

 

Починили ёрзание фона под MagnificPopUp

 

 

Что конкретно МЫ сделали:

 

Удалили  в    main.sass   этот код:

 

 

Кроме того: Исправляем ошибку МОРГАНИЯ ТЕМНОГО ФОНА при СТАРТЕ сайта:

 

 

 

И обязательно для некоторых секций мы  зададим ТИПОВОЙ (ОДИНАКОВЫЙ) - Background!!!

 

 

Отлично!

 

Что еще))

 

ИСПРАВИЛИ ГЕНЕРАЦИЮ ФАЙЛА ВСЕХ БИБЛИОТЕК:

 

 

Что мы сделали:

 

 

 

И поработаем над    GULP - файлом:

 

 

 

И добавим этот ТАСК    "scripts"    в вызов ТАСКА    "watch" 

 

 

 

 

Отлично!  Теперь все библиотеки у нас собираются в один ФАЙЛ.

 

 

Далее,

 

 

И боремся с ПОДРАВНИВАНИЕМ ТЕКСТА у Items

 

 

при ЗАГРУЗКИ страницы (Потому как при РЕ-САЙЗЕ страницы - проблем нет! )

 

 

 

И еще добавим ТЭГ переноса для страховки в сами Item-s:

 

 

 

 

 

 

Далее,

 

Состояние кнопки ПОСЛЕ НАЖАТИЯ

 

Смотрим все состояния кнопок:

 

 

И собственно делаем это:

 

 

Это все! Все нажатия будут как на 1-м скрине.

 

 

Далее,

 

 

Применение SASS/CSS стилей из GULP в MODX

 

Мы спокойно можем стилизовать наш локальный сайт запущенный под GULP с удобным препроцессором SASS в CSS, - а затем, применить все стили, скомпилированные в файл:

 

 

для этого просто копируем файлик на сервер:

 

 

 

 

    Отлично! Стили применены для сайта размещенного на удаленном хостинге!   

 

 

Далее

 

 

Перекраска стилей мобильного menu

 

 

 

 

ЕЩЕ Я ПЕРЕКРАШИВАЛ ПУНКТЫ МЕНЮ:

 

 

 

Далее,

 

Адаптивим ТАБЛИЧКУ ЦЕН:

 

 

Что конкретно адаптивил:

 

 

 

 

 

Далее

 

 

Плавный переход Меню к якорю

 

 

       ТЕОРИЯ  ПРОСТОГО ЯКОРЯ:     

 

КНОПКА:

 

Посадка секции КОНТАКТЫ

 

 

 

 

ЯКОРЬ - К КОТОРОМУ ПЕРЕХОДИМ:

 

 

 

 

КНОПКА КАК ЗАГОЛОВОК:

 

 

 

 

     ТЕОРИЯ ПРОСТОГО ЯКОРЯ ЗАКОНЧЕНА!     

 

 

Будем делать плавный переход к Якорю по нажатию на меню с помощью обычного рукотворного скрипта    Common.js 

 

 

 

 

И пропишем ID - для соответствующих блоков:

 

 

 

И еще скорректируем длину (глубину) прокрутки скролла вниз:

что бы избавиться от проблемы "НЕ докрутки" скролла

 

 

 

Далее сделаем ВЫВОД на MODX нашего меню с Якорными ссылками:

 

Ну во первых - Нужно выполнить:  gulp bulid

 

 

И перенести на сервер 2 файла которые заново сформировались:

 

 

 

 

ЗАТЕМ в Чанках пропишем такие же <id> - какие мы уже прописали на локальной версии

 

 

 

Само меню лучше прописывать точно так же как и на верстке - для того что бы РАБОТАЛА наша плавная прокрутка до нужного блока:

 

 

Но еще лучше вырезать все пункты МЕНЮ в отдельный ЧАНК, что бы оперативно выводить МЕНЮ в любое место:

 

Поэтому, для начала создадим категорию специально для   <MENU> 

 

 

 

Потом создадим Дополнительное поле для МЕНЮ - которое будем выводить в нужные места:

 

 

 

 

 

 

 

 

Затем перейдем в ДОП.ПОЛЕ МЕНЮ - и вставим в него наши пункты МЕНЮ:

 

 

 

 

И затем делаем вывод Дополнительного поля МЕНЮ в нужные места:

 

 

 

Отлично - МЕНЮ ВЫВОДИТСЯ и работает ПЛАВНЫЙ ПЕРЕХОД Якорных пунктов меню до соответствующих блоков:

 

 

 

 

 

ГОТОВО!

 

 

Mouse-wheel СКРОЛЛ ДО ПОИНТА

 

 

Для того что бы работал scroll - при  нажатии по нашей анимированной мышке, необходимо следующее:

 

 

 

РАБОТАЕТ:

 

 

 

 

Далее

 

Responsive - изображение в статье..

 

 

 

 

И стили:

 

 

 

Но для полной адаптивности внесем строки еще и в    media.sass  

 

 

 

Отлично:

 

 

 

 

Далее,

 

КАЧАЕМ ВЕБ-ШРИФТ С ЛЮБОГО САЙТА

 

 

 

ГОТОВО!

 

 

Далее

 

PRELOADER - ПРЕЛОАДЕР

 

ДЕЛАЕМ ПРЕЛОАДЕР - с бэекграундом всего сайта:

 

  1. Добавим   SASS - стили   прелодера:

 

 

 

КОД SASS:

 

 

2)  Добавим     HTML-верстку    самого прелодера:

 

 

    ВСТАВЛЯТЬ ПОСЛЕ ТЭГА   <BODY>    

 

 

 

HTML-код прелодера:

 

 

3) Добавим    JS - скрипты    для прелодера:

 

 

JS-Scripts - для прелодера:

 

 

 

 

4) Физически     добавим файл GIF-ки:  

 

 

 

ВСЕ! ВСЕ ДОЛЖНО РАБОТАТЬ!

 

РЕЗУЛЬТАТ РАБОТЫ!

 

 

ГОТОВО!

 

 

 

ПРОГРАММНЫЙ ПРЕЛОДЕР - ЛЕГКИЙ И СТИЛЬНЫЙ

 

 

 

 

 

1) Пишем HTML-код прелодера

 

 

 

 

 

 

 

2) Пишем SASS-стиль прелодера

 

 

 

 

 

 

 

3) Common.js  - пишем скрипт..

 

 

 

 

 

 

 

ГОТОВО! ВСЕ ДОЛЖНО РАБОТАТЬ!

 

Далее

 

Добавить КНОПКУ-GO TO

 

Добавляем кнопку:

 

 

Заполняем вот так ПОЛЯ:

 

 

Код кнопки - ВСТАВИЛСЯ!

 

Затем, копируем - этот код:

 

 

 

И вставляем его ниже, в то место куда нужно ПЕРЕЙТИ:

 

Затем, Написать слово:  "Далее"  -> Выделить и нажать на кнопку  "Якорь":

 

 

ОДНО ПОЛЕ: Вставим без "#" - ID - якоря...

 

 

 

OK! - ГОТОВО!

 

 

Далее,

 

 

PARALAX - Делаем

 

 

Начнем    внедрение ПАРАЛАКСА    в проект:

 

 

Страница плагина тут:

 

Ссылка:   http://pixelcog.github.io/parallax.js/

 

 

 

 

1)     Подключаем библиотеку Parallax    непосредственно в  GULP

 

 

 

2) Кладем сам файлик библиотеки Parallax - в папку    /libs  

 

 

 

И еще не забываем положить 2-й файлик с библиотекой:

 

 

 

3)  Добавим строчку в заглавие секции в которую хотим подключить PARALLAX:

 


ВАЖНО:  НУЖНО УБРАТЬ ЗАЛИВКУ ФОНА В СЕКЦИИ, в которой хотим подключить Parallax!


 

 

Сам код строчки ( HTML ):

 

 

 

КОД HTML SECTION-PARALAX

 

 

 

 

КОД SASS PARALAX 1920

 

 

 

 

Смотрим что получилось!

 

 

 

 

ВСЕ! ВСЕ ДОЛЖНО РАБОТАТЬ!

 

Никаких скриптов    в common.JS - не пишем!   (Все что нужно уже есть в плагине  parallax.min.js )

 

Смотрим результат:

 

 

 

OK! - ГОТОВО!

 

 

Далее,

 

Слайдер Bootstrup Автоматический

 

http://bootstrap-4.ru/docs/4.0/components/carousel/

 

 

 

  1.  Нарежем картинки для Слайдера и положим в нужную папку:

 

 

 

GO в HTML страницы и вставляем код слайдера:

 

 

 

 

 

Далее,

 

 

СЛАЙДЕР - Автоматический

 

 

Начинаем интеграцию слайдера в WEB-проект:

 

HTML -  код вставляем в СЕКЦИЮ:

 

 

 

САМ JS - КОД ДЛЯ ВСТАВКИ В HTML:

 

 

 

 

 

Там же в HTML - подключаем скрипты:

 

 

 

Код скриптов:

 

 

 

 

И опять тут же, в самом низу HTML - Порядок подключения скриптов - ВАЖЕН! (С ними были проблемки)

 

 

 

 

И сам КОД-HTML:

 

 

 

 

ТЕПЕРЬ ВСТАВЛЯЕМ SASS - СТИЛИ (Уже адаптированные для GULP):

 

 

 

 

САМ КОД SASS - СТИЛЕЙ:

 

 

 

 

ДАЛЕЕ  ПОДКЛЮЧАЕМ СКРИПТ В GULP:

 

 

 

КОД  СТРОКИ:

 

 

 

 

 

 

 

ДАЛЕЕ КЛАДЕМ ФАЙЛИКИ ПО ПАПКАМ:

 

 

 

 

И ЕЩЕ СЮДА КЛАДЕМ ФАЙЛИК:

 

 

 

 

ВСЕ ДОЛЖНО РАБОТАТЬ!

 

 

 

 

СТРАНИЦА ГДЕ БЫЛ РАЗМЕЩЕН СЛАЙДЕР:

Разработка и создание сайтов под ключ на MODX.html

 

 

ГОТОВО!

 

 

Далее,

 

 

AKKORDION - Часто задаваемые вопросы

 

 

Начали..

 

 

 

САМ HTML - КОД:

 

 

 

 

ДАЛЕЕ ТУТ ЖЕ СПУСКАЕМСЯ В НИЗ HTML и ДОБАВЛЯЕМ СКРИПТЫ:

 

 

 

САМ КОД СКРИПТОВ ДЛЯ HTML:

 

 

 

 

Далее,

 

 

 

 

Далее,

 

 

 

САМ КОД СТИЛЯ SASS:

 

 

 

 

Далее,

 

КЛАДЕМ ФАЙЛ СКРИПТА В ПАПКУ:

 

 

 

ПОЖАЛУЙ ЭТО ВСЕ!

 

 

 

ГОТОВО!

 

 

далее,

 

Animate - Подключаем!

 

 

 

Скачиваем      Animate.css   

 

Прямая ссылка:   https://raw.github.com/daneden/animate.css/master/animate.css

 

ЗАТЕМ,

 

 

 

КОД ПОДКЛЮЧЕНИЯ:

 

 

 

 

ПОДКЛЮЧАЕМ ПЛАГИНЫ, ЕСЛИ ОНИ ЕЩЕ НЕ ПОДКЛЮЧЕНЫ:

 

 

 

 

И УЖЕ МОЖНО ПРОПИСЫВАТЬ ПАРАМЕТРЫ ДЛЯ ЭЛЕМЕНТОВ, КОТОРЫЕ ХОТИМ ОЖИВИТЬ:

 

 

 

 

КОД ПАРАМЕТРОВ:

 

 

 

 

 

ЗАТЕМ ИДЕМ В SASS:

 

 

 

 

 

ИЛИ НА ПРЯМУЮ В HTML - МОЖНО УКАЗАТЬ ПАРАМЕТРЫ:

 

 

 

 

 

ВСЕ ДОЛЖНО РАБОТАТЬ!

 

 

 

 

 

ССЫЛКА НА ВИДЫ АНИМАЦИИ:

 

https://github.com/daneden/animate.css

 

 

 

 

 

ГОТОВО! ТЕПЕРЬ МОЖНО ВСЕ АНИМИРОВАТЬ!

 

 

    И ДЕЛАЕМ СТАРТ АНИМАЦИИ ПО СКРОЛУ      

 

 

 

 

 

Нам понадобится скрипт АКТИВАЦИИ АНИМАЦИИ при СКРОЛЕ:

 

 

 

 

КОД СКРИПТА:

 

 

 

 

ДАЛЕЕ

 

в COMMON.JS  напишем  функцию с параметрами анимации:

 

 

 

 

И ВСЯ СХЕМА ПОДКЛЮЧЕНИЯ В HTML:

 

 

 

 

ДАЛЕЕ в SASS можно делать контроль СКОРОСТИ АНИМАЦИИ

 

 

 

РАБОТАЕТ!

 

 

ГОТОВО!

 

 

Далее,

 

 

ПУНКТЫ МЕНЮ Одинаковые

 

 

ВЛОЖЕННЫЕ ПУНКТЫ МЕНЮ ОДИНАКОВОЙ ШИРИНЫ:

 

 

 

 

РАБОТАЕТ!

 

 

Далее

 

ОТЗЫВЫ - КАРУСЕЛЬ + OVERLAY

 

 

 

 

Погнали:

 

1)  HTML код

 

 

 

 

 

 

2)  SASS - стиль

 

 

 

 

 

 

2)  COMMON.JS - Скрипт

 

 

 

 

ЭТО ВСЕ!  ВАЖНО ЕЩЕ УСТАНОВИТЬ САМ ПЛАГИН OWL-Carousel

 

И ВСЕ ДОЛЖНО РАБОТАТЬ!

 

 

 

 

Далее,

 

"hidden-sm"

 

 

 

 

Далее,

 

<Transform + Rotate - на :hover>

 

 

 

 

Далее

 

flip-container