Как сделать красивый блок 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. Зачастую значения задают в пикселях, хотя иногда в процентах или других относительных единицах.
Вот давайте представим, что есть большой родительский контейнер и в нем есть какой-то блочный элемент. Чтобы определить для него свойства через таблицу стилей, нужно как-то к нему обратиться. Если мы запишем так: