• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать красивую заглавную букву в CSS3 (Сделать красивые заглавные буквы с помощью css3)
Как сделать красивую заглавную букву в CSS3
Kosten
Дата: Воскресенье, 2019-03-31, 13:33 | Сообщение 1
Администраторы
Сообщений:24298
Награды: 56


В этой статье подробно разберем, как можно сделать первую или заглавную буквы оригинальной, так, чтоб она отличалось от других своим дизайном или параметрами. Все это CSS3 Drop Caps, на что и будет ориентирующая статья, где узнаете простой способ, как сделать красивые заглавные буквы с помощью css3.

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

Чтобы повторить этот эффект, некоторые веб-мастера разделили эту первую букву и применили для нее специальные собственные стили, но не в нашем случай, так как задействуем CSS3. Мы можем использовать: селектор первой буквы, чтобы выбрать необходимый первый символ.

Так выглядит при проверки:



HTML

Код
  <div class="satunip_onekop_askinas">
            <div>1 Описание</div>
            <div>2 описание</div>
            <div>3 описание</div>
            <div>4 описание</div>
            <div>5 описание</div>
        </div>

CSS

Код
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.satunip_onekop_askinas {
    border: 1px dotted #292727;
    margin: 0 auto;
    overflow: hidden;
    padding: 19px;
    position: relative;
    text-align: justify;
    width: 80%;
}
@font-face {
    font-family: celticmd;
    src: url("celticmd.ttf") format("truetype");
}
.satunip_onekop_askinas div {
    color: #232121;
    font-family: "celticmd",Sans-Serif;
    font-size: 17px;
    line-height: 29px;
    text-shadow: 2px 2px 2px rgba(138, 136, 136, 0.2);
}
.satunip_onekop_askinas div:first-letter {
    float: left;
    font-size: 80px;
    line-height: 1;
    margin: 15px 5px 0 0;
    text-transform: uppercase;
}


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

Демонстрация
Прикрепления: 9326564.png(150.3 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать красивую заглавную букву в CSS3 (Сделать красивые заглавные буквы с помощью css3)
  • Страница 1 из 1
  • 1
Поиск: