Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Читать полностью »
Рубрика «верстка» - 11
Выравниваем блок по центру страницы
2014-09-28 в 17:43, admin, рубрики: css, html, адаптивная вёрстка, верстка
День добрый!
Наконец добрался до своей учетки на хабре, а то обленился так, что все читаю с братского компа )
Хочу поделиться небольшим сервисом — генератором обводки текста.
Пока стандарты утрясаются, можно с помощью небольшого хака с text-shadow добиться того же эффекта.
Нужно было тот для проекта подобрать для разных надписей разные обводки визуально.
К своему удивлению обнаружил отсутствие такого генератора в просторах интернета, однако, быть может, плохо искал (прошу подсказать в комментах, если знаете).
Решил написать сам.
Генератор живет здесь.
Можно менять цвет/прозрачность фона и тени, а так же добавлять фоновое изображение.
Читать полностью »
Советы front-end разработчику
2014-08-01 в 9:58, admin, рубрики: css, front-end разработка, html, Веб-разработка, верстка, советы начинающим
Привет, читатель хабра.
Ты наверное сразу спросишь меня: «Да кто ты такой, чтобы давать мне советы?». Итак, немного обо мне.
Первое мое общение с HTML и CSS было 10 лет назад, еще в школе, когда у меня только появился интернет, и я понял что тоже хочу делать странички, которые сможет увидеть весь мир. С тех пор у меня есть как минимум 5 полных лет опыта разработки сайтов по-взрослому. Сейчас я могу без лишней скромности сказать, что сверстал я уже пару сотен сайтов, большинство из которых, как ни странно, совершенно не совпадают с моими текущими требованиями к верстке.
Я не хочу рассказывать как надо делать, эта статья результат моего опыта и попытка написать рекомендации тем, кто только начинает, хотя и для матерых верстальщиков (слово режущие слух) здесь могут найтись интересные идеи.
Если ты заинтересовался прошу под кат…
Читать полностью »
Всем доброго времени суток. Сегодня мы поговорим о том, как красиво оформить выделенный текст, совладать с отступами в кнопках, прокачать скролл в мобильных браузерах, скрестить цвет текста с цветом границ, а также рассмотрим интересные новые единицы измерения.
Читать полностью »
Первый взгляд на Avocode
2014-07-28 в 14:11, admin, рубрики: web-разработка, Веб-разработка, верстка
Доброго времени суток!
Так уж завелось, что подавляющее большинство веб-дизайнеров создают макеты сайтов в Adobe Photoshop. И каждый раз, мы, бедные верстальщики, испытываем на себе все минусы и проблемы PS. И нам всегда приходилось с ними мириться, либо использовать всяческие плагины костыли, и сторонние приложения костыли. Даже новомодный и перспективный Sketch создан, в первую очередь, для создания макетов, а не для извлечения информации для верстки.
Но темные времена прошли, и тучи начинают рассеиваться над миром фронтенд-разработчиков. Итак, встречайте: Avocode!Читать полностью »
Изображения в верстке. Хватит это терпеть
2014-07-28 в 8:06, admin, рубрики: css, highdpi, retina display, svg, web-разработка, веб-дизайн, Веб-разработка, верстка, ретина
Надеюсь этот пост послужит ликбезом всем веб-дизайнерам, верстальщикам, и проджект-менеджерам. Если вы хороший верстальщик, вас однозначно раздражают растровые изображения. Вы ненавидите растр, и всё, что имеет заметные глазу пиксели. Если это не так, добро пожаловать под кат.
Читать полностью »
Использование элементов, в качестве фоновых изображений при помощи -moz-element
2014-07-19 в 16:22, admin, рубрики: css, css3, html, mozilla, vendor prefixes, web-разработка, Веб-разработка, версткаПеревод статьи «Use Elements as Background Images with -moz-element», David Walsh
Все мы знаем, что все браузерные вендоры по своему определяют многие CSS и JavaScript фичи, и я благодарен им за это. Mozilla и WebKit предлагают свои интересные проприетарные свойства, и хотя, как мы знаем, утверждение стандартов происходит годами, намного дольше чем стоило бы, мы все должны быть за это благодарны. Есть одно интересное CSS свойство о котором вы наверняка еще не слышали — -moz-element
, это реализованное Mozill'ой CSS свойство, которое позволяет разработчикам использовать HTML элементы в качестве фонов для других элементов!
Смотреть демо
Как сверстать тему для WordPress
2014-07-03 в 4:28, admin, рубрики: css, html, wordpress, Веб-разработка, верстка, метки: css, html, wordpress, версткаВведение
В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.
Читать полностью »
Подборка полезных CSS рецептов, или чем мы занимаемся на голых пятницах
2014-06-27 в 8:22, admin, рубрики: css, html, Блог компании Wargaming.net, верстка, метки: css, html, верстка
В нашем отделе веб-разработки есть хорошая традиция. Каждые 2 недели у нас проходят «голые пятницы» — это мини-конференции, на которых мы делимся интересными и полезными знаниями, накопенными в процессе работы. Сегодня таких знаний у нас накопилось довольно много, и мы решили начать постепенно делиться ими с общественностью в лице Хабрасообщества.
Итак, представляем вашему вниманию сборку интересных и (надеемся) малоизвестных HTML и CSS-рецептов. Будем рады, если каждый из вас узнает что-то новое!
Читать полностью »
Приложение на Express.js + Sass/Compass + CoffeeScript + Haml
2014-03-13 в 13:09, admin, рубрики: node.js, web-разработка, верстка, инструменты, метки: web-разработка, верстка, инструменты Добрый день!
Решил поделиться опытом перехода с Middleman (Ruby) на Express.js (Node.js) в качестве инструмента front-end разработчика.
Сам я занимаюсь back-end, так что статья может выйти не слишком актуальной, но, надеюсь, полезной хотя бы кому-нибудь.
Итак, задача: сделать приложение на Node.js с поддержкой компиляции Sass(Compass), CoffeeScript и Haml «на лету» при редактировании соответствующих файлов. Для этого будем использовать Express и Grunt для запуска веб-сервера и выполнения задач компиляции соответственно.
Читать полностью »