Размер шрифтов в CSS: em, px, pt или percent?

  • CSS
  • 1 год назад



Применение атрибута font-size для масштабирования текста является одним из самых сложных аспектов стилевого оформления в CSS. CSS предлагает четыре единицы для измерения размера текста, отображаемого в веб-браузере. Какая из этих четырех единиц наиболее подходит для веб-документов? Этот вопрос вызвал множество обсуждений и споров. Дать однозначный ответ на такой вопрос сложно.

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

Режимы наложения CSS

  • CSS
  • 3 года назад

Если вам доводилось сталкиваться с программами для фотомонтажа (Adobe Photoshop, Pixelmator, GIMP), то вы, наверняка, знакомы с ними. Как можно понять из названия, режимы наложения определяют, как одно изображение накладывается на другое. В зависимости от выбранного режима, вы получите разный результат.

Эти режимы стали доступны в CSS в соответствии со спецификацией. Они определяют, как каждый цвет совмещается с другим на внизу лежащем слое. Таким образом можно добиться довольно интересных результатов.

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

Центрирование элементов по вертикали на чистом CSS

  • CSS
  • 3 года назад

До сих пор в CSS было проблемой, что он работает преимущественно вдоль одной оси. В зависимости от контекста это может быть вертикальная или горизонтальная ось. И это отлично подходит для стека блочных элементов (расположенных один за другим), например:

~~~{.css} display: block; width: 100%;


Также легко отобразить элементы вдоль горизонтальной оси используя плавающие элементы (float). Однако если вы хотите сделать элементы динамически на обе оси, то у вас будет не так много вариантов для этого. В таком случае вам придётся использовать обходные пути или способы основанные на JavaScript. Но на данный момент новая спецификация CSS column (CSS столбцы) дает нам новую надежду на достижение этой цели используя только чистый CSS. Примечательно, что CSS столбцы отдают приоритет вертикальному выравниванию перед горизонтальным.

### Горизонтальное центрирование

Горизонтальное центрирование сделать очень просто. Существует несколько способов для достижения эффекта горизонтального центрирования элементов:

### Inline-block и Inline элементы с выравниванием текста

Inline-block и Inline элементы, обрабатываются как текст - они рассчитывают свои собственные значения ширины и не реагируют на заявленную ширину, если вы не объявили их как блочные элементы (см. Далее).

~~~{.css}
display: inline; /* [или] display: inline-block; */
text-align: center;
Читать далее...

Создание слайдера используя twitter bootstrap 3

  • CSS
  • 3 года назад

Twitter Bootstrap 3 один из лучших CSS фреймворков для разработки и дизайна систем управления содержимым. С помощью него с лёгкостью можно создавать блоги или страницы портфолио используя систему сеток Twitter Bootstrap (grid layout). В основе многих систем CMS есть базовый компонент “Слайдер” (Carousel), в основном - это последовательное автоматическое отображение изображений, но слайдер может быть каким-угодно: он может отображать последние выполненные проекты, отзывы ваших клиентов, описание специальных предложений, ссылки на новости или последние статьи из вашего блога. В этой статье, мы изучим то, как создать слайдер используя Twitter Bootstrap 3 Carousel компонент.

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