/ Сайтостроение / Дизайн

Дизайн

44

В основном запросе 44 записи
Сайтбар

Сайтбар

Вспомогательная панель или сайтбар довольно удобная штука. В нее мы можем поместить множество необходимых модулей и виджетов по функционалу сайта: от формы поиска до ленты Instagram. Сайтбар размещен справа либо Читать далее »

Галерея Masonry в процентах

Галерея Masonry в процентах

Я более досконально изучил принцип работы галереи Masonry. Теперь с уверенностью могу сказать, что это отличная штука. В одной изранних статей была далеко не полная и не точная информация. Галерею Читать далее »

Эффекты с текстом

Эффекты с текстом

В данном посте приведены различные эффекты с текстом. Мигающий текст <span class="blink_me">Мигающий текст</span> скрипт function blinker() { $('.blink_me').fadeOut(500); $('.blink_me').fadeIn(500); } setInterval(blinker, 1000); Повторяющийся эффект animate Делаем любой эффект animate повторяющимся Читать далее »

Эффект ряби

Эффект ряби

Эффект ряби привлечет внимание и поможет увеличить кликабельность элемента сайта: кнопки, области и т.д. Сделаем кнопку как в сервисе Call Hunter. Чистый эффект ряби Сам эффект ряби создан на чистом Читать далее »

Slider v.2

Slider v.2

Доработал Slider v.1 добавив в него несколько функций: отдельный тип записей — слайды, ссылка со слайда. Сам скрипт слайдера остался прежним. Тип записей Слайды add_action( 'init', 'register_post_type_slide' ); function register_post_type_slide() Читать далее »

Верстка типовых блоков

Верстка типовых блоков

Находим оптимальные решения верстки типовых блоков, т.е. конструкций которыми на различных сайтах приходиться пользоваться часто. Изображение текст Очень часто используется связка «изображение + текст»: списки статей, перечисление преимуществ, опции, достопримечательности Читать далее »

FlexBlock. Современная верстка

FlexBlock. Современная верстка

Верстка сайтов постоянно эволюционирует: от табличной верстки к верстке div с float (frame), далее промежуточный этап верстка diplay:inline-block. Так или иначе суть верстки — модульная сетка. Современный CSS дает нам Читать далее »

/
Создаем анимацию Scroll Down

Создаем анимацию Scroll Down

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »

/
Легкая верстка блоков

Легкая верстка блоков

Представим, что нам нужно упорядочить записи плиткой, т.е. слева направо сверху вниз. При этом, чтобы записи в каждом ряду были выровнены по левому и правому краям. Сделаем максимально простым способом. Читать далее »

Material Design

Material Design

Material Design — дизайн программного обеспечения и приложений операционной системы Android от компании Google. Впервые представлен на конференции Google I/O 25 июня 2014 года. Идея дизайна заключается в приложениях, которые Читать далее »

Фон — видео

Фон — видео

Очень эффектно, для главной страницы, смотрится фон из видео. Рассмотрим основные моменты данной «фишки». Добавление видеофона в вёрстку <div class="video-bg"> <video autoplay="" loop="" muted="" poster="https://opttour.ru/wp-content/uploads/2016/05/Cover-girl-HD.jpg"> <source src="https://opttour.ru/wp-content/uploads/2016/05/Cover-girl-HD.mp4" type="video/mp4"> </video> </div> Читать далее »

Фиксированное меню 2.0

Фиксированное меню 2.0

Продолжая работать над совершенствованием фиксированного меню, нашел следующее решение. Верстка фиксируемого блока <div id="stick_menu" class="default"> В отличие от предыдущей версии меню, перед блоком ставить ничего не нужно. Стили для фиксированного Читать далее »

Slider v.1

Slider v.1

Реализуем простой в настройке, функциональный слайдер с навигацией и двумя эффектами перехода (затухание и перелистывание). Подключение слайдера Подключаем скрипт (если слайдер нужен на главной странице, то подключаем локально в шаблоне Читать далее »

Плавающий боковой блок

Плавающий боковой блок

Иногда бывает нужно чтобы какой-либо боковой блок пролистывался вместе с основным контентом. При этом, этот блок будет будет следовать с небольшой задержкой привлекая дополнительно внимание. Ставим его перед выводом основного Читать далее »

Имитация формы Jivosite

Имитация формы Jivosite

Я попытаюсь сделать имитацию популярной формы обратной связи Jivosite, но без функционала чата. Бывают ситуации когда непосредственно чат не нужен. Форма обратной связи Код верстки <div id="jivosite"> <div id="jivosite-btn"><i class="fa Читать далее »

Мобильное меню типа mmenu

Мобильное меню типа mmenu

Адаптируем меню под мобильную версию сайта. При этом необходимо учитывать особенности небольших экранов и конфигурировать под них структуру и стили меню. Функционал mmenu.js Подключаем стили и скрипты: <link rel="stylesheet" href="http://opttour.ru/wp-content/themes/tester/jquery.mmenu.css" Читать далее »

/
Ограничение длины текста

Ограничение длины текста

Ограничиваем длину текста различными техниками: от простого jquery до более сложных способов на стороне сервера с помощью php. Ограничение количества символов в блоке средствами jquery // Обрезание количества символов внутри Читать далее »

Миниатюра — фон сайта

Миниатюра — фон сайта

Мы можем использовать миниатюру записи для самых разных целей. В данной статье рассмотрим вариант использовать миниатюру в виде фонового изображения сайта. Вывод миниатюры в виде фона В цикл вывода миниатюры Читать далее »

/
Стрелки CSS

Стрелки CSS

Стрелка вверх

- как делать вот такие стрелки

Построение записей сайта

Построение записей сайта

Можно по разному располагать записи рублики, например: плиткой или списком. Также сделаем механизм по переключению режимов представления постов. Верстка плиткой HTML <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <div class="hentry-box"> Читать далее »

Серверные технологии
Рекомендации для васСерверные технологииOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.