Статьи

Как создать плоские флажки с помощью CSS

Май 28, 2018

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

Первый флажок будет иметь округленный фон с кнопкой на заднем плане; когда вы нажимаете кнопку, она перемещается вправо от фона и меняет цвет.

Как оформить флажок с помощью CSS Demo

Сначала мы начнем с HTML-кода для флажка. Это будет внутри div, вместе с меткой и другим div. Это все, что вам нужно, а все остальное делается с помощью CSS.

<section>
    <!-- Rounded Checkbox -->
    <h3>Rounded Checkbox</h3>
    <div class="flatRoundedCheckbox">
        <input type="checkbox" value="1" id="flatOneRoundedCheckbox" name="" />
        <label for="flatOneRoundedCheckbox"></label>
        <div></div>
    </div>
</section>

Когда мы придем к стилю чекбокса, нам нужно настроить закругленную табличку для кнопки, которую нужно разместить. Сначала мы стилизуем внешний div и задаем ему ширину и высоту вместе с позицией: относительной. Мы используем относительное положение, чтобы можно было безошибочно позиционировать кнопку внутри цветного планшета.

.flatRoundedCheckbox
{
    width: 120px;
    height: 40px;
    margin: 20px 50px;
    position: relative;
}
.flatRoundedCheckbox div
{
    width: 100%;
    height:100%;
    background: #d3d3d3;
    border-radius: 50px;
    position: relative;
    top:-30px;
}

Кнопка, которую пользователь нажмет, станет меткой. Этот ярлык будет просто круглым кругом, и, поскольку он будет перемещаться при нажатии, нам нужно добавить переход к ярлыку. Затем мы можем расположить эту кнопку во внешнем div. Используя абсолютную позицию, мы размещаем ее именно там, где мы хотим, внутри скругленной таблетки.

.flatRoundedCheckbox label
{
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50px;

    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;

    cursor: pointer;
    position: absolute;
    top: 5px;
    z-index: 1;
    left: 8px;
    background: #FFF;
}

Теперь мы можем стилизовать то, что будет, когда флажок установлен. Для этого мы можем использовать : selected селектор. Затем следующие флажки будут применены, когда флажок установлен. Затем мы используем общий смежный селектор ~, чтобы найти div и изменить цвет фона. В то же время мы хотим переместить кнопку справа от поля. Мы снова используем селектор: checked и просто меняем левую позицию метки.

.flatRoundedCheckbox input[type=checkbox]:checked ~ div
{
    background: #4fbe79;
}

.flatRoundedCheckbox input[type=checkbox]:checked ~ label {
    left: 85px;
}

HTML-код следующего флажка точно такой же, как и в первом примере: внутри есть внешний div с флажком, меткой и другим div. Этот флажок будет работать аналогично первому; когда вы нажимаете на кнопку, она скользит вправо от поля и меняет цвет фона.

<section>
    <!-- Flat Checkbox -->
    <h3>Flat Checkbox</h3>
    <div class="flatCheckbox">
        <input type="checkbox" value="1" id="flatOneCheckbox" name="" />
        <label for="flatOneCheckbox"></label>
        <div></div>
    </div>
</section>

Чтобы стилизовать это, мы начнем с установки размера внешнего div и убедитесь, что мы включили положение относительно этого div, чтобы мы могли точно расположить кнопку внутри поля. Затем мы стилизуем внутренний div таким же размером, как внешний div; Здесь мы можем установить цвет фона.

.flatCheckbox
{
    width: 120px;
    height: 50px;
    margin: 20px 30px;
    position: relative;
}
.flatCheckbox div
{
    width: 100%;
    height:100%;
    background: #2fca6c;
    position: relative;
    top:-30px;
}

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

.flatCheckbox label
{
    display: block;
    width: 40px;
    height: 40px;

    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;

    cursor: pointer;
    position: absolute;
    top: 5px;
    z-index: 1;
    left: 8px;
    background: #fffffd;
}

Внутри кнопки есть три линии для отображения текстуры на кнопке. Это делается с помощью псевдо-селектора: before , который позволит вам создать новый элемент со свойством content, позволяющим добавлять текст к кнопке.

.flatCheckbox label:before
{
    color: #ccc;
    content:'|||';
    font-size: 15px;
    letter-spacing: 1px;
    position: absolute;
    left: 7px;
    top:11px;
}

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

.flatCheckbox input[type=checkbox]:checked ~ div
{
    background: #e9513a;
}

.flatCheckbox input[type=checkbox]:checked ~ label {
    left: 75px;
}

Взгляните на демо, чтобы увидеть, что это создаст.

42
Share: