Есть заготовка, как довести её до состояние как на изображении и сделать остальные два варианта?
.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;
}
«Идеалами, освещавшими мой путь и сообщавшими мне смелость и мужество, были доброта, красота и истина. Без чувства солидарности с теми, кто разделяет мои убеждения, без преследования вечно неуловимого объективного в искусстве и в науке жизнь показалась бы мне абсолютно пустой»
Автор цитаты: Альберт Эйнштейн
Ответ
Позиционировать элементы относительно 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; }
«Идеалами, освещавшими мой путь и сообщавшими мне смелость и мужество, были доброта, красота и истина. Без чувства солидарности с теми, кто разделяет мои убеждения, без преследования вечно неуловимого объективного в искусстве и в науке жизнь показалась бы мне абсолютно пустой»
Автор цитаты: Альберт Эйнштейн
Комментариев нет:
Отправить комментарий