Архив метки: css

WEB

CSS: Выравнивание содержимого блоков по вертикали

Оставить комментарий

Чтобы получилось нечто подобное:


HTML:

    <div class="tile2">
        <div class="icons_left"><img height="32px" src="/images/list.png"></div>
        <div class="icons_right" ><img height="32px" src="/images/heart.png"></div>
    </div>

CSS:

.tile2{
    grid-template-columns: 50% 50%;
    display: flex;
    height: 100%;    
}
.tile2>.icons_left {
    color: #003264;
    font-weight: bold;
    font-size: xx-large;
    text-align: end;
    margin:  auto;
    cursor: pointer;
} 
.tile2>.icons_right {
    color: #003264;
    font-weight: bold;
    font-size: xx-large;
    text-align: left;
    margin:  auto;
    cursor: pointer;
}
WEB

Символ рубля на сайте

Оставить комментарий

Шел конец 2020 года, а мы всё еще не умеем штатно отображать символ рубля. Вот одно из решений:

1) Устанавливаем вот этот шрифт в css:

@font-face { 
    font-family: "rouble";
    src: url("/fonts/rouble.otf") format("opentype");
}
.rub { font-family: "rouble"; }

2) В коде прописываем:

<span class="rub">i</span>
WEB

Скругление «всего и вся» посредством CSS

Оставить комментарий

rounded-cornersОсновная проблема «скругления», в получении кроссбраузерностни. Я использую следующий код, для «скругления»:

.round
{
border: 1px;
border-style: solid;
border-radius: 5px;
-webkit-border-radius: 5px;
}

После чего, в HTML добавляем class=»round» для того элемента углы которого хотим «скруглить», например:

<img width=200 class="round" src="foto.jpg">
WEB

Кроссбраузерное подключение шрифтов в html и css

Оставить комментарий

Пришлось помучатся сегодня с одинаковым отображением текста с подключаемыми шрифтами в IE, FireFox,Chrome. Очень пригодились онлайн конвертеры ttf2svg, ttf2eot и ttf2woff. Ниже приведен пример стиля ccs, который является кроссбраузерным:

@font-face {
    font-family: 'PTSansBold';
    src: url('../fonts/9125527.eot');
    src: local('☺'), url('../fonts/9125527.ttf') format('woff'), url('../fonts/9125527.ttf') format('truetype'), url('../fonts/9125527.svg#PTSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}