Как сделать красивый блок css

Как создавать адаптивные кнопки и блоки в CSS

Основатель компании Useful Web и преподаватель «Нетологии» Владимир Языков рассказал, как создавать кнопки и блоки страниц, содержимое которых может измениться.

Обучение в онлайн-университете: курс «Старт в программировании»

Если содержимое в блоке может измениться, вместо жестких размеров блока задавайте внутренние отступы. Расскажу, как сделать так, чтобы:

Кнопки

Создадим кнопку общего назначения:

.button <
/* геометрия элемента */
width: 150px;
height: 20px;
/* отступы между кнопками */
margin-bottom: 5px;
/* центрируем текст кнопки по вертикали */
display: flex;
justify-content: center;
/* центрируем текст кнопки по горизонтали */
text-align: center;
/* чтобы работала геометрия и отступы у тега */
display: inline-block;
/* убираем обводку у тега */
text-decoration: none;
background-color: red;
color: #fff;
>

Код примера

В процессе развития проекта в элементах сайта может измениться содержимое. Это значит, что текст в кнопке «Отправить резюме» может смениться на «Отправьте нам ваше резюме», и получится вот так:

Код примера

Слово «резюме» не поместилось, хотя именно из-за него и появился дополнительный отступ.

Жесткие размеры дают корректное отображение макета только здесь и сейчас.

Можно добавить более гибкую систему геометрии блочной модели, поставив значение min-width:

.button <
min-width: 150px;
/* при жесткой высоте будет увеличиваться ширина */
height: 20px;
/* … остальной код без изменения */
>

Код примера

Мы поправили отображение, но теперь текст слишком близко к границам кнопки, поэтому нужно поставить внутренние отступы. Не забудьте вычесть их из ширины блока при box-sizing:content-box, то есть стандартном поведении элементов.

.button <
/*
поскольку другое значение border-box не задавалось,
нужно подкорректировать размеры
*/
min-width: 140px;
/* при жесткой высоте будет увеличиваться ширина */
height: 20px;
padding: 0 10px;
/* … остальной код без изменения */
>

Код примера

Блоки страницы

При верстке посадочных страниц можно встретить блоки с большим количеством свободного пространства внутри. Пример:

Лучше всего оформить это в CSS так:

Поздравляю, вы стали обладателем квартиры в Сызрани!

.greeting <
/* задаём геометрию */
height: 200px;
padding: 20px;
/* центрируем содержимое по вертикали и горизонтали */
display: flex;
align-items: center;
justify-content: center;
/* учитываем последующее добавление элементов */
flex-direction: column;
background: blue;
>
.greeting__title <
color: #fff;
font-family: Arial;
font-size: 20px;
>

Вот что у нас получилось:

Код примера

Возможно, позже в этот блок понадобится добавить описание. При большом количестве текста с нашими жесткими размерами все пойдет наперекосяк:

Ставим min-height и отступы на случай, если содержимого станет слишком много:

.greeting <
/* задаём геометрию */
min-height: 200px;
padding: 20px;
/* код без изменения */
>

А что, если задать размеры отступов, значительно превышающие в сумме минимальную ширину или высоту?

.greeting <
/* задаём геометрию */
min-height: 40px;
/* тут речь идет только о box-sizing:content-box */
padding: 80px;
/* код без изменения */
>

Начальное поведение у элементов в обоих случаях будет одинаковым, а вот поведение при превышении минимального значения контейнера — разным.

А что там с margin’ами? Можно ли их подвязать на замену padding? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:

Поздравляю, вы стали обладателем квартиры в Сызрани!

И так тоже не делайте:

.greeting <
/* задаём геометрию */
min-height: 40px;
/* не задаём никакие отступы в родительском элементе */
/* код без изменения */
>

.greeting__container <
margin: 80px;
>

Резюме

Уточните у дизайнера или клиента, какую часть свободного места можно отвести на отступы, оставив разницу на min-width/height.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Источник

Оформление блоков с иконками

Несколько вариантов оформления раздела для преимуществ, сервиса и других блоков с иконками

В данной статье представлено несколько вариантов оформления блоков с иконками.

Такие блоки, как правило, используются для создания разделов с преимуществами («Почему мы» и др.) или описания сервиса. Также можно использовать такое оформление для контактов, отзывов и других блоков с небольшой информацией.

В каждом из примеров сделано 2 варианта вывода иконки: шрифтом и графикой.

Пример 1:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 2:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 3:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 4:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 5:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

points = «22.3,223.7 22.3,76.3 150,2.5 277.7,76.3 277.7,223.7 150,297.5»/>

d = «M150,4.8l125.7,72.6v145.2L150,295.2L24.3,222.6V77.4L150,4.8 M150,0.2L20.3,75.1v149.8L150,299.8l129.7-74.9V75.1L150,0.2 L150,0.2z»/>

Блок 1

Иконка отображается шрифтом «Font Awesome»

points = «22.3,223.7 22.3,76.3 150,2.5 277.7,76.3 277.7,223.7 150,297.5»/>

d = «M150,4.8l125.7,72.6v145.2L150,295.2L24.3,222.6V77.4L150,4.8 M150,0.2L20.3,75.1v149.8L150,299.8l129.7-74.9V75.1L150,0.2 L150,0.2z»/>

Блок 2

Иконка отображается графическим файлом

Пример 6:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 7:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 8:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Смотрите также:

Параллакс-эффекты с библиотекой parallax.js

Небольшая, но удобная библиотека parallax.js для добавления тегам параллакс-эффектов

Анимированные рамки для блоков на CSS

Несколько вариантов оформления бордюров с анимационными эффектами

Карточки для заметок, комментариев или отзывов

Наложенные друг на друга карточки для заметок, комментариев или отзывов средствами CSS

Добавить комментарий:

Комментарии:

Пример 5: что то косяки у меня, то ли в хроме дело толи лыжи не едут, в общем при ховере на елемент, svg не много потрясывает как то не понятно, лево право и саму иконку внутри потрясывает вних верх. Как будто все постепенно происходит. Врубиться не могу

Присмотрелся, этот глюк не у всех. Организовал 2 ряда по 5 блоков из примера 5, из них svg трясуться только первые 2 блока в каждом ряду

Здравствуйте. Подскажите, как сделать, чтобы один блок был на 4 иконки по горизонтали, или 8 иконок 4 сверху и 4 снизу например. Понравился пример 1 и 2. И эта вёрстка адаптивная под мобильную версию?
Заранее спасибо.

Тут сам блок имеет 100% ширину.
Чтобы их раскладывать по 4 в ряд, нужно использовать сетку и размещать их там.
Мне удобнее всего всего bootstrap сетка.
Если у вас сайт имеет мобильную версию, то сетка там уже скорее всего какая-то есть. Нужно лишь вложить в нее эти блоки.
Или можно самому сделать сетку или просто задать блокам точную ширину, например 400px и разместить их в ряд

Источник

Базовые CSS-стили различных элементов

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

Базовая конструкция

В примерах базовая конструкция блока выглядит так:

Блок отбрасывает тень в разные стороны:

Выделение блока тенью:

Градиенты

Разные типы градиентов:

Закругленные углы

Ссылки

Несколько примеров стилей для ссылки в тексте:

Ссылка в Metro-стиле:

Input

Добавляет border-radius по клику:

Повторяет iOS инпуты:

Вместо формы ввода просто линия:

Ой, у вас баннер убежал!

Читают сейчас

Редакторский дайджест

Присылаем лучшие статьи раз в месяц

Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.

Похожие публикации

Современный CSS для динозавров

Практическое руководство по использованию CSS Modules в React приложениях

Эволюция CSS: от CSS, SASS, BEM и CSS–модулей до styled-components

Вакансии

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Минуточку внимания

Комментарии 54

В БЭМ кстати нет упоминаний про такую запись селекторов атрибутов!

Какие? Какие аргументы? Ссылка на блог яндекса? Там и упоминаний то нет касательно темы нашего спора.

Для себя я давно решил, что при грамотном использовании ни универсальный селектор, ни селекторы атрибутов не несут никакого вреда. Всё остальное — домыслы и предрассудки.

То, что описано по вашей ссылке marow.net/archives/95 и запись div[class*=«embossed»] — это совершенно разные вещи. В вашей статье всё написано верно, но это никак не относится к данному селектору.

ИМХО этот селектор работает медленно, потому что по нему невозможно построить индекс. Этот запрос аналогичен запросу в MySQL LIKE ‘%embossed%’. Хотя я свято верю, что по классам индекс построен.

Простой спид-тест: выборка 1000*N раз сделать селектор div[class*=«embossed»] и div.embossed мне показывал разницу в три раза на небольшом DOM-дереве.

Для однократной отрисовки страницы это не страшно.
Однако если ваше js — приложение использует такие же селекторы — это уже может сказаться.

ну если уж сильно захотеть… то можно как так попытаться, для всего что ниже лайтбокса

В хроме работает, возможно только в нем

Никому не советую так выделять ссылки, только андерлайном. Пунктирной линией лучше обозначать текстовые кнопки, работающие на скриптах и не перекидывающие пользователей на другие страницы.

Статья хорошая, спасибо, но все-таки выскажусь. Я видел большое количество сайтов с качественными примерами, и все они говорили, что облегчают мой труд как верстальщика, но написать что-то используя css3 я могу и сам, от таких сайтов, обычно, я жду готовый реализаций для браузеров >IE7, так как именно на это я трачу огромное количество своего времени, именно этот код я не хочу писать ручками, а хочу скопировать.

Так и в этой статье. Я увижу элемент на макете и сверстаю его на css3, но потом мне напомнят про IE, и я буду ныть, но вяло верстать тоже самое, но другими способами.

Соглашусь с выше сказанным и повторю забудьте:
div[class*=»embossed»]

Использовать Bootstrap хорошо тогда, когда проект верстается с нуля. А если проект на поддержке или пришел ко мне от другого верстальщика?

Ребята не парятся, но это ребята.

Реалии таковы, что производительность влияет на показатель отказов.

Источник

Блочная верстка CSS

Дата публикации: 2016-02-19

От автора: приветствую вас на страницах блога webformyself. Блочная верстка – самый популярный сегодня способ создать шаблон сайта. И таковым он будет оставаться видимо еще долгое время. В связи с этим давайте разбираться, как осуществляется блочная верстка css-свойствами.

Где создаются блоки

Для начала нужно понять, что css не создает блоки – он оформляет их. Сами по себе они формируются в HTML – языке разметки гипертекста. По умолчанию блок по высоте будет занимать место, равное высоте его содержимого. По ширине же он займет все доступное пространство, которое есть в родителе.

Для примера: если ширина родительского контейнера составляет 300 пикселей и в нем создан блок, то он тоже будет занимать такую ширину (только если у родителя не заданы отступы). Все остальные элементы, которые будут создаваться в контейнере, не могут стоять на одной линии с первым блоком и будут перенесены дальше.

Обычный пустой блочный элемент записывается с помощью парного тега — div. Сам по себе он ничего не делает. Например, давайте вспомним, что многие теги имеют определенный смысл: абзац является частью какого-то текста, подзаголовки нужны для улучшения навигации и восприятия и т.д. А вот тег div выступает просто контейнером.

Привычная блочная модель

В своем обычном поведении несколько созданных блоков будут идти сверху вниз друг за другом. Здесь сразу же наблюдается серьезная проблема, не так ли? А как же сделать боковую колонку, как, в конце концов, делают сайты, на которых в одной строке идет 3-5 анонсов новостей, да еще и с картинками? Вот тут нам и приходит на помощь css, с помощью которого расставить элементы на странице можно абсолютно любым образом.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Блочная верстка сайта с помощью css: основные свойства

Как мы убедились выше, по умолчанию блоки очень упрямые. Не подпускают к себе других, да еще и занимают всю ширину. Конечно же, это нужно иногда исправлять, потому что структура многих сайтов требует этого.

Давайте сначала разберемся с размерами. В css размеры элементам можно записывать с помощью свойств width и height. Зачастую значения задают в пикселях, хотя иногда в процентах или других относительных единицах.

Вот давайте представим, что есть большой родительский контейнер и в нем есть какой-то блочный элемент. Чтобы определить для него свойства через таблицу стилей, нужно как-то к нему обратиться. Если мы запишем так:

Источник