В данной статье мы расскажем, как организовать на вашем сайте интересное решение, а именно речь пойдет о том. как организовать разделение блоков с помощью косых границ или наклонов. Суть идеи в том, чтобы линии были не строго горизонтальными, а под углом. Данный эффект часто применяют при создании лендингов, хотя можно встретить в дизайне и обычных сайтов. Ведь придание необычности своему сайту только в пользу. В итоге у вас получится примерно такой результат:
Чтобы сделать такой же наклон для границ блоков подвала или шапки сайта, нужно всего лишь воспользоваться CSS. Делается все с помощью псевдоэлементов after
или before
.
К примеру, у вас есть подвал footer и вы решили сделать ему границу с наклоном как в примере. Он должен быть на всю ширину экрана, то есть - width:100%; и добавляем ему псевдоэлемент before.
footer{
margin-top: 100px;
position: relative;
width: 100%;
background: #212121;
}
footer:before{
content:'';
position: absolute;
top: -50px;
width: 0;
height: 0;
border-bottom: 50px solid #212121;
border-right: 100vw solid transparent;
}
Давайте немного разберем параметры, которые мы присвоили подвалу.
И его псевдоэлементу footer:before
По своей сути, мы с вами применили создание геометрических фигур с помощью CSS и создали треугольник. делается это с помощью границ обводки. Сам псевдоэлемент без размеров, а границы окрашены, что и создало треугольник, который мы разместили над подвалом. это создало эффект наклона и косого футера.
Все это можно провернуть для любого блока. данный пример показан для треугольника что размещается над блоком, Чтобы разместить под, то указываются такие параметры границ.
border-top:50px solid #212121;
border-right:100vw solid transparent;
Можно так же менять правую границу.
Как видите, мы просто поменяли border-bottom на border-top. Так же можно менять и правую границу с левой и будет так.
border-top:50px solid #212121;
border-left:100vw solid transparent;
В общем, можете подбирать свои варианты и менять направление наклона и его расположение над блоком или под.
Чтобы разместить под блоком, позиционирование нужно тоже правильно указывать то бишь top:-50px; заменить на bottom:-50px;
Надеюсь, вам будет полезной данная статья и когда-то вы примените данный материал на своем проекте.
На сегодняшний день большинство мобильных устройств с браузером также являются телефонами! Так почему бы не создавать для телефонных номеров на вашей странице ссылки, кликая по которым вызывалось бы встроенное приложене для звонков.
Графические иконки - главный элемент буквально всякого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. В случае если не брать в расчет нормальные форматы изображений, у разработчиков есть два основных варианта: использовать SVG либо иконочные шрифты (icon fonts). Собственно что из них лучше? Разберемся ниже.
Браузер для BlackBerry, Android и Safari для IOS (iPhone / IPod / IPad) автоматически обнаруживает телефонные номера и адреса электронной почты на веб страницах и преобразует их в ссылки. Если вам это не надо, используйте следующие мета-теги. Для Safari (iPhone…Подробнее »