Чтобы получилось нечто подобное:
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;
}
Шел конец 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>
Каждый аз гуглю, когда нужно. Решил таки уж у себя сохранить 😉
body {
background-image: url("../images/fone.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
}
Основная проблема «скругления», в получении кроссбраузерностни. Я использую следующий код, для «скругления»:
.round
{
border: 1px;
border-style: solid;
border-radius: 5px;
-webkit-border-radius: 5px;
}
После чего, в HTML добавляем class=»round» для того элемента углы которого хотим «скруглить», например:
<img width=200 class="round" src="foto.jpg">
Пришлось помучатся сегодня с одинаковым отображением текста с подключаемыми шрифтами в 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;
}
Навигация по записям
Жизнь замечательных грибов