Изучите свойство CSS border-radius, создав калькулятор

1656665771 izuchite svojstvo css border radius sozdav kalkulyator

Вы когда-нибудь видели на веб-странице кнопку с закругленными краями? Вы когда-нибудь видели изображение, которое вписывается в круг? Если да, то вы видели влияние использования свойства CSS border-radius.

Вы можете предоставить любому элементу «округленные углы», используя радиус границы через CSS.

Синтаксис границы-радиуса

Как и в случае со многими свойствами CSS, связанными с полями, отступами и границами, существует четыре отдельных свойства – по одному для каждого угла элемента box – и одно сокращенное свойство. Каждый атрибут угла принимает одно или два значения.

Свойство border-radius принято во всех основных браузерах, но у них есть специфические атрибуты браузера. Вот атрибуты CSS и браузера:

qnkEgNX3r6axXCWRrTIowIIYhuB9hddlmaQE

Каждое из отдельных свойств угла CSS3 принимает одно или два значения длины (обычно значение px или em). Если указано одно значение, то оно становится радиусом закругленного угла. Если указано два значения, они становятся горизонтальными и вертикальными радиусами для эллиптического угла.

Свойство border-radius само по себе принимает одно или два значения и использует их для стилизации всех четырех углов, создавая хорошую симметричную форму.

Вам больше нужно использовать префиксы border-prefixes?

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

Простой ответ на этот вопрос зависит от того, какую версию браузера поддерживает ваш веб-сайт.

Firefox 3.6 требует использования -moz- префикс. С 4 и выше использование свойств CSS3 является нормальным.

Safari 4 нуждается -webkit- префикс. Safari 5 и выше воспринимает характеристики CSS3.

iOS3 нуждается -webkit- префикс. Это касается только iPhone 3GS или iPad 1, которые никогда не обновлялись.

Основная демонстрация свойства border-radius

Вот две демонстрации радиуса границы. Значение свойства может быть в пикселях, rem, em или %.

div {    width: 100px;    height: 100px;    background-color: #7db9e8;}#demo-one {    border-radius: 20px;}#demo-two {    border-radius: 50%;}
58inFWiFV2nf3gY0np2En3eiv-yT4v6me2TN
#demo-одно изображение налево и #demo-два изображения направо

Для первого div к каждому углу div применяется скругленный угол 8px. Во втором примере к каждому углу применен округленный угол на 50%, что создает круг.

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

Когда вы указываете отдельные значения, они применяются в следующем порядке: слева вверху, справа вверху, справа внизу, слева внизу. Вот пример:

#demo-three {    border-radius: 10em 20em 10em 20em;}#demo-four {    border-radius: 40px 5px;}
BGucle-f9GeDKujT0Lvpkd6NHoCU3hhEbDBW
#демо-три изображения влево и #демо-четыре изображения вправо

Эллиптические ребра

Края не обязательно должны быть круглыми, они также могут быть эллиптическими. Чтобы создать эллиптическое ребро, вы ставите косу риска (“/”) между двумя значениями. Вот пример:

#demo-five {    border-radius: 10% / 50%;}#demo-six {    border-radius: 50% / 10%;}
98A58SmtXz8co6JdO13FcOcJ1bBWuBGEBq7u
#demo-five изображение влево и #demo-six изображение вправо

Создание нашего калькулятора

Мы собираемся применить то, что только что узнали о border-radius, чтобы создать этот калькулятор:

XfZMe9RBd87B6-whvzUyAAhyoC3Odc3iLufy
Изображение калькулятора, который мы будем производить

Калькуляторная рамка

Поначалу нам необходимо сделать каркас для нашего калькулятора. Верхняя часть калькулятора будет иметь дугу, а нижняя – закругленные края. Чтобы создать этот дизайн, мы укажем значение для каждого отдельного угла следующим образом:

.calc-frame {    display: flex;    flex-direction: column;    align-items: center;    max-height: 650px;    max-width: 400px;    width: 90%;    padding: 20px;    border: solid 5px #41403E;    border-top-left-radius: 270px 100px;    border-top-right-radius: 270px 100px;    border-bottom-right-radius: 35px;    border-bottom-left-radius: 35px;    background: #b1b1b1;}
158kfBelpvY3-QDnxL0KRwdc10d8IZyuAE7g
Изображение кадра калькулятора, созданное с помощью CSS выше

Рамка результата калькулятора

В верхней части калькулятора содержится вычисленная сумма (результат). Он состоит из двух частей: наружной рамки и области ввода, содержащей результат. Наружная рамка использует тот же радиус рамки, чтобы иметь ту же дугу. Вот стиль для этих двух элементов:

.calc-result-frame {    background: #fefefe;    border: solid 5px #41403E;    width: 100%;    height: 150px;    border-top-left-radius: 270px 100px;    border-top-right-radius: 270px 100px;    border-bottom-right-radius: 10px;    border-bottom-left-radius: 10px;    display: flex;    justify-content: center;    align-items: flex-end;}.calc-result-input {    width: 85%;    height: 70px;    text-align: right;    color: #41403E;    overflow: hidden;    font-size: 2rem;
GQIskucMzloAzKnvRCVjgqsyXBXou7pGNTlY
Изображение кадра результатов калькулятора, созданного с помощью CSS выше

Логотип калькулятора и кнопка питания

Следующие элементы, которые нужно добавить в наш калькулятор, это логотип «BLAND INSTRUMENTS» и кнопка питания. Мы используем код в #demo-four для логотипа и код в #demo-two для кнопки питания. Это выглядит так:

.calc-logo {    background: #41403e;    color: #e8eff0;    border: solid px #41403E;    border-radius: 40px 5px;    width: 250px;    height: 50px;    line-height: 50px;    font-weight: bold;    text-align: center;}.calc-on {    border-radius: 50%;    border: none;    background: #bb0f29;    color: #fefefe;    width: 50px;    height: 50px;}
xdYe0M5nEFA5-cuoK6lnZAQC-oOXanmmzlPG
Изображение с логотипом нашего калькулятора и кнопкой питания с CSS выше

Кнопки калькулятора

Далее мы создадим стиль каждой кнопки калькулятора. Мы укажем стиль для каждого угла, а затем придадим два значения для каждого угла. Это создает нарисованный от руки вид кнопок. Вот код:

.calc-btn {    background: transparent;    color: #41403E;    font-size: 2rem;    width: 75px;    height: 75px;    outline: none;    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;    border: solid 7px #41403E;    flex: 1;    transition: all .5s ease;}
zowOBlwKqRf1NKRRYRpEBPdc9DB-jUIgEI4h
Изображение, на котором показаны кнопки калькулятора с помощью CSS выше

Кнопка ввода

Последнее, что нам нужно добавить в наш калькулятор, это ENTER кнопку. Для этой кнопки мы будем использовать код из #demo-one. Вот код:

.calc-enter {    background: #bb0f29;    color: #fefefe;    border-radius: 20px;    border: none;}
aWVrEsCdtTGBtWohqfF5qjGiGsd6MlJt143q
Изображение, на котором показаны кнопки ввода калькулятора с CSS выше

Анимация кнопки

Последнее, что мы собираемся добавить в наш калькулятор, это анимация для каждой кнопки, когда пользователь приводит курсор на кнопку. Это имитирует действие практически нажатой кнопки.

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

Чтобы обеспечить анимацию, мы собираемся добавить переход к кнопке. Затем мы предоставим другую тень прямоугольника для кнопок, когда пользователь наводит на них курсор. Вот код:

.calc-btn {    background: transparent;    color: #41403E;    font-size: 2rem;    width: 75px;    height: 75px;    outline: none;    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;    border: solid 7px #41403E;    flex: 1;    box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);    transition: all .5s ease;}.calc-btn:hover {    box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);}

И вот наш готовый калькулятор:

CwnpB7nIh11k5CkmnjjjAGZqZveSnB3jCYXX
Изображение с анимацией кнопки калькулятора с CSS выше

Получите код

Если вы хотите увидеть полный код для калькулятора, вы можете получить его из моего репозитория GitHub здесь. Пожалуйста, звездочка мое репо, когда вы получите код!

Код использует Flexbox для макета калькулятора. Если вы не знакомы с Flexbox или хотите просмотреть его, вы можете просмотреть мой бесплатный учебный курс по Flexbox на in5days.tech.

Спасибо, что прочли

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

Вот другие мои статьи, которые могут вас заинтересовать:

Вот пять макетов, которые можно создать с помощью FlexBox
Думайте нестандартно с помощью CSS shape-outside
Почему культура компании важна для вашей карьеры инженера-программиста

Добавить комментарий

Ваш адрес email не будет опубликован.