ZorNet.Ru — сайт для вебмастера » HTML и CSS » Стильный вид цитат с помощью HTML + CSS

Стильный вид цитат с помощью HTML + CSS

Оригинальный по своему дизайну вид цитаты, который выполнен на чистом CSS, что по своей стилистике смотрится стильно под любой тематический сайт. Если вам нужно описание вывести за скобки, то безусловно это лучше сделает цитата, так как здесь мы уже по умолчанию прописали его вид. Где только остается выставить описание, а также можно сделать под свой собственный шрифт прописать, так чтоб все органично вписывалось в основу сайта.

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

Так выглядит цитата:

Достаточно интересный стиль цитирования для вашего сайта.

1: В самый верх вашего CSS вставьте:

HTML

Код

<div class="comp-mising">
<div class="anslates"><h1>“</h1></div>
<div class="elevan-nusapos">
<div class="aslposemug">
<h1>ПОМНИ!<br/><span class="lasderasan">Даже если ты</span> <br/>не кодер<br/><span class="lasderasan">тебе никто не запретит стать</span> <br/>разработчиком <br/><span class="lasderasan">в будущем.</h1>
</div>
</div>
<div class="anslates"><h1>”</h1></div>
</div>

2: CSS в то место, где должна быть цитата, вставьте:

Код

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');
.anslates {
display: flex;
justify-content: center;
border-top: 1px solid #646464;
border-bottom: 1px solid #646464;
font-size: 32px;
line-height: 0;
height: 50px;
}
.comp-mising {
display: flex;
flex-direction: column;
width: 400px;
}
.elevan-nusapos {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0px 0;
}
.aslposemug {
width: 50%;
}
.aslposemug h1 {
font-family: "Comfortaa", sans-serif;
aslposemug-transform: uppercase;
letter-spacing: -2px;
white-space: nowrap;
line-height: 0.9;
}
.lasderasan {
font-size: 20px;
letter-spacing: -1px;
line-height: 2;
}

На этом вся установка:

Демонстрация

20 Февраля 2021 Загрузок: 1 Просмотров: 944 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Grician

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