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