Страницы

Поиск по вопросам

воскресенье, 1 марта 2020 г.

Реализовать разные варианты оформления элемента

#html #css


Есть заготовка, как довести её до состояние как на изображении и сделать остальные
два варианта?



.sho_bq-background {
  background: #fafafa;
}

.sho_bq-background:before {
  color: #ff0054;
  content: "\1F676";
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.2em;
  vertical-align: -.4em;
}

.sho_bq-background:after {
  color: #ff0054;
  position: relative;
  content: "\1F677";
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.6em;
}

cite span:first-child {
  color: #aeadad;
  font-style: normal;
}

cite span:last-child {
  color: black;
  font-weight: bold;
  font-style: normal;
}

«Идеалами, освещавшими мой путь и сообщавшими мне смелость и мужество, были доброта, красота и истина. Без чувства солидарности с теми, кто разделяет мои убеждения, без преследования вечно неуловимого объективного в искусстве и в науке жизнь показалась бы мне абсолютно пустой»

Автор цитаты: Альберт Эйнштейн


Ответы

Ответ 1



Позиционировать элементы относительно blockquote: blockquote { position: relative; background: #fafafa; padding: 1rem; margin: 1rem; } blockquote:before { position: absolute; left: -10px; color: #ff0054; content: "\1F676"; font-size: 4em; line-height: 0.1em; margin-right: 0.2em; vertical-align: -.4em; } blockquote:after { color: #ff0054; position: absolute; bottom: -20px; right: -10px; content: "\1F677"; font-size: 4em; line-height: 0.1em; vertical-align: -0.6em; } cite span:first-child { color: #aeadad; font-style: normal; } cite span:last-child { color: black; font-weight: bold; font-style: normal; }

«Идеалами, освещавшими мой путь и сообщавшими мне смелость и мужество, были доброта, красота и истина. Без чувства солидарности с теми, кто разделяет мои убеждения, без преследования вечно неуловимого объективного в искусстве и в науке жизнь показалась бы мне абсолютно пустой»

Автор цитаты: Альберт Эйнштейн
Здесь также, как и в первом примере, только нужно изменить цвет элементов и добавить background: white: blockquote { position: relative; background: #fafafa; padding: 1rem; margin: 1rem; background: #fff; border: 2px solid #ccc; } cite span:first-child { color: #aeadad; font-style: normal; } cite span:last-child { color: black; font-weight: bold; font-style: normal; } blockquote:before { color: gray; position: absolute; top: -10px; left: -10px; background-color: white; text-align: center; width: 45px; height: 40px; color: gray; content: "\1F676"; font-size: 4em; line-height: 1em; } blockquote:after { color: gray; background-color: white; width: 45px; height: 40px; position: absolute; text-align: center; bottom: -20px; right: -10px; content: "\1F677"; font-size: 4em; line-height: 1.1em; }

«Идеалами, освещавшими мой путь и сообщавшими мне смелость и мужество, были доброта, красота и истина. Без чувства солидарности с теми, кто разделяет мои убеждения, без преследования вечно неуловимого объективного в искусстве и в науке жизнь показалась бы мне абсолютно пустой»

Автор цитаты: Альберт Эйнштейн


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

Отправить комментарий