В "Чертежи в SVG формате. Часть 4 — Черновик стандарта (обновляется)" приведён пример рисования размеров. В продолжении рассмотрим использование JavaScript и сравним файлы чертежей в разных форматах.
Читать полностью »
Метка «css» - 10
Чертежи в SVG формате. Часть 5. — Черновик стандарта (обновляется)
2013-07-29 в 6:30, admin, рубрики: cad, cad online, CAD/CAM, css, javascript, jquery plugin, svg, Веб-разработка, векторная графика, сапр, метки: cad, cad online, css, javascript, jquery plugin, svg, векторная графика, сапрPopulateJS: don’t repeat yourself в HTML-разметке
2013-07-20 в 18:36, admin, рубрики: api, css, html, javascript, layout, markup, sugar, метки: api, css, html, layout, markup, sugar Распространение LESS/SCSS, а также ожидаемые движения в мире браузеров и стандартов, появление jQuery, наконец, вернуло фан в вёрстку HTML-страничек и во фронт-энд разработку.
Но представьте, что вам требуется сверстать раздел в интернет-магазине, раздел блога, или целую главную страницу Хабра? Да, мы делим страницу на отдельные блоки и делаем для них разметку, порождаем множество вложенных блоков, делаем для них CSS/LESS/SCSS. Безусловно, существуют такие замечательные средства как Zen-Coding, шаблонизатор jQuery Templates, а для построения сеток (grids) — всевозможные CSS-фреймворки, наподобие Bootstrap или же Zurb Foundation.
Но часто хочется посмотреть как же ведет себя вёрстка списков, когда в них не один только что свёрстанный элемент, а множество элементов. Наверняка, вы копипастили хотя бы раз в жизни разметку блока, чтобы заполнить страницу контентом, особенно когда под рукой нет запущенной любимой CMS или веб-фреймворка с шаблонизатором. А потом удаляли копипасту. Или что хуже, вы из тех, кто получает «в нарезку» HTML'ки от тех, кто верстает, и вам необходимо удалять эту копипасту самим.
Чертежи в SVG формате. Часть 4. — Черновик стандарта (обновляется)
2013-07-03 в 15:59, admin, рубрики: cad, cad online, CAD/CAM, css, html, svg, векторная графика, сапр, метки: cad, cad online, css, svg, векторная графика, сапр В "Чертежи в SVG формате. Часть 3 — Черновик стандарта (обновляется)" приведён пример заштриховывания областей и примеры шаблонов штриховки разных материалов из CAD систем. В продолжении рассмотрим рисование размеров.
Читать полностью »
simpleTooltip: HTML начиненный CSS и приправленный jQuery
2013-06-29 в 19:43, admin, рубрики: css, jquery, tooltip, Веб-разработка, метки: css, tooltip 
Каждый знает что такое тултип. Кто-то находит их крайне полезными, а кто-то обходит стороной. Судьба предрешила отнести меня к первой категории.
На разработку собственного варианта подсказок меня натолкнул Tipsy Tooltip используемый в Twitter Bootstrap. По началу я пользовался им, но все возможности плагина мне были не нужны и, будучи перфекционистом, лишний код смущал естество. Решил: напишу-ка я то, что нужно мне и ни строчкой больше. Написал и осмеливаюсь поделиться рецептом с сообществом. Авось кому-то приглянется…
Читать полностью »
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №62 (15 — 23 июня 2013)
2013-06-22 в 16:32, admin, рубрики: css, css3, DevTools, html, html5, Instagram, jquery, JS, loon, Pocket, Samsung, Yandex, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: css, css3, DevTools, html, html5, Instagram, jquery, loon, Pocket, Samsung, Yandex, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю №62 (15 — 23 июня 2013)")
Текст в линии или как победить дизайнера
2013-06-22 в 10:48, admin, рубрики: css, html, html-верстка, Веб-разработка, метки: css, html-версткаВсем привет
Каждому верстальщику хотя бы раз приходилось сталкиваться с задачей размещения текста внутри лини.
Например вот так:
Никогда не возникает проблем, если фон однотонный. Но что делать, если фоном является картинка как в данном примере?
Я предлагаю выношу на Ваш суд следующее решение. Возможно кто-то предложит дополнения или сделает замечания, я только ЗА.
Пример: ссылка
Суть решения в следующем:
Читать полностью »
10 профессиональных советов для front-end разработчиков
2013-06-21 в 21:23, admin, рубрики: css, front-end, html, jquery, переводы, метки: css, front-end, html, jqueryПрофессиональный девелопмент — один из ключевых элементов процесса усовершенствования ваших навыков как front-end дизайнера или разработчика. В этой статье я поделюсь с вами нескольким советами, которые мне очень помогали в течение прошедших нескольких лет.
1. Наслаждайтесь своей работой. Если вам не нравится то, чем занимаетесь, будь то создание красивых интерфейсов или проектирование веб-сайтов, попробуйте свои силы еще в каком-либо поле деятельности. Жизнь слишком коротка, чтобы тратить ее на то, к чему не лежит душа.
2. Овладейте языками HTML, CSS и JavaScript от «тыла» к «фронту». Клиентам и компаниям неважно, кто вы — разработчик, дизайнер, архитектор информационных систем или кто-либо еще. Вам в любом случае следует владеть ключевыми технологиями, которые лежат в основе веб от «тыла» к «фронту». Всё построены на этих трёх китах.
Читать полностью »
Верстка: два блока одинаковой высоты
2013-06-17 в 11:01, admin, рубрики: css, html, Веб-разработка, метки: css, htmlЗадача
Заданы два блочных элемента – один с текстом статьи (ширина 75% от ширины документа), другой с перечнем ссылок для навигации по первому элементу (ширина 25%). Высота элемента содержащего статью задается динамически, в зависимости от наполнения блока текстом. Необходимо сделать так, что бы второй блок с навигацией обладал таким же значением параметра высоты как и первый содержащий основной текст статьи.
Читать полностью »
5 правил верстки email-писем от Печкина
2013-06-11 в 10:43, admin, рубрики: css, email, html, Блог компании Pechkin-mail.ru, верстка рассылок, метки: css, email, email маркетинг, html, верстка рассылок 
Сегодня мы хотели бы рассказать о базовых правилах верстки HTML в email-письмах. Как известно, на свете существует множество почтовых клиентов:
- веб-версии у почтовых провайдеров (Gmail, Yandex, Mail, Yahoo итд.)
- десктопные почтовые клиенты (Outlook, Bat, Thunderbird, Mac Mail)
- мобильные почтовые клиенты (Blackberry, Android, Iphone, Ipad итд)
К сожалению, не существует обязательного стандарта верстки писем, который бы универсально поддерживался бы всеми клиентами. Часть поддерживает CSS3, часть нет, какие-то теги и аттрибуты поддерживаются, какие-то нет, не говоря уже о том, что поддержка HTML и CSS меняется даже в пределах одного почтового клиента от версии к версии. Последнее особенно заметно на примере Outlook (от Express и 2003 к Outlook 2011).
Что же необходимо знать тем, кто собирается самостоятельно верстать HTML-код для email-писем?
Читать полностью »
«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools
2013-06-10 в 14:05, admin, рубрики: animations, chrome, css, DevTools, Google Chrome, Веб-разработка, метки: animations, chrome, css, DevTools 
Сегодня мы поговорим о том, как Chrome Dev Tools помогают нам бороться с лишней перерисовкой страницы.
Прошлые части:
«Workspace» и «Сниппеты»
«Поддержка Sass»