Создание частичной границы с помощью CSS

Привет, кодер, добро пожаловать в наш блог Codewithrandom, в сегодняшнем блоге мы увидим, как создать CreatePartial Border с помощью CSS.

Частичная граница — это граница, которая охватывает и левую, и правую, и верхнюю, и нижнюю границы со стильными границами, между которыми есть зазор. Какое воздействие использовано к тому же в кавычках. Точно так же мы собираемся добавить эти частичные границы с помощью Css.

Частичная граница с использованием CSS[/caption]

Создание частичной границы с помощью CSS

Итак, давайте начнем наш проект Частичная граница с добавления исходных кодов. Для этого, во-первых, мы используем HTML-код.

HTML-код для частичной границы: -

<div class="content-wrapper mobile-wrapper"> <blockquote> <p>“It’s not enough to just sell to you today, I want to sell to you 20 years from now. 
When you take care of customers, they’ll be back.” </p> <cite>- Charles Gray</cite> </blockquote> </div>

Ага ! , Теперь мы добавили HTML-код. Сначала мы создаем класс div с определенным именем. Поскольку мы добавляем цитаты в качестве контента, мы используем тег blockquote, чтобы он выглядел как цитаты, а внутри тега абзаца мы добавляли цитату с помощью тега cite, чтобы она представляла как соответствующий автор цитаты сделать его в правильном формате.

И теперь мы закрываем наш тег div и переходим к части CSS, чтобы сделать его привлекательным и добавить частичные границы.

Частичный код CSS границы: -

$brand-yellow: #E5B539;
.content-wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 6em auto;
}
.mobile-wrapper {
    @media only screen and (max-width: 865px) {
        padding-left: 2%;
        padding-right: 2%;
    }
}
blockquote {
    border: 3px solid $brand-yellow;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 20px;
    max-width: 636px;
    position: relative;
    p {
        font-family: Helvetica, Arial, Sans-Serif;
        font-size: 26px;
        font-weight: 700;
        padding: 0 34px;
    }
    &:before {
        content: "";
        display: block;
        position: absolute;
        width: 96%;
        top: -3px;
        left: 0;
        border: 3px solid white;
        position: inherit;
    }
    &:after {
        content: "";
        display: block;
        position: absolute;
        width: 96%;
        bottom: -3px;
        left: 0;
        border: 3px solid white;
        position: inherit;
    }
    cite {
        display: block;
        text-align: right;
        padding-right: 7%;
    }
}

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

ШАГ 1:Прежде всего мы добавляем цвет для границы с помощью однострочного сумматора цвета SCSS, а затем вызываем имя первого элемента div и добавляем такие свойства, как width, margin и max-width, чтобы сделать их настроить на требуемый размер экрана, который является отзывчивым.

Затем снова с помощью медиа-запроса CSS мы добавляем свойства для размера экрана вкладки и делаем небольшие выравнивания в содержимом, используя свойство padding.

$brand-yellow: #E5B539;
.content-wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 6em auto;
}
.mobile-wrapper {
    @media only screen and (max-width: 865px) {
        padding-left: 2%;
        padding-right: 2%;
    }
}

ШАГ 2: Во-вторых, мы начали добавлять свойства, которые сделают привлекательными и выравнивание кавычек, для чего мы просто вызываем тег blockquote и добавляем такие свойства, как граница с цветом, поля, отступы, максимальная ширина для экранов. , и позиции. для добавления цвета границы, создания относительного содержимого по сравнению с другим элементом, а затем его настройки с помощью полей и отступов.

Затем мы вызываем тег абзаца и добавляем привлекательные семейства шрифтов, размеры, цвета, веса и отступы, чтобы сделать его большим и привлекательным с правильным выравниванием.

blockquote{
    border: 3px solid $brand-yellow;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 20px;
    max-width: 636px;
    position: relative;
    p{
        font-family: Helvetica, Arial, Sans-Serif;
        font-size: 26px;
        font-weight: 700;
        padding: 0 34px;
    }
}

ШАГ 3.Теперь мы просто вызываем свойства «до» и «после» и добавляем именно те элементы, которые необходимо добавить в разделы «до» и «после». Элементами были display, position, width, top, left, bottom и borders, которые обычно добавлялись как в свойства, так и в значения некоторых изменений для требуемого формата.

&:before{
        content: '';
    display: block;
    position: absolute;
    width: 96%;
    top: -3px;
    left: 0;
    border: 3px solid white;
        position: inherit;
    }
    &:after{
        content: '';
        display: block;
        position: absolute;
        width: 96%;
        bottom: -3px;
        left: 0;
        border: 3px solid white;
        position: inherit;
    }

ШАГ 4:Теперь мы подошли к последнему шагу. Здесь мы просто вызываем тег cite, который содержит имя автора, и выравниваем его, используя свойства text-align и padding с форматом отображения.

cite{
    display: block;
    text-align: right;
     padding-right: 7%;
}
}

Теперь мы завершили наш проект, добавив необходимые исходные коды. Итак, теперь мы перейдем к предварительному просмотру нашего проекта в разделе «Вывод» ниже.

Теперь мы успешно создали нашу Частичную рамку с помощью CSS. Вы можете использовать этот проект для своих нужд персонала, и соответствующие строки кода приведены в разделе кода выше. .

Если вы обнаружите, что этот блог полезен, обязательно выполните поиск Codewithrandom в Google для проектов внешнего интерфейса с исходными кодами и обязательно следуйте коду со случайной страницей в Instagram.

КОД ССЫЛКИ —Мэтт Штель

АВТОР:Рагунатан С.