HTML
Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с тремя полями и полем для прикрепления файла: Даже добавим пару...
Сам скрипт целиком и полностью взят с сайта dimox.name HTML Обязательные CSS-стили для вышеуказанного HTML-кода Для красивого отображения на сайте нужно использовать свои стили. Подключаем...
Чтобы далеко не ходить, сразу укажу, что остановился я на трех таких размерах для фавиконок, которые подходят всем браузерам и всем экранам: apple-touch-icon-180x180.png — сразу...
Немного другая вариация фиксированного меню. Меню фиксируется к верхней части экрана только на мобильных устройствах. Меню находится в середине страницы, то есть оно прилипает к...
Красивая и не слишком сложная анимация, например, для загрузочной страницы сайта. HTML CSS Готовый пример:
Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте. Подключаем jQuery Библиотеку stellar.js качаем здесь, подробную документацию по stellar.js читаем здесь....
Один из множества примеров сделать фиксированное меню при прокрутке. HTML CSS JS Готовый пример:
В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим, доступом к социальным сетям можно и пожертвовать, но многие не...
Появилась необходимость сделать открытие дополнительной вкладки в браузере без желания на то пользователя. Технически сделать это можно, но только браузеры не разрешат открыться вкладке, если...
Источник — http://webdesign-master.ru/blog/tools/2016-03-09-gulp-beginners.html Видео: Основные ресурсы урока: Node.js: https://nodejs.org/en/ Gulp: http://gulpjs.com/ Bower: http://bower.io/ Browsersync: https://browsersync.io/ Проект-пример из данного урока вы можете посмотреть на GitHub и...
Содержимое файла gulpfile.js для рабочей папки app с билдом в папку dist: Содержимое файла gulpfile.js для рабочей папки app без билда:
Для Bootstrap3 можно кастомизировать сетку под 960px с помощью кастомайзера http://getbootstrap.com/customize/. меняем @container-large-desktop с (1140px + @grid-gutter-width) на (940px + @grid-gutter-width). меняем @grid-gutter-width с 30px...
Есть много способов сделать колонки одинаковой высоты, но самый удобный для меня — с помощью js Высота задается для блоков div внутри родителя с классом...
Будет много кода, но он будет весь рабочий, понятный и очень простой. Сделаем всплывающую форму с куки. Сделаем всплывающее окно после успешной отправки. Изначально думал,...
Нашел очень крутой пример валидации HTML-форм без javascript и без HTML, оригинальная статья выложена здесь. Пример можно посмотреть здесь: Код немного упрощенный можно увидеть здесь:...
Как известно, 15 мая указом президента Украины Петра Порошенко были введены санкции против России. Помимо прочего, новые ограничения предполагают блокировку доступа к соцсетям ВКонтакте и...
Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте http://webdesign-master.ru/blog/tools/578.html и использую уже очень давно. Выложу здесь коды, чтобы...
Рекомендую удалить все виджеты Яндекса и вКонтакте со своих сайтов из-за блокировки оных интернет-провайдерами в Украине или сделать их асинхронными (об этом ниже). Как известно,...
Очень простой и крутой плагин Fotorama, но он совсем не адаптивный. Например нужно сделать, чтобы на десктопе он был одной высоты и первая картинка пропорционально...
Задача: Определить браузер пользователя и в документе подставить название его браузера вместо текста, который стоит по умолчанию.
Сразу напишу, что я использую такой вариант для clearfix: Вдогонку статье о новом значении свойства display, призванном избавить верстальщиков от нужды в clearfix-хаках — своего рода...
Вариант 1 — Простой JS Используем такой html: В блоке div.hidden мы выводим количество голосов за каждую оценку, например, 1 балл — 5 голосов,...
Для того, чтобы не прописывать градиенты с вендорными префиксами для каждого элемента, достаточно использовать миксины или подключить Бурбон, у которого есть свой набор готовых миксинов....
Стандарт Open Graph разработан социальной сетью Facebook. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим...
Проблема в том, что есть список, с дочерними списками, но из-за сложности структуры CMS, эти дочерние списки не являются вложенными ul > ul, их структура...
Пример реализации красивого чекбокса вместо стандартного. Это простой пример, а визуально оформить сам чекбокс каждый уже сможет сам, этот код просто для развития идеи. HTML...
Добавлю для себя быстрое подключение шрифтов Google, просто потому что надоело постоянно брать их с сайта fonts.google.com. Если кому-то пригодится, то берите, мне не жалко....
Цель — сделать pop-up окно без использования Fancybox. В общем, его можно сделать даже без использования javascript, но нам нужен стабильно работающий в во всех...
Суть задачи: На сайте есть несколько вариантов фоновой картинки и несколько вариантов блока модального окна и блока персонажа, который находится в правом нижнем углу. И...
В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты с экрана сначала, и после нажатия на определенную кнопку меню...
Чтобы окно с видео встроенного с youtube подстраивалось под размеры окна браузера, добавим пару стилей и скрипт. Добавим такой скрипт, чтобы помещать наше видео в...
Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица будет помещена в блок с классом .table-wrap, и если таблица...
Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне. Кнопка создавалась через шорткод в редакторе страницы, и класс ей...
Наверное, многие, при html-верстке, встречали «баг», когда, размещая в блоке подряд два изображения, между ними возникает промежуток, примерно в 3-5 пикселей. Этот эффект присутствует не...
Для элемента с классом blink задаем такие стили и получаем мигание этого элемента:
В данном примере сделаем изображение с классом filter черно-белым по умолчанию, а при наведении на него, оно будет плавно становиться цветным. Больше информации здесь: http://habrahabr.ru/post/144852/
Вообще, для для Лайков существует большое количество плагинов, например отличный плагин Pluso (он больше для share чем для like, но плагин отличный), но если все...
Для того чтобы добавить виджет комментариев от Facebook необходимо проделать чуть больше работы чем с виджетом комментариев ВКонтакте. Но все же особого труда не составляет....
Для добавления на сайт возможности комментирования с помощью аккаунта Вконтакте, нужно создать виджет на этой странице, обязательно нужно быть залогиненым под аккаунтом того человека, который...
В общем, переносили сайт, вроде все сделали по правилам, осталось подождать обновления NS, но они долго не обновлялись, поэтому за работой про сайт и забыли....
На одном из сайтов клиента понадобилось добавить видео на страницу. Вроде бы задача не сложная, загрузили видео на youtube, скопировали код для размещения на своем...
У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и красивых шрифтов. Благодаря таким шрифтам дизайн получает свою изюминку и...
На форуме Webmasters увидел интересное решение для того, чтобы увеличить скорость загрузки страниц на сайте, то есть чтобы скорость была быстрее, а время загрузки страниц...
Делал для одного сайта выплывающие блоки при наведении на родительский элемент. В принципе, нет ничего сложного, но пригодится в будущем, чтобы не забыть, оставлю кусок...
Нашел на просторах сети интересную овальную кнопку, которая построена только на css без использования графических изображений. Создание красивой овальной кнопки без использования графических картинок. Код...
В таблице все, кроме буквы «Ё» — у нее кодировка в порядок не вписывается — Ё А у маленькой «ё» — ё Так что если...
Для ввода в HTML документ символов, которые отсутствуют на клавиатуре или которые имеют в синтаксисе HTML специальное значение, употребляются подстановки (entities) двух видов — числовые...