Простой способ создания адаптивной «шапки»
Создание привлекательной адаптивной «шапки» страницы зачастую довольно сложный процесс. До недавнего времени вам приходилось использовать обтекание (CSS-правило float) или другие трюки, чтобы правильно расположить составляющие элементы какого-либо блока страницы. К счастью, это уже в прошлом!
Продвинутые CSS-селекторы, о которых вы, возможно, не знали
CSS – замечательная технология. Благодаря ей, сайты в сети становятся красочными и яркими. Очень часто используя CSS, разработчики присваивают элементам страницы значения атрибутов id и class для того, чтобы стилизовать их. Это замечательно, но что делать, если по какой-то причине у вас нет доступа к коду, чтобы добавить эти атрибуты к элементам?
FlexBox верстка блока с комментариями
FlexBox – новый мощный способ верстки макетов, с помощью которого процесс веб-разработки значительно упрощается. Практически все современные браузеры поддерживают FlexBox, поэтому неплохо будет применять этот метод для решения своих повседневных задач.
В этой небольшой статье будет рассказано о том, как можно сверстать блок с комментариями, используя FlexBox-свойства CSS. Мы обратим внимание на самые интересные моменты верстки макетов, чтобы показать все преимущества такого подхода.
Создаем вертикальный график с помощью CSS
Порой бывает необходимо разместить на странице какой-нибудь график. Оказывается для этих нужд уже существует хороший инструмент, который называется Timelined. По сути — это набор CSS-классов, которые описывают различные элементы графика. Хотелось бы уточнить, что с помощью этого инструмента вы можете создавать только вертикальные CSS-графики.
Узнаем о поддержке CSS-свойств браузерами с помощью командной строки
Обычно при создании сайта используются различные технологии, которые могут полностью не поддерживаться во всех браузерах. Возьмем для примера, CSS. В некоторых браузерах какое-то определенное свойство поддерживается частично, а в каких-то не поддерживается совсем.
Для того, чтобы узнать поддерживает ли браузер какое-то определенное правило CSS, веб-разработчики используют сайт http://caniuse.com. На нем довольно подробно описано в каких-браузерах (с учетом версии) работают правила CSS, а в каких — нет.
reGrid.js - инструмент для показа сетки на веб-странице
Уже в течении нескольких лет техника верстки сайтов при помощи сетки пользуется популярностью у разработчиков. В сети существует большое количество CSS-библиотек (Grid Systems) для работы с сеткой. Стоит заметить, что эта методика включена в Bootstrap, который на мой взгляд является одним из самых популярных CSS-фреймворков (если не сказать, что самым популярным).
Использование сетки в процессе верстки сайтов дает разработчику ряд преимуществ: увеличивается скорость разработки, верстать становится легче за счет четкого позиционирования элементов. Размещая элементы макета по сетке, вы сразу замечаете, что страница становится более аккуратной, блоки выглядят пропорционально, имеют одинаковые отступы. Конечно же, при использовании этой методики существуют и свои маленькие недостатки: например, в код добавляются дополнительные элементы разметки. Эти недостатки незначительны, поэтому их можно считать особенностями этого подхода.
В этой заметке мне хотелось бы познакомить читателя с одним хорошим инструментом для проверки промежуточных результатов работы, которую необходимо делать, чтобы не отклоняться от границ, устанавливаемых сеткой.
5 полезных онлайн инструментов для веб-верстальщика
Решил поделиться с читателями информацией о нескольких интересных онлайн инструментах, которые, возможно, будут полезны веб-верстальщику в его работе. Как известно одним из языков, с которым веб-верстальщику приходится сталкиваться каждый день является CSS. Поэтому описанные в заметке онлайн-сервисы, предназначены для работы с CSS.
Собираем свою коллекцию сниппетов кода
Для начала небольшая справка: в переводе с английского слово “snippet” означает «фрагмент» или «отрывок». В программировании снипеттом называется небольшой фрагмент кода, пригодный для повторного использования. Любой разработчик (особенно начинающий), рано или поздно, начинает собирать свою «коллекцию» полезных фрагментов кода, которые позволят ему сэкономить время на разработку своих веб-приложений. В этой статье я приведу несколько полезных, на мой взгляд, сниппетов кода на PHP.
Размещаем символ рубля на веб-страницах
В последние годы на страницах интернет-магазинов и в печатных изданиях при указании цены какого-либо товара часто можно видеть символ рубля. Не смотря на то, что до декабря 2013 года в России этот символ официально не был утвержден, это не мешало дизайнерам использовать его в своих работах. В этой заметке мне хотелось бы рассказать о двух способах размещения этого знака на веб-страницах.
Замена стандартных маркеров у списка и их стилизация
Ни для кого не секрет, что с помощью CSS свойств list-style
можно задать стиль маркеров у маркированного списка. С нумерованными списками не все так просто. Как известно до маркеров в нумерованных списках никак не «доберешься» с помощью правил CSS.
Конечно, можно отображать номера элементов в виде римских цифр или букв латинского алфавита (устанавливая различные значения атрибута type
элемента ol
или значение свойства list-style-type
), но увеличить их размер или поменять
цвет стандартными правилами CSS невозможно. В связи с этим, речь в этой заметке пойдет об оформлении нумерованных списков, а именно о замене стандартных маркеров у элементов таких списков.