Как соединить несколько тем на одной странице с помощью CSS?

  • CSS
  • 3 месяца назад

Уже давно я задумывался о возможности индивидуально формировать отдельные блоки, такие как футер или сайд-бар, не сталкиваясь с проблемами контекстного стиля. Другими словами, «Если эта кнопка используется на темном фоне, при наведении она должна менять цвета. И как мне это сделать?». Представляю вашему вниманию статью о том, как же все-таки совладать с контекстным стилем.

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

Создание отзывчивой горизонтальной навигации типа "Приоритет+"

  • CSS
  • 3 месяца назад

Одной из самых трудных для решения проблем в отзывчивом дизайне и особенно в дизайне сайтов, которые должны хорошо работать на маленьких экранах, является создание удобной для пользователя навигации. Долгое время решение с goto существовало для скрытия элементов навигации за иконкой-"гамбургером". Хотя это решение все еще работает хорошо, новые подходы появляются и набирают обороты.

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

Как создать боковое выпадающее меню с помощью CSS и jQuery

  • CSS
  • 5 месяцев назад

В этом уроке мы покажем вам, как создавать боковое выпадающее меню для еще более простой навигации по сайту. Такое меню - популярная тенденция в современном веб-дизайне. На многих сайтах используется этот тип меню. С его помощью можно избавиться от хаоса на страницах проекта, сделать его более читаемым, сосредотачивая внимание пользователей на основном контенте. 4ZvbJjXyYsO7vLvU0OhV1JJnbHAvKgrqBLS2aalE1RktHWguJ3XHnAPN-W3nCCPsXdVWmja9aghuXYKdsH0Bj_7IHKuPUQj-BGFJrkjv5Ovql0kDMDCZzB7G4rcRk-yDUatNdZ3lOZ4nhuo5Eg

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

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

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



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

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

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

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

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

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

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

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

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

До сих пор в 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
  • 4 года назад

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

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