Всем привет,
Я выкладываю статью после долгого перерыва, так что надеюсь, она вам понравится!
Сегодня мы сделаем логотип Instagram с помощью HTML и CSS.
Давайте приступим!
1. HTML
<div class="outer">
<div class="inner">
</div>
</div>
Мы создали div, который содержит другой div с классами outer и inner соответственно!
2. CSS
/* Basic */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
overflow: hidden;
}
Выше мы использовали css, чтобы наша страница выглядела красиво. Теперь давайте разработаем логотип.
.outer {
width: 150px;
height: 150px;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
border-radius: 35px;
display: grid;
place-items: center;
}
/* innerside in outer box */
.inner {
width: 120px;
height: 120px;
border: 10px solid #fff;
border-radius: 32px;
display: grid;
place-items: center;
position: relative;
}
/* center circle of logo */
.inner::before {
content: '';
width: 45px;
height: 45px;
border: 10px solid #fff;
border-radius: 50%;
background: transparent;
position: absolute;
}
/* top right circle of logo */
.inner::after {
content: '';
width: 10px;
height: 10px;
border: 2px solid #fff;
border-radius: 50%;
background: #fff;
position: absolute;
top: 8px;
right: 10px;
}
Вот и все. Вы создали логотип Instagram.
Кодепен можно посмотреть ниже.