Следить за новостями:

Категории
Свежие записи
BrainFБлог

HTML / CSS

Все что касается технологий верстки

Наследование (@extend) — Stylus

Директива @extend заимствована (и работает так же) из SASS, лишь с некоторыми отличиями. Эта функция значительно упрощает поддержку семантических правил, которые наследуются от других семантических правил.

Читать дальше

Начало работы со встроенным SVG

SVG — аббревиатура от scalable vector graphics (масштабируемая векторная графика), и уже это название является достаточно многозначительным. SVG дает нам возможность масштабировать графику от 100% до 1000% совсем без потерь качества. SVG файл декларирует в формате XML различные формы и пути внутри объекта SVG, состоящие из набора точек, позиций, длины, радиуса и т.д. в зависимости от типа фигуры. Если вы когда-либо работали в любом из векторных редакторов (таких как Adobe Illustrator or Corel Draw), то вы создавали графику, легко поддающуюся описанию в формате SVG.
Особенно удобно применять SVG для таких вещей как иконки, благодаря тому что можно создать один небольшой SVG файл и масштабировать его до больших размеров без потерь. Поддержка и мощь SVG достаточно быстро ширятся в интернете, и библиотеки наподобие Snap.svg дают нам возможность создавать действительно удивительные вещи. Сегодня вы получите некий базис в SVG и я покажу вам действительно классные вещи, охватывающие основные реализации, создание элементов и манипуляцию с атрибутами.

Читать дальше

Интерполяция (interpolation) — Stylus

Stylus поддерживает интерполяцию с помощью выражения заключенного в фигурные скобки {}, которое затем становится частью идентификатора. Например, -webkit-{‘border’ + ‘-radius’} принимает значение -webkit-border-radius.

Читать дальше

Переменные (variables)

Мы можем назначать выражения переменным и использовать их в нашей таблице стилей:

font-size = 14px

 body
   font font-size Arial, sans-serif

Скомпилируется в:

body {
   font: 14px Arial, sans-serif;
 }

Читать дальше

Селекторы (selectors)

Отступы

Синтаксис Stylus основан на отступах

body
    color white

Будет скомпилирован в:

body {
    color: #fff;
}

При желании вы можете использовать двоеточие для того чтобы отделить значения от свойств

body
    color: white

Читать дальше

Вписываем произвольное изображение в блок

«Какой же я идиот. Как я раньше до этого не додумался». Признайтесть, такая мысль посещала вас не раз и не два). Вот и у меня очередной приступ «самобичевания». При реализации галереи изображений с пред просмотром возникла задача вписать изображение в квадратный блок, сохранив при этом его пропорции. Раньше, для достижения этой цели, я задавал изображение как фон для блока и устанавливал значение contain для свойства background-size. Да и сейчас я буду так делать в зависимости от ситуации) Цель достигнута, но перфекционист внутри меня говорит о том что пострадала семантика. Что ж, в таком случае пойдем иным путем.

Читать дальше

Преобразование points, pixels, ems и процентов в CSS

Достаточно часто при воплощении шаблона в жизнь бывает необходимость переобразовать значения размеров.

Например узнать каким в пикселях бедет размер шрифта в 10pt. Стоит оговорится что данные соотношения являются приблизительными и зависят от многих факторов (начертание шрифта, браузер, операционная система и т. д.)

Читать дальше

Адаптивная верстка. Media Queries для стандартных экранов.

Читать дальше

display:block vs display:inline

css displayПочти все html-элементы являются либо блочными либо инлайновыми и по разному отображаются на странице

Читать дальше

CSS Reset сброс стиля

reset.cssСреди обилия современных браузеров каждый из них выделяется по-своему. Для различных CSS-элементов устанавливаются свои стили по-умолчанию. Нас такой вариант не совсем устраивает. Мы ведь хотим донести нашу дизайнерскую задумку к пользователю, поэтому поговорим о том как установить собственные стили по-умолчанию.

Читать дальше

Страницы: