Блог фронтенд разработчика. Полезные материалы о CSS, JavaScript, HTML. Подпишись!

Простые всплывающие по нажатию подсказки на JavaScript
6
октябрь
2017

Рассмотрим подробно как сделать простые всплывающие подсказки или окна на JavaScript, которые открываются и закрываются по клику по ним или рядом с ними. При этом может быть открыта только одна из них. Будем использовать JavaScript и CSS без jQuery. Кому нет нужды разбираться, можно взять готовый код.


Подробнее
Понимание flex или просто о непривычном
21
сентябрь
2017

FlexBox, или просто flex, это новый способ верстки страницы или ее части. Его использование сильно отличается от привычных методов. Однако его можно достаточно просто объяснить разделив набор параметров или свойств на две части: родительские и дочерние.


Подробнее
Как правильно писать CSS код - 5 простых эффективных правил
8
сентябрь
2017

Несколько простых правил, которые помогут избежать многих проблем при верстке.


Подробнее
Как точно расположить элемент внутри другого элемента
8
апрель
2013

Для этого нам послужит свойство position со значением absolute. Однако, значения top, right, bottom, left при значении position:absolute будут указываться относительно всего окна сайта.

Это верно, а чтобы значения работали относительно родительского элемента (внутри которого располагается объект), необходимо родительскому элементу присвоить значение position:relative

Это кажется простым, однако многие начинающие верстальщики сталкиваются с подобными проблемами.

Подобная техника позволяет приклеить к нужному месту вложенный объект.

Поясним на примере.


Подробнее
HTML5 визуальный редактор
22
май
2012
wysihtml5 - визуальный редактор HTML5
WYSIHTML5 это текстовый редактор с открытым исходным кодом, разработанный не кем-нибудь а самим Xing.
Редактор сделан полностью на HTML5 и не использует ни грамма JS, он очень легкий и работает довольно быстро.
Он преобразует поле textarea и обеспечивает основные функции редактирования текста, включая стили текста (жирный, курсив), списки, заголовки, вставка изображений и ссылок и окраски текста. Любителям браузера Chrome предоставляется возможность голосовой ввод текста.
Подробнее
Подсветка кода:Rainbow
29
апрель
2012

На сегодняшний день выбор js скриптов для подсветки кода в тексте страниц очень много. Представляю вашему вниманию, пожалуй, самый легкий из всех - Rainbow. Rainbow весит всего 1,4 кб, очень легок в использовании с минимумом настроек. Цвета и шрифты подсветки в зависимости от языка кода можно настраивать в css. Существуют уже готовые к использованию различные цветовые темы.
Подробнее
Еще один ротатор контента на jQuery
11
февраль
2011

Полностью настраиваемый ротатор контента с использованием jQuery, предусмотрено автоматическое воспроизведение при помощи кнопок вкл / выкл, настраивается скорость переходов, элементы управления включения / выключения, эффекты и многое другое.
Элементы в ротатора можно перемещать с помощью кнопки предыдущий-следующей или при помощи эскизов.
Подробнее
HTML5 видеоплееры для вашего сайта
28
ноябрь
2010

Рекомендую статью на "Временно нет" посвященую HTML5 видеоплеерам. Рассмотрено десять решений для кроссплатформенного показа видео на ваших сайтах.
Все рассмотренные HTML5 плееры умеют использовать не только HTML5, но подключать флеш версии тогда, когда это необходимо. Почти все из них бесплатные, и подходят для коммерческого использования.
Подробнее
Динамический баннер на jQuery
23
ноябрь
2010

В баннере используются различные уже готовые элементы, которые совершают движение (вращение и перемещение). Реализовано как плагин к jQuery.
Подробнее
Breadcrumbs - навигационное меню
24
август
2010

xBreadcrumbs (Расширенная Breadcrumbs) является плагином JQuery для создания горизонтального меню для вашего сайта. Это может быть полезно, если ваш сайт имеет сложную структуру, и вы хотите дать посетителям быстро перемещаться с одной части сайта на другую. xBreadcrumbs работает с неупорядоченными списки (UL / LI).
Подробнее

Все статьи