Записи рубрики Верстка - itTricks

Определение ширины скроллбара средствами JavaScript

Delfi — Tue, 13 Mar 2018 11:04:51 +0000

Не раз сталкивался с «кастомной» версткой модальных окон и в случае, если нужно организовать прокрутку внутри этого окна + на странице есть фиксированные элементы на 100% ширины. В итоге, для некоторых элементов нужно сделать отступ, равный ширине скроллбара (scrollbar). Поможет в вычислении ширины скроллбара следующая JavaScript функция: [crayon-6a3b774c78b0d876584935/]

Запись Определение ширины скроллбара средствами JavaScript впервые появилась itTricks.

Преобразование тега img с svg изображением в svg объект для последующей манипуляции со стилями svg через css

Delfi — Mon, 03 Apr 2017 07:42:53 +0000

Все чаще использую svg в верстке и возникла ситуация, когда необходимо менять стили внутри svg изображения. При обычном встраивании через тег <img> невозможно манипулировать через css со стилями. Внедрять объект svg приносит свои неудобства (по крайней мере для меня), поэтому на просторах интернета был найден скрипт, который в случае, если к тегу <img> задан class=»svg» […]

Запись Преобразование тега img с svg изображением в svg объект для последующей манипуляции со стилями svg через css впервые появилась itTricks.

CSS media queries для IPad

Delfi — Thu, 03 Nov 2016 14:25:36 +0000

При достаточно сложной верстке приходится затачивать некоторые детали под специфику разных устройств. Естественно, в первых рядах идут устройства Apple. Следующие media queries позволят прописать CSS правила для IPad, в том числе с учетом ориентации экрана. [crayon-6a3b774c7bddd105907160/]

Запись CSS media queries для IPad впервые появилась itTricks.

Небольшой плагин для автоматической расстановки переносов строк в HTML для русского текста

Delfi — Wed, 07 Oct 2015 10:22:13 +0000

Делая сайт с адаптивным дизайном, столкнулся со следующей проблемой — на небольших экранах слова переносились не очень красиво. В поисках решений есть множество вариантов, но подразумевают либо ручную правку текста и вставкой спецсимвола мягкого переноса «» или использование css свойства hyphens, за счет которого используются возможности браузеров для переноса строк, но оно поддерживается не всеми браузерами. […]

Запись Небольшой плагин для автоматической расстановки переносов строк в HTML для русского текста впервые появилась itTricks.

Конфигурация сборщика проектов Gulp

Delfi — Thu, 27 Aug 2015 12:05:54 +0000

Часто делаю сайты на CMS и пока не освоил для них сборщики проектов. Однако, встречаются и простенькие сайты на чистом html, при разработке которых я использую сборщик проектов Gulp. Основы У меня было несколько попыток создать удобную конфигурацию сборщика, в последнем проекте мне это более менее удалось. Чего хотелось добиться от Gulp: Компиляция sass/scss, автопрефиксы […]

Запись Конфигурация сборщика проектов Gulp впервые появилась itTricks.

24 колоночная сетка в Twitter Bootstrap 3

Delfi — Mon, 10 Aug 2015 13:33:01 +0000

Иногда 12 колоночной сетки не хватает для комфортной верстки. Я часто использую в работе Twitter Bootstrap 3 и в «базовой комплектации» предлагается 12 колоночная сетка (12 column grid). Сайт Twitter Bootstrap 3 предлагает нам вручную поменять параметры, в том числе и касающиеся сетки. Сделать 24 колоночную верстку (24 column grid) достаточно просто, поменяв всего 2 […]

Запись 24 колоночная сетка в Twitter Bootstrap 3 впервые появилась itTricks.

Распределение inline-block элементов в ширину блока с помощью text-align: justify

Delfi — Thu, 08 May 2014 07:53:04 +0000

Наверное, каждый верстальщик веб сайтов сталкивался с задачей, когда нужно равномерно равномерно распределить элементы внутри блока. Это могут быть пункты меню, которые динамически меняются со временем. Если пользоваться просто отступами по краям элементов, то может возникнуть ситуация с неправильным подсчетом размеров и один элемент уползет на новую строку, что испортит всю верстку. Решается данная задача […]

Запись Распределение inline-block элементов в ширину блока с помощью text-align: justify впервые появилась itTricks.

placeholder в Chronoforms средствами Javascript (jQuery)

Delfi — Tue, 28 Aug 2012 12:22:12 +0000

Создавая сайты на Joomla 2.5, часто сталкиваемся с необходимостью добавления разнообразных форм. В Joomla 1.5 я использовал CForms, но для свежей версии CMS компонент не подходит. На смену пришел Chronoforms — на мой взгляд самый удобный конструктор форм. Однако, в нем невозможно стандартными способами поставить атрибут placeholder. Поиск в интернете вывел на платное дополнение, решающее […]

Запись placeholder в Chronoforms средствами Javascript (jQuery) впервые появилась itTricks.

Селекторы в CSS

Delfi — Thu, 09 Aug 2012 16:37:19 +0000

Наверное, каждый разработчик сталкивался со стандартными селекторами HTML элементов. В css мы активно используем селектор по классу или по id. CSS является довольно мощным инструментом и не ограничивается лишь данными селекторами. Рассмотрим сначала самые простые, известные всем, селекторы. Простые селекторы Поиск по типу [crayon-6a3b774c7d965265708605/] Это самый простой вид, который обращается к самому тегу. В данном […]

Запись Селекторы в CSS впервые появилась itTricks.

Выбор jQuery Datepicker плагина

Delfi — Thu, 05 Jul 2012 10:06:19 +0000

В очередном проекте столкнулся с выбором оптимального jQuery datepicker плагина. Смотрел в первую очередь на jQuery UI Datepicker, но не устроил размер библиотеки, даже если использовать не все компоненты. Несомненно, jQuery UI удобен, когда в проекте используются несколько его возможностей, но в данном случае мне был необходим только datepicker. Datepicker — вспомогательное окно для выбора […]

Запись Выбор jQuery Datepicker плагина впервые появилась itTricks.