Пример html кнопки: Кнопки для сайта — 10 примеров красивых и современных эффектов

Содержание

Примеры форм авторизации

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

Имея это в виду, я попытался создать несколько примеров различных форм авторизации. Цель состояла в том, чтобы сделать акцент на некоторые особенности каждой из них.

Необходимо отметить несколько вещей, прежде чем начать:

  • В статье пропущены префиксы CSS-кода, но вы, конечно, можете найти их в исходных файлах.
  • Целью урока является показать потенциал CSS, в частности, CSS3, поэтому внешний вид форм может быть отличаться в браузерах младше IE8-. Если вы планируете поддерживать эти браузеры, не забудьте сделать fallback.
  • Я не использовал атрибуты для тега формы, такие как action, method, так как я сделал основной акцент на дизайне.
  • Лично я использую бокс-модель, где [width] = [element-width] + [padding] + [borders]. Я активировал её следующим кодом:

*,
*:after,
*:before {
    box-sizing: border-box;
}

Теперь давайте перейдем непосредственно к созданию форм!

Пример 1

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

Разметка

<form>
    <p>
        <input type=»text» name=»login» placeholder=»Логин или емэйл»>
        <i></i>
    </p>
        <p>
        <input type=»password» name=»password» placeholder=»Пароль»>
        <i></i>
    </p>      
    <p>
        <button type=»submit» name=»submit»><i></i></button>

    </p>
</form>

Итак, наш первый пример довольно прост, мы не будем использовать какие-либо лэйблы. Но нам нужно указать нашему пользователю, что они должны написать в этих полях, поэтому мы используем … иконки. Для этого используем тег <i/>.

Примечание: я не буду рассматривать здесь, как использовать шрифт иконок, такой как FontAwesome. Если вы хотите узнать о нем больше, вы можете посмотреть примеры на их сайте.

Теперь у нас есть два контейнера, которые содержат текстовое поле и иконку. Кнопка Submit имеет собственный контейнер, мы используем тег <button/> вместо <input/> с иконой внутри.

Мы также будем использовать placeholder, чтобы назначение полей стало еще более ясным для всех кто использует современные браузеры. Более подробную информацию о поддержке браузерами атрибута

placeholder можно найти на CanIUse.com.

CSS

Мы начнем с определения некоторых стилей для элемента form. Форма является основной оболочкой для нашего примера, поэтому мы зададим ей ширину и расположим в центре при помощи свойства margin.

.form-1 {
    /* Размер и положение */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative; /* For the submit button positioning */
 
    /* Styles */
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.3),
        0 3px 7px rgba(0, 0, 0, 0.3),
        inset 0 1px rgba(255,255,255,1),
        inset 0 -3px 2px rgba(0,0,0,0.25);
    border-radius: 5px;
    background: linear-gradient(#eeefef, #ffffff 10%);
}
 
.form-1 .field {

    position: relative; /* For the icon positioning */
}

Важно: мы задали для формы position:relative, чтобы иметь возможность разместить кнопку Submit с абсолютным позиционированием. Мы делаем то же самое для контейнеров с классом .field, чтобы также поместить с абсолютным позиционированием иконки.
Теперь зададим стили для значков.

.form-1 .field i {
    /* Size and position */
    left: 0px;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;
 
    /* Line */
    border-right: 1px solid rgba(0, 0, 0, 0. 1);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);
 
    /* Styles */
    color: #777777;
    text-align: center;
    line-height: 42px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

Мы добавим тонкие линии по правой стороне иконки, установим правую границу и тень.

Теперь нам нужно задать некоторые стили для текстовых полей:

.form-1 input[type=text],
.form-1 input[type=password] {
    font-family: ‘Lato’, Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
 
    /* Size and position */
    width: 100%;
    padding: 10px 18px 10px 45px;
 
    /* Styles */
    border: none; /* Remove the default border */
    box-shadow:
        inset 0 0 5px rgba(0,0,0,0.1),
        inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    transition: color 0. 3s ease-out;
}
 
.form-1 input[type=text] {
    margin-bottom: 10px;
}

Прежде чем идти дальше, не забудем определить стили для состояний :hover и :focus.

.form-1 input[type=text]:hover ~ i,
.form-1 input[type=password]:hover ~ i {
    color: #52cfeb;
}
 
.form-1 input[type=text]:focus ~ i,
.form-1 input[type=password]:focus ~ i {
    color: #42A2BC;
}
 
.form-1 input[type=text]:focus,
.form-1 input[type=password]:focus,
.form-1 button[type=submit]:focus {
    outline: none;
}

Обратим внимание на следующие вещи: мы используем родственный селектор (~), чтобы изменить цвет иконки при работе с полями: светло-синий при наведении мыши, темно-синий при активном поле. И мы также удаляем контур для Chrome.

Последнее, что мы должны сделать — это кнопку «Отправить».

.form-1 .submit {
    /* Size and position */
    width: 65px;
    height: 65px;
    position: absolute;
    top: 17px;
    right: -25px;
    padding: 10px;
    z-index: 2;
 
    /* Styles */
    background: #ffffff;
    border-radius: 50%;

    box-shadow:
        0 0 2px rgba(0,0,0,0. 1),
        0 3px 2px rgba(0,0,0,0.1),
        inset 0 -3px 2px rgba(0,0,0,0.2);
}

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

.form-1 .submit:after {
    /* Size and position */
    content: «»;
    width: 10px;
    height: 10px;
    position: absolute;
    top: -2px;
    left: 30px;
 
    /* Styles */
    background: #ffffff;
     
    /* Other masks trick */
    box-shadow: 0 62px white, -32px 31px white;
}

Последнее, но не менее важное, наша фактическая кнопка отправки:

.form-1 button {
    /* Size and position */
    width: 100%;
    height: 100%;
    margin-top: -1px;
 
    /* Icon styles */

    font-size: 1.4em;
    line-height: 1.75;
    color: white;
 
    /* Styles */
    border: none; /* Remove the default border */
    border-radius: inherit;
    background: linear-gradient(#52cfeb, #42A2BC);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0. 3),
        0 1px 2px rgba(0,0,0,0.35),
        inset 0 3px 2px rgba(255,255,255,0.2),
        inset 0 -3px 2px rgba(0,0,0,0.1);
 
    cursor: pointer;
}

И, наконец, стили для наведения, фокуса (например, при переходе по клавиши табуляции) и активного (нажатого) состояния кнопки:

.form-1 button:hover,
.form-1 button[type=submit]:focus {
    background: #52cfeb;
    transition: all 0.3s ease-out;
}
 
.form-1 button:active {
    background: #42A2BC;
    box-shadow:

        inset 0 0 5px rgba(0,0,0,0.3),
        inset 0 3px 4px rgba(0,0,0,0.3);
}

Тут все довольно просто: просто меняем цвет при наведении и фокусировке. Но подождите, это еще не все! Так как мы используем градиент для состояния по умолчанию, а для градиентов не могут быть использованы переходы, браузер сначала отключает градиент, затем применяет цвет фона. Данное поведение вызывает белую вспышку при наведении курсора, которая, на мой взгляд, выглядит довольно привлекательно.

Пример 2

Еще одна простая форма, но с некоторыми новые опциями, такими как: «Войти через Twitter» и «Показать пароль». Это потребует некоторого кода JavaScript.

Разметка

<form>
    <h2><span>Войти</span> или <span>зарегистрироваться</span></h2>
    <p>
        <label for=»login»><i></i>Логин</label>

        <input type=»text» name=»login» placeholder=»Логин или email»>
    </p>
    <p>
        <label for=»password»><i></i>Пароль</label>
        <input type=»password» name=»password» placeholder=»Пароль»>
    </p>
    <p>
        <a href=»#»>Войти через Twitter</a>  
        <input type=»submit» name=»submit» value=»Войти»>
    </p>      
</form>

Здесь мы будем использовать заголовок. Я выбрал h2, но вы можете использовать любой тег. Мы также используем теги label, связанные с текстовыми полями при помощи атрибута for.

CSS

Давайте начнем с некоторых общих стилей для формы:

.form-2 {
    /* Size and position */
    width: 340px;

    margin: 60px auto 30px;
    padding: 15px;
    position: relative;
 
    /* Styles */
    background: #fffaf6;
    border-radius: 4px;
    color: #7e7975;
    box-shadow:
        0 2px 2px rgba(0,0,0,0.2),      
        0 1px 5px rgba(0,0,0,0.2),      
        0 0 0 12px rgba(255,255,255,0.4);
}

Мы создадим полупрозрачные границы и применим тени.

Теперь, когда мы задали некоторые основные стили для нашей формы, разберемся с заголовком. Мы используем 3 различных стиля для заголовка:

.form-2 h2 {
    font-size: 15px;
    font-weight: bold;
    color: #bdb5aa;
    padding-bottom: 8px;
    border-bottom: 1px solid #EBE6E2;
    text-shadow: 0 2px 0 rgba(255,255,255,0. 8);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
 
.form-2 h2 .log-in,
.form-2 h2 .sign-up {
    display: inline-block;
    text-transform: uppercase;
}
 
.form-2 h2 .log-in {
    color: #6c6763;
    padding-right: 2px;
}
 
.form-2 h2 .sign-up {
    color: #ffb347;
    padding-left: 2px;
}

Далее, мы используем два параграфа, которые будут размещены рядом друг с другом. Каждый займет 50% от доступного пространства формы, а благодаря “border-box” box-sizing, отступы рассчитываются внутри этих 50%. Вот почему мы можем задать расстояние между ними.

.form-2 .float {
    width: 50%;
    float: left;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,1);
}
 
.form-2 .float:first-of-type {
    padding-right: 5px;
}
 
.form-2 .float:last-of-type {
    padding-left: 5px;
}

Теперь стили для внутренних элементов! Там у нас находятся лэйбл и текстовое поле. Иконка будет находится внутри лэйбла в этом примере:

.form-2 label {
    display: block;
    padding: 0 0 5px 2px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    font-size: 11px;
}
 
.form-2 label i {
    margin-right: 5px; /* Gap between icon and text */
    display: inline-block;
    width: 10px;
}

Примечание: использование cursor: pointer для лэйблов помогает пользователям понять, что они могут нажать на них. Это важная деталь. 

.form-2 input[type=text],
.form-2 input[type=password] {
    font-family: ‘Lato’, Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    display: block;
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 3px solid #ebe6e2;
    border-radius: 5px;
    transition: all 0.3s ease-out;
}

Не забывайте о состояниях hover и focus:

. form-2 input[type=text]:hover,
.form-2 input[type=password]:hover {
    border-color: #CCC;
}
 
.form-2 label:hover ~ input {
    border-color: #CCC;
}
 
.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
    border-color: #BBB;
    outline: none; /* Remove Chrome’s outline */
}

Проверьте, как мы используем родственный селектор (~), чтобы вызвать состояние hover на текстовом поле, когда мы наводим мышь на лэйбл. Разве это не круто?

Теперь кнопка submit.

 

.clearfix:after {
    content: «»;
    display: table;
    clear: both;
}
 
.form-2 input[type=submit],
.form-2 .log-twitter {
    /* Size and position */
    width: 49%;
    height: 38px;
    float: left;
    position: relative;
 
    /* Styles */
    box-shadow: inset 0 1px rgba(255,255,255,0.3);
    border-radius: 3px;
    cursor: pointer;
 
    /* Font styles */
    font-family: ‘Lato’, Calibri, Arial, sans-serif;
    font-size: 14px;
    line-height: 38px; /* Same as height */
    text-align: center;
    font-weight: bold;
}
 
. form-2 input[type=submit] {
    margin-left: 1%;
    background: linear-gradient(#fbd568, #ffb347);
    border: 1px solid #f4ab4c;
    color: #996319;
    text-shadow: 0 1px rgba(255,255,255,0.3);
}
 
.form-2 .log-twitter {
    margin-right: 1%;
    background: linear-gradient(#34a5cf, #2a8ac4);
    border: 1px solid #2b8bc7;
    color: #ffffff;
    text-shadow: 0 -1px rgba(0,0,0,0.3);
    text-decoration: none;
}

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

.form-2 input[type=submit]:hover,
.form-2 .log-twitter:hover {
    box-shadow:
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 20px 40px rgba(255,255,255,0.15);
}
 
.form-2 input[type=submit]:active,
.form-2 .log-twitter:active{
    top: 1px;
}

Благодаря относительному позиционированию, мы можем применить top: 1px к кнопкам в активном состоянии, чтобы они выглядели так, как будто они вдавливаются при нажатии.

Важно: для браузеров, которые не поддерживают box-shadow (такие все еще существуют, правда?), мы используем вместо этого изменение background-color. Класс no-boxshadow применяется к тегу HTML при помощи Modernizr, в случае если браузер не поддерживает box-shadow. Это хороший пример того, как можно создать простой «fallback» для старых браузеров:

.no-boxshadow .form-2 input[type=submit]:hover {
    background: #ffb347;
}
 
.no-boxshadow .form-2 .log-twitter:hover {
    background: #2a8ac4;
}

JavaScript

Эй, вы не забыли про нашу маленькую фичу «показать пароль»? Сейчас мы сделаем это! Во-первых, вы знаете, что мы не можем изменить тип атрибута для поля?  Для того, чтобы показать пароль, мы должны удалить фактическое ввода для пароля и создать новое текстовое поле.

Я не очень хорошо знаю jQuery, так что я нашел маленький фрагмент кода от Aaron Saray:

$(function(){
    $(«.showpassword»).each(function(index,input) {
        var $input = $(input);
        $(«<p/>»). append(
            $(«<input type=’checkbox’ />»).click(function() {
                var change = $(this).is(«:checked») ? «text» : «password»;
                var rep = $(«<input placeholder=’Password’ type='» + change + «‘ />»)
                    .attr(«id», $input.attr(«id»))
                    .attr(«name», $input.attr(«name»))
                    .attr(‘class’, $input.attr(‘class’))
                    .val($input.val())
                    .insertBefore($input);
                $input.remove();
                $input = rep;
             })
        ).append($(«<label for=’showPassword’/>»).text(«Показать пароль»)).insertAfter($input.parent());
    });
});

Так что же это скрипт делает?

  • Он находит поле с классом .showpassword.
  • Создает новый контейнер (.opt).
  • Внутри этого контейнера, он создает чекбокс с надписью.
  • Вставляет этот контейнер после поля с классом . showpassword.
  • Когда чекбокс отмечен, он удаляет поле .showpassword и создает еще одно, с соответствующим атрибутом type.

Не забудем задать некоторые стили для нашего чекбокса:

.form-2 p:last-of-type {
    clear: both;  
}
 
.form-2 .opt {
    text-align: right;
    margin-right: 3px;
}
 
.form-2 label[for=showPassword] {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 400;
    text-transform: capitalize;
}
 
.form-2 input[type=checkbox] {
    vertical-align: middle;
    margin: -1px 5px 0 1px;
}

Последнее, но не менее важное, мы добавим несколько строк jQuery, чтобы изменить значок, когда чекбокс отмечен! Довольно просто, но весьма эффективно!

$(‘#showPassword’).click(function(){
    if($(«#showPassword»).is(«:checked»)) {
        $(‘.icon-lock’).addClass(‘icon-unlock’);
        $(‘.icon-unlock’).removeClass(‘icon-lock’);  
    } else {
        $(‘. icon-unlock’).addClass(‘icon-lock’);
        $(‘.icon-lock’).removeClass(‘icon-unlock’);
    }
});

Пример 3

Этот пример вдохновлен старой работой от Virgil Pana с Dribbble. К сожалению, похоже, что он удалил её с Dribbble, так что я не могу показать вам оригинальную концепцию. В любом случае, вы, наверное, поняли смысл, и я покажу вам, как создать этот удивительный световой эффект при помощи чистого CSS!

Разметка

<form>
    <p>
        <label for=»login»>Логин</label>
        <input type=»text» name=»login» placeholder=»Логин»>
    </p>
    <p>
        <label for=»password»>Пароль</label>
        <input type=»password» name=»password» placeholder=»Пароль»>
    </p>
    <p>
        <input type=»checkbox» name=»remember»>
        <label for=»remember»>Запомнить меня</label>
    </p>
    <p>
        <input type=»submit» name=»submit» value=»Войти»>
    </p>      
</form>

Обратите внимание, что мы добавили новое поле: «Запомнить меня». Оно используется в формах авторизации, что позволяет приложению запоминать вас.

CSS

.form-3 {
    font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
    font-weight: 400;
    /* Size and position */
    width: 300px;
    position: relative;
    margin: 60px auto 30px;
    padding: 10px;
    overflow: hidden;
 
    /* Styles */
    background: #111;
    border-radius: 0.4em;
    border: 1px solid #191919;
    box-shadow:
        inset 0 0 2px 1px rgba(255,255,255,0.08),
        0 16px 10px -8px rgba(0, 0, 0, 0.6);
}

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

Давайте добавим стили для лэйблов и текстовых полей:

.form-3 label {
    /* Size and position */
    width: 50%;
    float: left;
    padding-top: 9px;
 
    /* Styles */
    color: #ddd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 #000;
    text-indent: 10px;
    font-weight: 700;
    cursor: pointer;
}
 
. form-3 input[type=text],
.form-3 input[type=password] {
    /* Size and position */
    width: 50%;
    float: left;
    padding: 8px 5px;
    margin-bottom: 10px;
    font-size: 12px;
 
    /* Styles */
    background: linear-gradient(#1f2124, #27292c);  
    border: 1px solid #000;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1);
    border-radius: 3px;
 
    /* Font styles */
    font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
    color: #fff;
 
}
 
.form-3 input[type=text]:hover,
.form-3 input[type=password]:hover,
.form-3 label:hover ~ input[type=text],
.form-3 label:hover ~ input[type=password] {
    background: #27292c;
}
 
.form-3 input[type=text]:focus,
.form-3 input[type=password]:focus {
    box-shadow: inset 0 0 2px #000;
    background: #494d54;
    border-color: #51cbee;
    outline: none; /* Remove Chrome outline */
}

Теперь у нас есть красивые поля и мы должны создать наш маленький флажок «Запомнить меня», и кнопку отправки. Эти две вещи размещенны рядом друг с другом:

.form-3 p:nth-child(3),
.form-3 p:nth-child(4) {
    float: left;
    width: 50%;
}

Давайте начнем с чекбокса и его лэйбла:

.form-3 label[for=remember] {
    width: auto;
    float: none;
    display: inline-block;
    text-transform: capitalize;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0px;
    text-indent: 2px;
}
 
.form-3 input[type=checkbox] {
    margin-left: 10px;
    vertical-align: middle;
}

Поскольку этот лэйбл довольно сильно отличается от других, мы должны настроить несколько вещей: в первую очередь это удаление ранее установленных стилей. Что касается чекбокса, мы добавим маленький отступ справа, чтобы предотвратить «прилипание» лэйбла к нему.

Последнее, наша кнопка отправки:

.form-3 input[type=submit] {
    /* Width and position */
    width: 100%;
    padding: 8px 5px;
   
    /* Styles */
    border: 1px solid #0273dd; /* Fallback */
    border: 1px solid rgba(0,0,0,0. 4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 10px 10px rgba(255,255,255,0.1);
    border-radius: 3px;
    background: #38a6f0;
    cursor:pointer;
   
    /* Font styles */
    font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
    color: white;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
 
.form-3 input[type=submit]:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
 
.form-3 input[type=submit]:active {
    background: #287db5;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
    border-color: #000; /* Fallback */
    border-color: rgba(0,0,0,0.9);
}
 
.no-boxshadow .form-3 input[type=submit]:hover {
    background: #2a92d8;
}

Но где, черт возьми, наш обещанный световой эффект? Ладно, ребята, давайте займемся им. Чтобы добиться этого, нам нужны три элемента:

  • Один для линии градиента в верхней части формы
  • Один для небольшую вспышки на предыдущей строке
  • Один для большого отражения в правой части формы

Начнем с первых двух элементов, при помощи псевдо-элементов для тега form.

/* Gradient line */
.form-3:after {
    /* Size and position */
    content: «»;
    height: 1px;
    width: 33%;
    position: absolute;
    left: 20%;
    top: 0;
 
    /* Styles */
    background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
 
/* Small flash */
.form-3:before {
    /* Size and position */
    content: «»;
    width: 8px;
    height: 5px;
    position: absolute;
    left: 34%;
    top: -7px;
     
    /* Styles */
    border-radius: 50%;
    box-shadow: 0 0 6px 4px #fff;
}

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

.form-3 p:nth-child(1):before{
    /* Size and position */
    content: «»;
    width: 250px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 45px;
 
    /* Styles */
    transform: rotate(75deg);
    background: linear-gradient(50deg, rgba(255,255,255,0. 15), rgba(0,0,0,0));
    pointer-events: none;
}

Важно: вы должны отключить события click при помощи свойства pointer-events. Если вы этого не сделаете, вы не сможете нажать на input, так как там будет слой поверх них. Мы будем вынуждены удалить отражения для браузеров, которые не поддерживают pointer-events (мы добавили соответствующий класс при помощи Modernizr):

.no-pointerevents .form-3 p:nth-child(1):before {
    display: none;
}

Пример 4

Особенностью этой формы является отсутствие лэйблов или иконок. Да, я помню, что я говорил ранее, что нам необходимо иметь что-то, чтобы сообщить пользователям, что нужно вводить в то или иное поле. И у нас это есть! Мы будем использовать placeholders. А для браузеров, которые не поддерживают их, мы сделаем видимыми лэйблы!

Разметка

<form>
    <h2>Форма входа</h2>
    <p>
        <label for=»login»>Логин или email</label>
        <input type=»text» name=»login» placeholder=»Логин или email» required>
    </p>
    <p>
        <label for=»password»>Пароль</label>
        <input type=»password» name=’password’ placeholder=»Пароль» required>
    </p>
 
    <p>
        <input type=»submit» name=»submit» value=»Продолжить»>
    </p>      
</form>

Обратите внимание на атрибут required. Этот атрибут позволяет браузеру, если он его поддерживает, проверять пустое поле или нет, и сабмитить форму если поле заполнено.

Важно: вы всегда должны добавлять серверную проверку после отправки формы. При помощи веб-инспектора или firebug-a очень легко удалить этот атрибут и JavaScript также может быть отключен, так что не полагайтесь только на валидацию стороне клиента.

CSS

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

.form-4 {
    /* Size and position */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative;
 
    /* Font styles */
    font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
    color: white;
    text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}
 
.form-4 h2 {
    font-size: 22px;
    padding-bottom: 20px;
}

Давайте перейдем к полям:

.form-4 input[type=text],
.form-4 input[type=password] {
    /* Size and position */
    width: 100%;
    padding: 8px 4px 8px 10px;
    margin-bottom: 15px;
 
    /* Styles */
    border: 1px solid #4e3043; /* Fallback */
    border: 1px solid rgba(78,48,67, 0. 8);
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.2),
        inset 0 1px 1px rgba(0,0,0,0.1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
 
    /* Font styles */
    font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
    color: #fff;
    font-size: 13px;
}

Теперь изменим стили для placeholders (где это возможно):

.form-4 input::-webkit-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
 
.form-4 input:-moz-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
 
.form-4 input:-ms-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0. 15);
}

Далее, давайте добавим стили для состояний hover и focus:

.form-4 input[type=text]:hover,
.form-4 input[type=password]:hover {
    border-color: #333;
}
 
.form-4 input[type=text]:focus,
.form-4 input[type=password]:focus,
.form-4 input[type=submit]:focus {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.2),
        inset 0 1px 1px rgba(0,0,0,0.1),
        0 0 0 3px rgba(255,255,255,0.15);
    outline: none;
}
 
/* Fallback */
.no-boxshadow .form-4 input[type=text]:focus,
.no-boxshadow .form-4 input[type=password]:focus {
    outline: 1px solid white;
}

И кнопки отправки:

.form-4 input[type=submit] {
    /* Size and position */
    width: 100%;
    padding: 8px 5px;
     
    /* Styles */
    background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));  
    border-radius: 5px;
    border: 1px solid #4e3043;
    box-shadow:
        inset 0 1px rgba(255,255,255,0. 4),
        0 2px 1px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease-out;
 
    /* Font styles */
    color: white;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    font-size: 16px;
    font-weight: bold;
    font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
}
 
.form-4 input[type=submit]:hover {
    box-shadow:
        inset 0 1px rgba(255,255,255,0.2),
        inset 0 20px 30px rgba(99,64,86,0.5);
}
 
/* Fallback */
.no-boxshadow .form-4 input[type=submit]:hover {
    background: #594642;
}

А теперь, давайте займемся запасным вариантом, на тот случай когда браузер не поддерживает placeholders.

.form-4 label {
    display: none;
    padding: 0 0 5px 2px;
    cursor: pointer;
}
 
.form-4 label:hover ~ input {
    border-color: #333;
}
 
.no-placeholder .form-4 label {
    display: block;
}

Это очень просто, если placeholders не поддерживается, то будут видны лэйблы.

Пример 5

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

Разметка

<form>
    <p>
        <input type=»text» name=»login» placeholder=»Логин»>
        <input type=»password» name=»password» placeholder=»Пароль»>
    </p>
    <button type=»submit» name=»submit»>
        <i></i>
        <span>Вход</span>
    </button>    
</form>

Минималистичная разметка для минималистичного вида. 😉

CSS

.form-5 {
    /* Size and position */
    width: 300px;
    margin: 60px auto 30px;
    position: relative;
 
    /* Styles */
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);
}

Стили для параграфов и полей:

. form-5 p {
    width: 70%;
    float: left;
    border-radius: 5px 0 0 5px;
    border: 1px solid #fff;
    border-right: none;
}
 
.form-5 input[type=text],
.form-5 input[type=password] {
    /* Size and position */
    width: 100%;
    height: 50px;
    padding: 0 10px;
 
    /* Styles */
    border: none; /* Remove the default border */
    background: white; /* Fallback */
    background: rgba(255,255,255,0.2);
    box-shadow:
        inset 0 0 10px rgba(255,255,255,0.5);
 
    /* Font styles */
    font-family: ‘Montserrat’, sans-serif;
    text-indent: 10px;
    color: #ee4c8d;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-size: 20px;      
}
 
.form-5 input[type=text] {
    border-bottom: 1px solid #fff; /* Fallback */
    border-bottom: 1px solid rgba(255,255,255,0.7);
    border-radius: 5px 0 0 0;
}
 
.form-5 input[type=password] {
    border-top: 1px solid #CCC; /* Fallback */
    border-top: 1px solid rgba(0,0,0,0. 1);
    border-radius: 0 0 0 5px;
}

Давайте попробуем применить некоторые стили при наведении мыши и стили для placeholders:

.form-5 input[type=text]:hover,
.form-5 input[type=password]:hover,
.form-5 input[type=text]:focus,
.form-5 input[type=password]:focus {
    background: #f7def7; /* Fallback */
    background: rgba(255,255,255,0.4);
    outline: none;
}
 
.form-5 input::-webkit-input-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: ‘Handlee’, cursive;
}
 
.form-5 input:-moz-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: ‘Handlee’, cursive;
}
 
.form-5 input:-ms-input-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: ‘Handlee’, cursive;
}

А теперь для кнопки отправки. Тег i будет содержать значок стрелки, но мы будем делать его видимым только при наведении курсора мыши. Обратите внимание, что мы используем тег span внутри кнопки, чтобы включить текст без включения кнопки.

.form-5 button {
    /* Size and position */
    width: 30%;
    height: 102px;
    float: left;
    position: relative;
    overflow: hidden;
 
    /* Styles */
    background:
        url(../images/noise.png),
        radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);
    border-radius: 0 5px 5px 0;
    box-shadow:
        inset 0 0 4px rgba(255, 255, 255, 0.7),
        inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    border: none;
    border-left: 1px solid silver;
    cursor: pointer;
    line-height: 102px; /* Same as height */
}
 
.form-5 button i {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -20px;
    font-size: 64px;
    line-height: 109px;
    color: #8d1645;
    opacity: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0. 4);
    transition: all 0.2s ease-out;
}
 
.form-5 button span {
    display: block;
 
    /* Font styles */
    color: #8d1645;
    font-family: ‘Montserrat’, Arial, sans-serif;
    font-size: 20px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    transform: rotate(-90deg);
    transition: all 0.2s linear;
}

В случае, если браузер не поддерживает свойство transform, текст просто не поворачивается. Ничего страшного.
Мы добавили тонкую текстуру для кнопки, применяя два фона: текстуру и радиальный градиент.

Теперь, давайте добавим стили для состояний hover, focus и active:

.form-5 button:focus {
    outline: none;
}
 
.form-5 button:hover span,
.form-5 button:focus span {
    opacity: 0;
    transform: rotate(-90deg) translateY(-20px);
}
 
.form-5 button:hover i,
.form-5 button:focus i {
    opacity: 0.5;
    left: 0;
    transition-delay: 0.2s;
}
 
/* Click on button */
 
. form-5 button:active span,
.form-5 button:active i {
    transition: none;
}
 
.form-5 button:active span {
    opacity: 0;
}
 
.form-5 button:active i {
    opacity: 0.5;
    left: 0;
    color: #fff;
}  

JavaScript

Мы используем код JavaScript для добавления поведения HTML5 placeholder для браузеров, которые не поддерживают его. Мы собираемся использовать jQuery плагин от Mathias Bynens. Смотрите на GitHub.

После подключения jQuery и скрипта, мы просто вызовем следующий код:

$(function(){
    $(‘input, textarea’).placeholder();
});

И это будет добавить placeholder в старые браузеры.

И это все! Спасибо за чтение этого урока, надеюсь вам понравилось!

Скачать исходные файлы

Перевод статьи с http://tympanus.net/codrops/


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Кнопка «Наверх» на jQuery, покруче, чем в вконтакте

На сайте вконтакте в левом верхнем углу есть вот такая кнопка:

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

Попробуем сделать что-нибудь подобное, но с некоторыми доработками. Копировать оттуда код я не собираюсь, напишу что-нибудь своё.

Обратите внимание, что пост опубликован в 2011-м году, с того времени кнопка вконтакте претерпела некоторые изменения, например:

  • появилась и исчезла возможность перехода на предыдущую страницу при прокрутке наверх,
  • в данным момент (2013 год) после прокрутки наверх, кнопка позволяет вернуться в то место на странице, откуда была совершена прокрутка;

Эти два варианта кнопки я подробно описал в следующем посту.

HTML кнопки

Сам HTML довольно прост и состоит из всего пары строк:

<div>
	<a href="#top">наверх</a>
</div>

Вставляем этот код перед закрывающим тегом </body>. Если хотите, вы можете изменить ID блока и анкор ссылки, но при этом не забудьте их поменять также и в остальном коде.

Подключение CSS и JavaScript файлов

Для того, чтобы кнопка нормально функционировала, нам понадобятся:

  • немного стилей CSS,
  • библиотека jQuery,
  • и немного кода JavaScript;

Всё это мы подробно рассмотрим дальше в статье, а пока что разберемся, как правильно подключать их на сайт.

Проблем с CSS думаю возникнуть не должно — вы просто находите файл, в котором содержатся все основные стили сайта и вставляете туда код, который будет представлен в листингах ниже.

Что касается JavaScript, то я предлагаю рассмотреть два способа подключения — для WordPress и не для WordPress. начнем со второго.

Способ 1. Не для WordPress

Итак, здесь мы подключаем jQuery и какой-то js-файл, пока что пустой. Этот код вы можете поместить перед HTML, который мы вставляли в первом шаге.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="button.js"></script>

Так, внимание, у многих были проблемы с подключением файла button. js — используйте абсолютный URL файла.

Способ 2. Для WordPress

Здесь всё обстоит иначе. Для подключения мы будем использовать функцию wp_enqueue_script(). Код ниже нужно вставлять в functions.php текущей темы:

function true_top_button_enqueue() {
	wp_enqueue_script( 'jquery' );
 	wp_enqueue_script( 'topbutton', get_stylesheet_directory_uri() . '/button.js', array('jquery'), null, true );
}
 
add_action( 'wp_enqueue_scripts', 'true_top_button_enqueue' );

Если вы будете использовать код из этого примера один в один, то файл button.js нужно будет засунуть непосредственно в папку с текущей темой. Для получения URL текущей темы в примере используется функция get_stylesheet_directory_uri().

Стили CSS

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

#top-link{
	cursor:pointer; /* изменяем указатель мыши при наведении на блок */
	display:none; /* скрываем блок с кнопкой, т. к. отображать надо только при прокрутке */
	position:fixed; /* фиксируем расположение */
	left:0px;
	top:0px;
	padding:0;
}
#top-link a{
	display:block; 
}

jQuery. Содержимое файла button.js

Сначала уясним несколько моментов:

  • кнопка должна приспосабливаться под разные разрешения экрана,
  • кнопка должна автоматически изменять свою ширину, если мы будем сужать или расширять окно браузера,
  • поддержка мобильных устройств;

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

jQuery.extend(jQuery.fn, {
	toplinkwidth: function(){
		var totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
		var totalTopLinkWidth = jQuery(this).children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
		var h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
		if(h<0){
			// если кнопка не умещается, скрываем её
			jQuery(this). hide();
			return false;
		} else {
			if(jQuery(window).scrollTop() >= 1){
				jQuery(this).show();
			}
			jQuery(this).css({'padding-right': h+'px'});
			return true;
		}
	}
});
 
jQuery(function($){
	var topLink = $('#top-link');
	topLink.css({'padding-bottom': $(window).height()});
	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
	topLink.toplinkwidth();
	$(window).resize(function(){
		topLink.toplinkwidth();
	});
	$(window).scroll(function() {
		if($(window).scrollTop() >= 1 && topLink.toplinkwidth()) {
			topLink.fadeIn(300);
		} else {
			topLink.fadeOut(300);
		}
	});
	topLink.click(function(e) {
		$("body,html").animate({scrollTop: 0}, 500);
		return false;
	});
});

Если что-то не будет получаться, оставьте свой вопрос в комментариях — я вам помогу.

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Быстрый старт / Методология / БЭМ

Введение

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

Содержание

Блок

Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.

Особенности:

  • Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

Пример

<div></div>


<div></div>
  • Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.

  • В CSS по БЭМ также не рекомендуется использовать селекторы по тегам или id.

Таким образом обеспечивается независимость, при которой возможно повторное использование или перенос блоков с места на место.

Принцип работы с блоками

Вложенность
  • Блоки можно вкладывать друг в друга.

  • Допустима любая вложенность блоков.

Пример

<header>
    
    <div></div>

    
    <form></form>
</header>

Элемент

Составная часть блока, которая не может использоваться в отрыве от него.

Особенности:

  • Название элемента характеризует смысл («что это?» — «пункт»: item, «текст»: text), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

  • Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента. Имя элемента отделяется от имени блока двумя подчеркиваниями (__).

Пример

<form>
    
    <input>

    
    <button>Найти</button>
</form>

Принципы работы с элементами

Вложенность
  • Элементы можно вкладывать друг в друга.

  • Допустима любая вложенность элементов.

  • Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2.

Пример

<form>
    <div>
        <input>
        <button>Найти</button>
    </div>
</form>


<form>
    <div>
        
        <input>

        
        <button>Найти</button>
    </div>
</form>

Имя блока задает пространство имен, которое гарантирует зависимость элементов от блока (block__elem).

Блок может иметь вложенную структуру элементов в DOM-дереве:

Пример

<div>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>

Однако эта же структура блока в методологии БЭМ всегда будет представлена плоским списком элементов:

Пример

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

Это позволяет изменять DOM-структуру блока без внесения правок в коде каждого отдельного элемента:

Пример

<div>
    <div>
        <div></div>
    </div>

    <div></div>
</div>

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

Принадлежность

Элемент — всегда часть блока и не должен использоваться отдельно от него.

Пример

<form>
    
    <input>

    
    <button>Найти</button>
</form>



<form>
</form>


<input>


<button>Найти</button>
Необязательность

Элемент — необязательный компонент блока. Не у всех блоков должны быть элементы.

Пример

<div>
    
    <input>

    
    <button>Найти</button>
</div>

Когда создавать блок, когда — элемент?

Создавайте блок

Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.

Создавайте элемент

Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).

Исключение составляют элементы, реализация которых для упрощения разработки требует разделения на более мелкие части — подэлементы. В БЭМ-методологии нельзя создавать элементы элементов. В подобном случае вместо элемента необходимо создавать служебный блок.

Модификатор

Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Особенности:

  • Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).

  • Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

Типы модификаторов

Булевый
  • Используют, когда важно только наличие или отсутствие модификатора, а его значение несущественно. Например, «отключен»: disabled. Считается, что при наличии булевого модификатора у сущности его значение равно true.

  • Структура полного имени модификатора соответствует схеме:

    • имя-блока_имя-модификатора;

    • имя-блока__имя-элемента_имя-модификатора.

Пример

<form>
    <input>

    
    <button>Найти</button>
</form>
Ключ-значение
  • Используют, когда важно значение модификатора. Например, «меню с темой оформления islands»: menu_theme_islands.

  • Структура полного имени модификатора соответствует схеме:

    • имя-блока_имя-модификатора_значение-модификатора;

    • имя-блока__имя-элемента_имя-модификатора_значение-модификатора.

Пример

<form>
    <input>

    
    <button>Найти</button>
</form>


<form>

    <input>

    <button>
        Найти
    </button>
</form>

Принципы работы с модификаторами

Модификатор нельзя использовать самостоятельно

С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента. Модификатор должен изменять вид, поведение или состояние сущности, а не заменять ее.

Пример

<form>
    <input>

    <button>Найти</button>
</form>


<form>
    <input>

    <button>Найти</button>
</form>

Зачем в именах модификаторов и элементов указывать имя блока?

Микс

Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле.

Миксы позволяют:

  • совмещать поведение и стили нескольких сущностей без дублирования кода;

  • создавать семантически новые компоненты интерфейса на основе имеющихся.

Пример

<div>
    
    <div></div>
</div>

В данном примере мы совместили поведение и стили блока search-form и элемента search-form блока header. Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form, а сам блок search-form оставить универсальным. Таким образом, блок можно использовать в любом другом окружении, потому что он не специфицирует никакие отступы. Это позволяет нам говорить о его независимости.

Файловая структура

Принятый в методологии БЭМ компонентный подход применяется и к организации проектов в файловой структуре. Реализации блоков, элементов и модификаторов делятся на независимые файлы-технологии, что позволяет нам подключать их опционально.

Особенности:

  • Один блок — одна директория.

  • Имена блока и его директории совпадают. Например, блок header — директория header/, блок menu — директория menu/.

  • Реализация блока разделяется на отдельные файлы-технологии. Например, header.css, header.js.

  • Директория блока является корневой для поддиректорий соответствующих ему элементов и модификаторов.

  • Имена директорий элементов начинаются с двойного подчеркивания (__). Например, header/__logo/, menu/__item/.

  • Имена директорий модификаторов начинаются с одинарного подчеркивания (_). Например, header/_fixed/, menu/_theme_islands/.

  • Реализации элементов и модификаторов разделяются на отдельные файлы-технологии. Например, header__input.js, header_theme_islands.css.

Пример

search-form/                           # Директория блока search-form

    __input/                           # Поддиректория элемента search-form__input
        search-form__input.css         # Реализация элемента search-form__input
                                       # в технологии CSS
        search-form__input.js          # Реализация элемента search-form__input
                                       # в технологии JavaScript

    __button/                          # Поддиректория элемента search-form__button
        search-form__button.css
        search-form__button.js

    _theme/                            # Поддиректория модификатора
                                       # search-form_theme
        search-form_theme_islands.css  # Реализация блока search-form, имеющего
                                       # модификатор theme со значением islands
                                       # в технологии CSS
        search-form_theme_lite.css     # Реализация блока search-form, имеющего
                                       # модификатор theme со значением lite
                                       # в технологии CSS

    search-form.css                    # Реализация блока search-form
                                       # в технологии CSS
    search-form.js                     # Реализация блока search-form
                                       # в технологии JavaScript

Такая файловая структура позволяет легко поддерживать и повторно использовать код.

Разветвленная файловая структура предполагает, что в production код будет собираться в общие файлы проекта.

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

Краткое руководство. Создание статического веб-приложения HTML — Azure App Service

  • Чтение занимает 3 мин

В этой статье

Служба приложений Azure — это служба веб-размещения с самостоятельной установкой исправлений и высоким уровнем масштабируемости. В этом кратком руководстве объясняется, как развернуть простейший сайт HTML+CSS в Служба приложений Azure. Действия в этом руководстве выполняются в Cloud Shell, но эти же команды можно выполнить локально в Azure CLI.

Если у вас еще нет подписки Azure, создайте бесплатную учетную запись Azure, прежде чем начать работу.

Использование Azure Cloud Shell

В Azure есть Azure Cloud Shell, интерактивная оболочка среды, с которой можно работать в браузере. Для работы со службами Azure можно использовать Bash или PowerShell с Cloud Shell. Для запуска кода из этой статьи можно использовать предварительно установленные команды Cloud Shell. Ничего дополнительного в локальной среде устанавливать не нужно.

Начало работы с Azure Cloud Shell

Параметр Пример и ссылка
Нажмите кнопку Попробовать в правом верхнем углу блока с кодом. При нажатии кнопки Попробовать код не копируется в Cloud Shell автоматически.
Перейдите по адресу https://shell.azure.com или нажмите кнопку Запуск Cloud Shell, чтобы открыть Cloud Shell в браузере.
Нажмите кнопку Cloud Shell в строке меню в правом верхнем углу окна портала Azure.

Чтобы выполнить код из этой статьи в Azure Cloud Shell, выполните следующие действия:

  1. Запустите Cloud Shell.

  2. В блоке кода нажмите кнопку Копировать, чтобы скопировать код.

  3. Вставьте код в окно сеанса Cloud Shell, нажав клавиши CTRL+SHIFT+V в Windows и Linux или CMD+SHIFT+V в macOS.

  4. Нажмите клавишу ВВОД, чтобы выполнить код.

Скачивание примера приложения

В Cloud Shell создайте каталог quickstart и перейдите в него.

mkdir quickstart

cd $HOME/quickstart

Затем выполните следующую команду, чтобы клонировать репозиторий с примером приложения в локальный каталог quickstart.

git clone https://github.com/Azure-Samples/html-docs-hello-world.git

Создание веб-приложения

Перейдите в каталог, в котором содержится пример кода, и выполните команду az webapp up. В следующем примере замените <app_name> уникальным именем приложения. Статическое содержимое обозначается флагом --html.

cd html-docs-hello-world

az webapp up --location westeurope --name <app_name> --html

Команда az webapp up выполняет следующие действия:

  • создание группы ресурсов по умолчанию;

  • создание плана службы приложений по умолчанию;

  • создание приложения с указанным именем.

  • развертывание ZIP-файлов для веб-приложения из текущего рабочего каталога.

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

{
  "app_url": "https://&lt;app_name&gt;.azurewebsites.net",
  "location": "westeurope",
  "name": "&lt;app_name&gt;",
  "os": "Windows",
  "resourcegroup": "appsvc_rg_Windows_westeurope",
  "serverfarm": "appsvc_asp_Windows_westeurope",
  "sku": "FREE",
  "src_path": "/home/&lt;username&gt;/quickstart/html-docs-hello-world ",
  &lt; JSON data removed for brevity. &gt;
}

Запишите значение resourceGroup. Оно потребуется при выполнении задач в разделе об очистке ресурсов.

Переход в приложение

В браузере перейдите по URL-адресу приложения: http://<app_name>.azurewebsites.net.

Страница выполняется как веб-приложение службы приложений Azure.

Поздравляем! Вы развернули свое первое HTML-приложение в службе приложений.

Обновление и повторное развертывание приложения

В Cloud Shell введите nano index.html, чтобы открыть текстовый редактор Nano. В теге заголовка <h2> измените запись «Azure App Service — Sample Static HTML Site» (Служба приложений Azure — пример статического HTML-сайта) на «Azure App Service» (Служба приложений Azure), как показано ниже.X — чтобы выйти.

Теперь повторно разверните приложение с помощью той же команды az webapp up.

az webapp up --location westeurope --name <app_name> --html

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

Управление новым приложением Azure

Чтобы управлять созданным веб-приложением, на портале Azure найдите в поиске и выберите Службы приложений.

На странице Службы приложений выберите имя приложения Azure.

Отобразится страница обзора вашего веб-приложения. Вы можете выполнять базовые задачи управления: обзор, завершение, запуск, перезагрузку и удаление.

В меню слева доступно несколько страниц для настройки приложения.

Очистка ресурсов

На предыдущем шаге вы создали ресурсы Azure в группе ресурсов. Если эти ресурсы вам не понадобятся в будущем, вы можете удалить группу ресурсов, выполнив приведенную ниже команду в Cloud Shell. Помните, что имя группы ресурсов автоматически создано на этапе создания веб-приложения.

az group delete --name appsvc_rg_Windows_westeurope

Ее выполнение может занять до минуты.

Дальнейшие действия

5 примеров дизайна интуитивно понятного call to action


Вы читаете перевод статьи “5 Techniques to Make Mobile Call to Action Buttons Intuitive”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

Нажимать или не нажимать – вот вопрос, который возникает у пользователей, когда они видят кнопки призыва к действию (call to action).

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Поэтому, выстраивайте приоритеты для призывов к действию (call to action) на каждом экране. И когда пользователи увидят, какая кнопка важна для их задачи, они начнут действовать моментально. В своей практике я использую несколько UX-методов, которые помогают мне существенно повышать интуитивность кнопок призыва к действию (call to action).

Упорядочьте кнопки в соответствии с паттерном сканирования

Одной из распространенных ошибок в приложениях является размещение кнопок в порядке, который идет вразрез с естественным шаблоном сканирования экрана взглядом. Сценарий ошибки такой. Сначала размещают кнопку с наивысшим приоритетом, потому что хотят, чтобы пользователи заметили ее первой. А затем все остальные. Но это плохой подход. Пользователи заметят кнопку независимо от порядка, если она обладает визуальным весом.

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

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

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

Создавайте отличия кнопки и от простой текстовой метки

Еще одна ошибка ui-дизайна – использовать для кнопки только текст.

Дизайнеры используют текстовые кнопки, чтобы показать, какие действия имеют более низкий приоритет. Но это плохое решение для дизайна призывов к действию (Call to Action), потому что текст не воспринимается как кнопка. В итоге пользователи пропускают такие призывы действия и замечают только самый контрастный.

Текстовые кнопки также вызывают путаницу, вызывают вопросы и сомнения на тему, является ли текст кнопкой или просто сообщением. И такая неопределенность снова приводит к пропуску таких кнопок.

А еще текстовые кнопки не только сбивают с толку, но и снижают конверсию в клик, т.е нажатий становится меньше. Но если поместить текстовую фразу внутрь прямоугольника с формой кнопки, то призыв к действию становится сильно заметнее и кликабельнее.

Форма – хороший способ подчеркнуть действие с низким приоритетом. Такая кнопка сильнее, чем текстовая кнопка. Пользователи воспринимают такие кнопки, задача которые предложить альтернативные сценарии на маршруте до цели.

Выделите цветом этапы движения к цели (прогрессивные действия)

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

В этом примере «checkout» («оформить заказ») имеет высокий приоритет, поскольку направляет пользователей к цели. Но не ясно, какое действие имеет средний приоритет «view cart» («перейти в корзину») или «keep shopping» («продолжить покупки»).

Действие «Перейти в корзину» («view cart») позволяет пользователям вернуться к товарам, уже добавленным в корзину, что в итоге приведет к оформлению заказа. Действие «Продолжить покупки» («keep shopping») возвращает пользователей к страницам с товарами, тем самым отдаляя их от пункта оформления заказа.

Изучив все эти действия, становится ясно, что «Перейти в корзину» («view cart») имеет средний приоритет, а «Продолжить покупки» («keep shopping») – низкий приоритет. Сделать выбор очень легко, если вы понимаете какой цели хотят достичь ваши пользователи и какое действие в итоге сделать приоритетнее (так как он двигает пользователей к цели), а какое приоритетом пониже (так как оно отдаляет от цели).

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

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

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

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

Чтобы увеличить контрастность, можно сделать инверсию. Используйте светлый текст на темном фоне для основной кнопки и темный на светлом для дополнительного действия. Это придает действию с высоким приоритетом более яркую текстовую метку и максимальную контрастность.

Варьируйте полужирный стиль текстовых меток

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

Одинаковый визуальный вес текстовых меток делает на них одинаковый акцент. Лучше выделять каждую текстовую метку по-разному в зависимости от приоритета. Измените жирность текстовых меток, чтобы кнопки с высоким приоритетом были самыми жирными, а кнопки с низким приоритетом – наименее жирными. В итоге когда пользователи начнут скользить глазами по меткам, вес кнопок подскажет приоритет.

В этом примере мы разобрали, как метка «checkout» («оформить заказ») стала более яркой и жирной (bolder and brighter), чем остальные. Метка «Перейти в корзину» («view cart») полужирной (semibold), а метка «Продолжить покупки» («keep shopping») стала средней жирности (medium). Теперь наши текстовые метки отражают визуальный вес каждого действия. Текст, обозначающий количество товаров, добавленных в корзину, на ярлыке «Перейти в корзину» («view cart»), не выделен полужирным шрифтом, поскольку это дополнительная информация, которая напрямую не ведет к цели.

Добавьте иконку к действию с высоким приоритетом

Последняя на сегодня техника – вишенка на торте, которая сделает ваши кнопки доступными для дальтоников. Пользователи, страдающие от цветовой слепоты, не смогут определить разницу между весом кнопок. Им нужна подсказка яснее, чем просто цвет.

Добавление иконки к высокоприоритетному действию усилит его контраст. Помните, когда пользователи сканируют страницу, они в первую очередь фиксируют внимание на визуальных знаках, а не на тексте. Иконка гарантирует, что все пользователи будут уделять больше внимания высокоприоритетным действиям.

Если вы удалите цвет и метку, пользователи все равно смогут распознать кнопку «checkout» («оформить заказ»). Значок «checkout» звучит так же, как и текст.

Как найти проблемные кнопки

Ваши кнопки не интуитивно понятны, если пользователи проводят много времени на экране действий, а быть может у вас просто низкий CTR (click through rate). Если дело обстоит именно так, используйте всех эти методы, чтобы улучшить UX кнопок призыва к действию. И вы увидите видимые различия в метриках после этих улучшений.

Практика | Руководство по настройке

Select Language РусскийDeutschEnglishEspañolFrançaisItalianoNederlandsPolskiPycckий简体中文繁體中文한국어

Практика

На данной странице приведены примеры пользовательской настройки, а также сценарии съемки. Используйте их как образец в соответствии с вашими предпочтениями и стилем работы.

Съемка
  1. Процесс автофокусировки без помощи кнопки затвора (AF Включен)
  2. Съемка объекта с применением функции «AF на глаз» (объекта, который можно распознать как лицо)
  3. Мгновенное переключение между несколькими настройками области фокусировки ([Рег.польз.настр.съе])
  4. Фокусировка в конкретном часто используемом положении ([Регистр. обл. AF])
  5. Съемка объекта, движущегося только в сторону (или по вертикали)
  6. Временное изменение выдержки затвора ([Рег.польз.настр.съе])
  7. Настройка зоны фокусировки при частом изменении ориентации камеры между вертикальной и горизонтальной ([Перекл. В/Г о.AF])
  8. Съемка фотографий в диапазоне телефото путем изменения угла обзора (APS-C/Super 35mm)
  9. Включение или выключение индикации уровня яркости/переэкспонирования (Зебра)
  10. Увеличение изображения в режиме ручной фокусировки при использовании объектива другого производителя и т. д.
  11. Включение/выключение функции усиления контуров в режимах ручной фокусировки
Просмотр
  1. Защита или оценка изображений
  2. Воспроизведение только защищенных или оцененных изображений

1. Процесс автофокусировки без помощи кнопки затвора (AF Включен)


Нажимайте на кнопку затвора указательным пальцем, а на кнопку AF-ON — большим пальцем.

Можно управлять автофокусировкой и спуском затвора независимо друг от друга, не активируя функцию автофокуса нажатием кнопки затвора наполовину. Обычно такой способ называется «автофокусировка задней кнопкой», поскольку функция автофокуса активируется с помощью кнопки на задней панели камеры. Данный способ полезен в следующих ситуациях.

  • Если требуется сфокусироваться на определенном расстоянии до объекта съемки, спрогнозировав положение объекта в кадре
  • Если неудобно держать кнопку затвора нажатой наполовину в течение долгого времени
  • Если необходимо настроить приоритет спуска затвора, например во время съемки птицы при взлете
  • Если требуется управлять функциями автофокусировки и автоэкспозиции независимо друг от друга

Если объект движется, установите для параметра [Режим фокусиров.] значение [AF-C]. Во время удержания кнопки AF-ON камера непрерывно фокусируется на объекте. В этом случае кнопку затвора можно отпустить точно в нужный момент.

Если объект неподвижен, установите для параметра [Режим фокусиров.] значение [AF-S]. При нажатии кнопки AF-ON фокус фиксируется до повторного нажатия этой же кнопки. Вы можете сделать отличный снимок объекта с фиксированным фокусом.

Предварительная подготовка MENU → 1 → [AF с затвором] → [Выкл]
MENU → 1 →[Предварител. AF] → [Выкл]
[Режим фокусиров.]: Для движущихся объектов установите значение [AF-C]. Для неподвижных объектов установите значение [AF-S].
Если требуется назначить функцию [AF Включен] не кнопке AF-ON, а другой кнопке, выберите MENU → 2 → [Польз. клав.] → требуемая кнопка → [AF Включен].
Съемка Для съемки движущегося объекта нажмите и удерживайте кнопку AF-ON.
Для съемки неподвижного объекта нажмите кнопку AF-ON один раз.

2. Съемка объекта с применением функции «AF на глаз» (объекта, который можно распознать как лицо)

Функция «AF на глаз» может использоваться при съемке портретов и спортивных соревнований, когда важную часть кадра занимает лицо. По умолчанию эта функция назначена центральной кнопке колесика управления, однако ее можно назначить другой кнопке, например кнопке удержания фокусировки на объективе, кнопке AF-ON или кнопке AEL.

Функция «AF на глаз» лучше всего подходит для съемки портретов. Поскольку спуск затвора находится под правой рукой, можно управлять спуском затвора и фокусировкой независимо друг от друга правой и левой рукой, назначив функцию «AF на глаз» кнопке удержания фокусировки.

Функцию «AF на глаз» можно также использовать, если объект движется. Если установить для параметра [Режим фокусиров.] значение [AF-C], камера отслеживает глаза движущегося объекта. Когда при нажатии и удержании кнопки, которой назначена функция «AF на глаз», распознаются глаза, вокруг них отображается зеленая рамка.

Назначение функции «AF на глаз» кнопке удержания фокусировки
Предварительная подготовка MENU → 2 → [Польз. клав.] → [Кнопка блок. фок.] → [AF на глаз]
[Область фокусир.]: [Широкая АФ]
Съемка Если функция «AF на глаз» доступна, используйте ее.
В противном случае используйте широкую область фокусировки, которая больше подходит для общей фотосъемки.

3. Мгновенное переключение между несколькими настройками области фокусировки ([Рег.польз.настр.съе])

Функция [Рег.польз.настр.съе] (Регистрация пользовательской настройки съемки) рекомендуется для мгновенного переключения между настройками области фокусировки в зависимости от состояния объекта. Это полезно при постоянно меняющихся условиях съемки, например при съемке спортивных соревнований. Существует три кнопки — кнопка AF-ON, кнопка AEL и кнопка удержания фокусировки на объективе, — которые можно использовать, не меняя положение рук при съемке. Можно повысить удобство работы с камерой, назначив этим кнопкам подходящие функции в зависимости от условий съемки.

3-1. Пример универсального использования функции [Расш. рег.пятно АФ] в сочетании с широкой областью фокусировки
  • [Область фокусир.]: [Расш. рег.пятно АФ]
  • Кнопка AF-ON: назначьте параметр [Следящ.AF * : Расш. рег.пятно АФ].
  • Кнопка AEL: назначьте параметр [Широкая АФ].

* Если используется системное программное обеспечение ILCE-9 версии 5.00 или выше, параметр [Следящий AF] будет называться [Отслеживание].

Это пример объединения параметров [Расш. рег.пятно АФ] и [Широкая АФ]. При наведении камеры на одну из птиц в кадре используйте [Расш. рег.пятно АФ] (A). Если птица находится в движении, активируйте функцию [Следящ.AF: Расш. рег.пятно АФ] с помощью кнопки AF-ON (B). Можно мгновенно переключить зону фокусировки на [Широкая АФ], нажав кнопку AEL, даже если птицы влетят в кадр внезапно (C).

Предварительная подготовка MENU → 2 → [Польз. клав.] → [Кнопка AF-ON] → [Выз. польз.удерж. 1] → установите для параметра [Режим фокусиров.] значение [Непрерывный AF], а для параметра [Область фокусир.] — значение [Следящ.AF: Расш. рег.пятно АФ] → [Регистрац.].
MENU → 2 → [Польз. клав.] → [Функц. кнопки AEL] → [Выз. польз.удерж. 2] → установите для параметра [Область фокусир.] значение [Широкая АФ] → [Регистрац.].
MENU → 1 → [AF с затвором] → [Вкл]
При этом способе съемки не используется функция [AF Включен].
[Режим фокусиров.]: [AF-C]
[Область фокусир.]: [Расш. рег.пятно АФ]
Съемка Если не нажата ни одна кнопка, камера использует параметр [Расш. рег.пятно АФ]. При нажатии и удержании кнопки AF-ON камера использует параметр [Следящ.AF: Расш. рег.пятно АФ]. При нажатии и удержании кнопки AEL камера использует параметр [Широкая АФ].
  • Также для повышения эффективности можно установить для параметра [Область фокусир.] значение [Широкая АФ] и назначить параметр [Центр] или [Следящий AF: Центр] кнопке AF-ON или AEL.
3-2. Пример объединения функций [AF на глаз] и [Расш. рег.пятно АФ]
  • [Область фокусир.]: [Расш. рег.пятно АФ]
  • Кнопка AF-ON: назначьте параметр [AF на глаз].
  • Кнопка AEL: назначьте параметр [Следящ.AF * : Расш. рег.пятно АФ].

* Если используется системное программное обеспечение ILCE-9 версии 5.00 или выше, параметр [Следящий AF] будет называться [Отслеживание].


A
B

Это пример объединения функций [AF на глаз] и [Расш. рег.пятно АФ]. Когда функция [AF на глаз] доступна, активируйте ее с помощью кнопки AF-ON (A). Когда функция [AF на глаз] недоступна, поскольку объект повернут боком и т. д., используйте функцию [Расш. рег.пятно АФ] или [Следящ.AF: Расш. рег.пятно АФ] в зависимости от состояния объекта (B).

Предварительная подготовка MENU → 2 → [Польз. клав.] → [Кнопка AF-ON] → [AF на глаз]
MENU → 2 → [Польз. клав.] → [Функц. кнопки AEL] → [Выз. польз.удерж. 1] → Установите для параметра [Область фокусир.] значение [Следящ.AF: Расш. рег.пятно АФ] → [Регистрац.]
MENU → 1 → [AF с затвором] → [Вкл]
При этом способе съемки не используется функция [AF Включен].
[Режим фокусиров.]: [AF-C]
[Область фокусир.]: [Расш. рег.пятно АФ]
Съемка Когда функция [AF на глаз] доступна, активируйте ее с помощью кнопки AF-ON независимо от движения объекта. Когда функция [AF на глаз] недоступна, используйте [Расш. рег.пятно АФ] для неподвижных объектов и [Следящ.AF: Расш. рег.пятно АФ] нажатием кнопки AEL для движущихся объектов.

4. Фокусировка в конкретном часто используемом положении ([Регистр. обл. AF])

Если при съемке спортивных соревнований или портретов вы часто делаете снимки с одинаковой композицией, можно мгновенно переместить рамку фокусировки в указанное положение нажатием одной кнопки ([Регистр. обл. AF]). Если вы часто фокусируетесь в центре изображения, рекомендуется использовать [Стандарт фокусир.].

При съемке портрета установите положение фокусировки выше центра дисплея, чтобы быстро начать съемку.

Быстрая фокусировка в определенном месте дисплея ([Регистр. обл. AF])
Предварительная подготовка 1. MENU → 1 → [Регистр. обл. AF] → [Вкл]
2. Установите [Область фокусир.] в нужное положение, а затем удерживайте кнопку Fn.
3. MENU → 2 → [Польз. клав.] → выберите нужную клавишу для назначения → [Зарег. об. AF удерж.], [Перекл. рег.обл. AF] или [Зарег.об.AF+AF Вкл].
Съемка Сделайте снимок, удерживая назначенную клавишу (или после нажатия этой клавиши). Зарегистрированная область фокусировки начнет мигать.
Быстрая фокусировка в центре дисплея ([Стандарт фокусир.])
Предварительная подготовка MENU → 2 → [Центр.кн. м-селект.] → [Стандарт фокусир.]
Съемка Нажмите на центральную часть многофункционального переключателя.
При выборе параметра [Широкая АФ] камера фокусируется в центре монитора, и фокус фиксируется.
При выборе параметра [Рег. пятно АФ] рамка фокусировки возвращается в центр.

5. Съемка объекта, движущегося только в сторону (или по вертикали)

Обычно многофункциональный переключатель используется для перемещения регулируемого пятна АФ и фокусировки на объекте. Однако, если объект движется только в сторону (или по вертикали), можно перемещать регулируемое пятно АФ в ту же сторону (или по вертикали), поворачивая колесико управления вместо многофункционального переключателя.

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

Предварительная подготовка MENU → 2 → [Польз. клав.] → [Колесико управлен.] → [Перемест.т.AF: Л/П (или В/Н)]
[Область фокусир.]: [Рег. пятно АФ] или [Расш. рег.пятно АФ]
Съемка Поверните колесико управления, чтобы переместить регулируемое пятно АФ в сторону (или по вертикали).

6. Временное изменение выдержки затвора ([Рег.польз.настр.съе])

Этот способ удобно использовать, если требуется временно изменить выдержку затвора, например чтобы сделать фотографию счета на электронном табло* при съемке спортивного соревнования. Также данный способ полезен для временного изменения других настроек (не только выдержки затвора). Назначьте этот параметр клавише, которую вы нажимаете и удерживаете при съемке.

* Символы на табло будут нечеткими, если снимать их с малой выдержкой.

Настройка параметров для съемки электронного табло со счетом матча во время спортивных соревнований
Предварительная подготовка MENU → 2 → [Польз. клав.] → требуемая клавиша для вызова → [Выз. польз.удерж. 1-3] → установите режим съемки [Приор. выдержки] или [Ручная экспозиция] и выдержку затвора около 1/60 секунды → [Регистрац.]
Выдержка затвора: короткая выдержка, например, 1/1600 секунды
Съемка Снимайте спортивные соревнования с короткой выдержкой, например 1/1600 секунды. Нажмите и удерживайте назначенную клавишу для переключения выдержки на 1/60 секунды только при съемке электронного табло.

7. Настройка зоны фокусировки при частом изменении ориентации камеры между вертикальной и горизонтальной ([Перекл. В/Г о.AF])

Можно переключаться между параметром [Область фокусир.] и положением рамки фокусировки в соответствии с ориентацией камеры (горизонтальной/вертикальной). Если требуется часто менять ориентацию камеры, рекомендуется использовать параметр [Только точка AF]. Параметр [Только точка AF] полезен, если объект приближается к камере и вы держите камеру вертикально. Он позволяет быстро переключить положение рамки фокусировки в соответствии с сюжетом.

8. Съемка фотографий в диапазоне телефото путем изменения угла обзора (APS-C/Super 35mm)

Камеры ILCE-9 / ILCE-7RM3 / ILCE-7RM3A / ILCE-7M3 оснащена полнокадровой матрицей. Однако при специальной съемке изображений в формате, эквивалентном APS-C, угол обзора сужается. Благодаря этому фотография выглядит так, как если бы она была сделана с помощью телеобъектива. Число пикселей и размер файла становятся меньше, однако можно снимать изображения RAW или выбирать область фокусировки, отличную от получаемой при использовании цифрового зума.
Эту функцию можно настроить с помощью параметра 1 в MENU. Однако для частого использования рекомендуется назначить ее контекстной клавише, например кнопке C4.

Для моделей ILCE-7RM3 / ILCE-7RM3A / ILCE-7M3
Предварительная подготовка MENU → 2 → [Польз. клав.] → выберите нужную клавишу для назначения → [Выб. APS-C S35/пол. кад.] (Выбор APS-C S35/полного кадра)
Съемка Переключаться между 35-мм полнокадровым форматом изображения и форматом, эквивалентным APS-C, можно с помощью назначенной клавиши.
Для модели ILCE-9
Предварительная подготовка MENU → 2 → [Польз. клав.] → выберите нужную клавишу для назначения → [APS-C/Super 35mm]
Съемка Нажмите назначенную клавишу, а затем [Вкл].
  • После завершения съемки верните значение [Авто] или [Выкл]. (Настройкой по умолчанию является [Авто]).

9. Включение или выключение индикации уровня яркости/переэкспонирования (Зебра)

Камера отображает заштрихованными те участки изображения, на которых уровень яркости соответствует заданному уровню IRE. Можно быстро включить или выключить отображение штриховки.

* Для модели ILCE-9 данная функция может использоваться, если в камере установлено системное (встроенное) программное обеспечение версии 5.00 или более поздней.

Предварительная подготовка 1. Заранее настройте уровень штриховки с помощью MENU → 2 → [Настр. Зебры] → [Уровень Зебры].
2. MENU → 2 → [Польз. клав.] → выберите нужную клавишу для назначения → [Выбор отобр. Зебры]
Съемка Чтобы включить или выключить отображение штриховки, можно нажать назначенную клавишу. Также можно зарегистрировать уровень штриховки для контекстной клавиши.

10. Увеличение изображения в режиме ручной фокусировки при использовании объектива другого производителя и т. д.

При использовании объектива с байонетом A, объектива с ручной фокусировкой или объектива другого производителя можно быстро увеличить изображение, назначив функцию [Фокусировоч. лупа] контекстной клавише.
Рекомендуется назначить ее легко доступной кнопке, например кнопке AF-ON. Если вы часто перемещаете положение увеличенной области от центра изображения, рекомендуется назначить эту функцию центральной части многофункционального переключателя или колесика управления.

Предварительная подготовка MENU → 2 → [Польз. клав.] → выберите нужную клавишу для назначения → [Фокусировоч. лупа]
Съемка Шкала увеличения фокуса переключается при каждом нажатии назначенной клавиши. Для возврата положения увеличенной области в центр нажмите кнопку C4 (Удалить).

11. Включение/выключение функции усиления контуров в режимах ручной фокусировки

Можно быстро включить или выключить функцию усиления контуров при съемке в режиме ручной фокусировки (MF) или прямой ручной фокусировки (Прямая РФ). Рекомендуется назначить эту функцию легко доступной кнопке, например кнопке AF-ON.

* Для модели ILCE-9 данная функция может использоваться, если в камере установлено системное (встроенное) программное обеспечение версии 5.00 или более поздней.

Предварительная подготовка 1. Заранее настройте толщину контуров и цвет с помощью MENU → 1 → [Настр. выдел. конт.].
2. MENU → 2 → [Польз. клав.] → выберите нужную клавишу для назначения → [Выб. отоб. выд.конт.]
Съемка Чтобы включить или выключить выделение контуров, можно нажать назначенную клавишу.

12 Защита или оценка изображений

Назначьте функцию [Защита] или [Оценка] контекстной клавише, используемой во время просмотра или воспроизведения. Это позволяет быстро сортировать отснятые изображения. Рекомендуется назначить эту функцию кнопке C3, чтобы переходить к следующему изображению правой рукой и выбирать назначенную функцию левой рукой.

* Для модели ILCE-9 данная функция может использоваться, если в камере установлено системное (встроенное) программное обеспечение версии 5.00 или более поздней.

Предварительная подготовка MENU → → [Польз. клав.] → [Специал. кнопка 3] → [Защита] или [Оценка]
Во время просмотра или воспроизведения Перейдите к следующему изображению, нажав кнопку правой рукой, и выберите [Защита] или [Оценка], нажав кнопку C3 левой рукой.

13. Воспроизведение только защищенных или оцененных изображений

Во время воспроизведения можно переключаться между изображениями и показывать только защищенные изображения или изображения, получившие определенную оценку. Для выполнения этой функции можно выбрать передний или задний дисковый переключатель. Для воспроизведения всех изображений используйте другие элементы управления, кроме выбранного диска (например, колесико управления). Таким образом, можно выбрать способ воспроизведения, который вам подходит.

* Для модели ILCE-9 данная функция может использоваться, если в камере установлено системное (встроенное) программное обеспечение версии 5.00 или более поздней.

Переключение между защищенными изображениями с помощью переднего дискового переключателя и воспроизведение всех изображений с помощью заднего дискового переключателя
Предварительная подготовка 1.MENU → → [Наст. переход изоб.] → [Выбрать диск] → [Передний диск]
2.MENU → → [Наст. переход изоб.] → [М-д перехода изоб.] → [Только защищенные]
MENU → → [Режим просмотра] → [Просм. по дате]
Во время просмотра или воспроизведения Можно воспроизводить защищенные изображения, используя передний дисковый переключатель, и все изображения, используя задний.

Также можно выбрать [Режим просмотра] на экране указателя, а не настраивать его с помощью MENU.

Учебное пособие по

HTML: примеры кнопок

HTML-кнопка — это кнопка, на которую можно щелкнуть, и к ней может получить доступ пользователь. Вы можете найти кнопку на каждом сайте. Теперь, в этом руководстве, мы изучим базовое руководство по добавлению элемента кнопки HTML.


Определение и использование

Элемент кнопки HTML представлен тегом

Это кнопка по умолчанию:


Тип кнопки Атрибут Кнопка

HTML должна иметь атрибут типа. Если элемент

Не меняет стиль кнопки, но имеет другой тип:

Вы можете установить атрибут типа с помощью «submit» для отправки формы или «reset» для сброса текстового поля.Но

Вот как HTML-код выше будет отображаться в браузере:

Для представления кнопки можно использовать элемент

Вот как HTML-код выше будет отображаться в браузере:

Теперь цвет фона кнопки изменился на темно-синий.

См. Базовое руководство по установке или изменению цвета фона HTML и цветовых кодов HTML, чтобы узнать больше.


Кнопка с функцией JavaScript

Добавив функцию javascript, вы можете использовать HTML-элемент

Вот как HTML-код выше будет отображаться в браузере:

Вы также можете использовать кнопку для отображения предупреждения или всплывающего окна в браузере с помощью функции javascript.

Пример 8:

  


 Документ 






  

Когда вы нажмете кнопку, на странице появится сообщение «Hello World!»:


Атрибуты

Атрибуты этого элемента включают глобальные атрибуты.

Атрибуты Описание
автофокус (логический атрибут HTML5) Указывает, что кнопка должна иметь фокус ввода при загрузке страницы. Только один элемент может иметь этот атрибут. Значение «автофокус»
отключено (логический атрибут) Его нельзя нажать или сфокусировать. Значение «отключено»
форма (HTML5) Указывает, к какой форме принадлежит кнопка.Значение form_id
формация Указывает, куда отправлять данные формы при отправке формы. Только для type = «submit». Значение «URL».
formenctype (HTML5) Если кнопка является кнопкой отправки (связана с
и не имеет type = «button»), указывает, как кодировать данные формы, которые отправляются. Значение «application / x-www-form-urlencoded», «multipart / form-data».
метод формы (HTML5) Определяет, как отправлять данные формы (какой HTTP-метод использовать).Только для type = «submit». Значение «получить, отправить».
formnovalidate (HTML5) Этот атрибут также доступен для элементов и . Значение «формновалидат»
formtarget (HTML5) Где отображать ответ от отправки формы. Значение «_blank», «_self», «_parent», «_top», «framename».
название Задает имя кнопки. Значение «имя»
тип Задает тип кнопки.Значение «кнопка, сбросить, отправить»
значение Задает начальное значение для кнопки. Значение «текст»

Это базовое руководство по элементам кнопок HTML. Если вы хотите попробовать демонстрацию примера, вы можете найти полный исходный код этих примеров на нашем GitHub.

Спасибо!

Тег кнопки HTML — использование, атрибуты, примеры

Тег ) тегами.

Пример HTML-тега

Попробуйте сами »

Использование стилей CSS¶

Вы можете применить стили CSS к тегу <час /> Кнопка с красным текстом <час /> Кнопка с увеличенным размером шрифта
Попробуйте сами »

Результат¶

Атрибуты¶

Тег

HTML-кнопка с изображением:

Одна из замечательных особенностей тега .В этом примере сочетаются изображение и некоторый текст.

Пример:

Разница между тегом

и тегом
значение

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

В кнопке меню содержимое этого атрибута представляет собой метку кнопки или, другими словами, метку подменю, развертываемого при нажатии.

Пара «имя-значение» кнопки отправляется вместе с другими данными формы, только если кнопка использовалась для отправки формы.

Функции, объявленные в следующем примере, не предназначены для работы. Этот пример предназначен только для тестирования функциональности, предоставляемой браузерами для меню панели инструментов.

Пример

  <меню>
  
  • Bootstrap Buttons — примеры и руководство

    Buttons

    отзывчивых кнопок, созданных с использованием последней версии Bootstrap 5.Кнопки предоставляют предопределенные стили (предупреждение, информация, опасность) для нескольких типов кнопок: контурные, закругленные, социальные, плавающие, фиксированные, теги и т. Д.

    Используйте настраиваемые стили кнопок MDB для действий в формах, диалоговых окнах и т. Д. С поддержкой несколько размеров, состояний и т. д.

    Примечание: Прочтите вкладку API , чтобы найти все доступные параметры и расширенная настройка

    Видеоурок


    Базовый пример

    Кнопка
     
              
              
    Отключить перенос текста

    Если вы не хотите, чтобы текст кнопки переносился, вы можете добавить .text-nowrap к кнопке. В Sass вы можете установить $ btn-white-space: nowrap , чтобы отключить перенос текста для каждой кнопки.


    Цвета

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

    Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный Ссылка на сайт
     
              
              
              
              
              
              
              
              
              
              

    Передача смысла вспомогательным технологиям:
    Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователи вспомогательных технологий, например программ чтения с экрана.Убедитесь, что информация, обозначенная цвет либо очевиден из самого контента (например, видимого текста), либо включен альтернативными способами, такими как дополнительный текст, скрытый с помощью . Визуально-скрытый класс.


    Контур

    Нужна кнопка, но не богатые цвета фона, которые они приносят? Заменить по умолчанию классы-модификаторы с .btn-outline- * , чтобы удалить все фоновые изображения и цвета на любой кнопке.

    В кнопках структуры мы рекомендуем добавить data-mdb-ripple-color = "dark" , чтобы изменить цвет волновой эффект . Светлый цвет ряби по умолчанию (применяется автоматически к каждой кнопке) могут быть плохо видны в случае кнопок со светом и контуром.

    Чтобы узнать больше об эффекте ряби и всех доступных опциях, посмотрите Документы Ripple.

    Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный
     
              
              
              
              
              
              
              
              
              

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


    Округлые

    Добавьте .btn-rounded class, чтобы кнопка закруглялась.

    Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный
     
              
              
              
              
              
              
              
              
              

    Закругленный контур

    Вы можете использовать .btn-outline- * и .btn-Round вместе, чтобы очертание кнопки и закругление одновременно.

    Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный
     
              кнопка <
                type = "кнопка"
               
                data-mdb-ripple-color = "темный"
              >
                Начальный
              
              кнопка <
                type = "кнопка"
               
                data-mdb-ripple-color = "темный"
              >
                Вторичный
              
              кнопка <
                type = "кнопка"
               
                data-mdb-ripple-color = "темный"
              >
                Успех
              
              кнопка <
                type = "кнопка"
               
                data-mdb-ripple-color = "темный"
              >
                Опасность
              
              кнопка <
                type = "кнопка"
               
                data-mdb-ripple-color = "темный"
              >
                Предупреждение
              
              кнопка <
                type = "кнопка"
               
                data-mdb-ripple-color = "темный"
              >
                Информация
              
              кнопка <
                type = "кнопка"
               
                data-mdb-ripple-color = "темный"
              >
                Свет
              
              кнопка <
                type = "кнопка"
               
                data-mdb-ripple-color = "темный"
              >
                Темный
              
              

    Плавающий

    Используйте .btn-float , чтобы сделать круглую кнопку.

    Чтобы он работал правильно, вам нужно поместить внутрь значок. Текст не будет вписываются. Вы можете найти сотни доступных значков в нашем значки docs.

     
              
              

    К плавающим кнопкам можно применить почти все те же классы и атрибуты, что и к обычные пуговицы — цвета, рябь, размеры, контур и т. д.

     
              
              кнопка <
                type = "кнопка"
               
                data-mdb-ripple-color = "темный"
              >
                 
              
              
              
              

    Фиксированные кнопки

    Используйте .fixed-action-btn класс для создания фиксированной кнопки со списком доступных параметры, которые отображаются при наведении или щелчке.

    См. Живой пример фиксированной кнопки в правом нижнем углу этой страницы.

    Примечание: Доступны методы показать / скрыть вручную открыть и закрыть список. Прочтите вкладку API , чтобы узнать больше.

     
              
    <а >
    • <а >
    • <а >
    • <а >
    • <а >

    Социальные сети

    Комбинируя наши значки и пользовательские цвета, вы можете создавать кнопки социальных сетей.Объединяя наши значки и пользовательские цвета, вы можете создавать кнопки социальных сетей. Смотрите все доступные значки в нашем поиск иконок (проверьте «бренды» для фильтрации значков брендов).

    В приведенном ниже примере мы размещаем значок Facebook внутри кнопки и установите фоновый цвет от до # 3B5998 (цвет бренда facebook).

     
                 
              
    Образцы марок

    Несколько самых популярных брендов в виде социальных кнопок.

     
                
                   
    
                
                   
    
                
                   
    
                
                   
    
                
                   
    
                
                   
    
                
                   
    
                
                   
    
                
                   
    
                
                   
    
                
                   
    
                
                   
    
                
                   
    
                
                   
                
    Плавающие социальные сети

    Добавив .btn-Floating вы можете создать красивую плавающую кнопку социальных сетей.

     
                <а
                 
                 
                  href = "#!"
                  роль = "кнопка"
                  >   
                
    Текст

    Вам не нужно использовать только значок. Вы можете добавить текст к кнопке. Не забудьте добавить классы интервалов (например, .me-2 ), чтобы обеспечить правильное расстояние между значком и текст.

    Твиттер
     
                   Twitter 
                
    Только значок

    Удалив классы кнопок и заменив цвет фона на цвет вы можете создавать минималистичные, кликабельные значки.

     
                
                   
    
                
                   
    
                
                   
    
                
                   
                
    Уведомления

    Используя значок, вы можете создать кнопку с уведомлением, чтобы предоставить счетчик.

    8
     
                    8  
                

    Теги

    Классы .btn предназначены для использования с


    Размеры

    Хотите кнопки большего или меньшего размера? Складываем .btn-lg или .btn-sm для дополнительные размеры.

    Кнопка Кнопка Кнопка
     
              
              
              
              

    Активное состояние

    Добавьте класс .active , чтобы кнопка выглядела нажатой.

    Первичная ссылка Ссылка на сайт
     
               Первичная ссылка 
               Ссылка 
              

    Отключено

    Сделайте кнопки неактивными, добавив логический атрибут disabled к любому

    Отключенные кнопки, использующие элемент , ведут себя немного иначе:

    Первичная ссылка Ссылка на сайт
     
              <а
                href = "#"
               
                tabindex = "- 1"
                роль = "кнопка"
                aria-disabled = "правда"
                > Первичная ссылка 
              <а
                href = "#"
               
                tabindex = "- 1"
                роль = "кнопка"
                aria-disabled = "правда"
                > Ссылка 
              

    Предупреждение о функциональности ссылки:
    Модель .disabled класс использует событий-указателей: нет , чтобы попытаться отключить функциональность ссылки
    s, но это свойство CSS еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают события указателя : нет , клавиатура навигация остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологии по-прежнему смогут активировать эти ссылки. Чтобы быть в безопасности, добавьте tabindex = "- 1" атрибут этих ссылок (чтобы они не получали клавиатуру focus) и используйте собственный JavaScript, чтобы отключить их функциональность.


    Блокировка кнопок

    Создавайте гибкие стопки полноразмерных «кнопок блокировки», как в Bootstrap 4, с помощью нашего дисплея и утилит разрыва. Используя утилиты вместо классов, специфичных для кнопок, мы иметь гораздо больший контроль над интервалом, выравниванием и реактивным поведением.

    Кнопка Кнопка

     
              

    Здесь мы создаем адаптивный вариант, начиная с вертикально расположенных кнопок до тех пор, пока md точка останова, где .d-md-block заменяет .d-grid , таким образом сводя на нет полезность gap-2 . Измените размер вашего браузер, чтобы увидеть, как они меняются.

    Кнопка Кнопка

     
              

    Вы можете настроить ширину кнопок блока с помощью классов ширины столбцов сетки.Например, для «кнопки блока» половинной ширины используйте .col-6 . Отцентрируйте его по горизонтали с помощью .mx-auto тоже.

    Кнопка Кнопка

     
              

    Дополнительные утилиты можно использовать для регулировки выравнивания кнопок по горизонтали.Здесь мы взяли наш предыдущий отзывчивый пример и добавили несколько утилит гибкости и утилит маржи. на кнопке, чтобы выровнять кнопки по правому краю, когда они больше не сложены.

    Кнопка Кнопка

     
              

    Переключить состояния

    Добавьте data-mdb-toggle = "button" , чтобы переключить активное состояние кнопки.Если при предварительном переключении кнопки необходимо вручную добавить класс .active и aria-press = "true" на кнопка < type = "кнопка" data-mdb-toggle = "кнопка" autocomplete = "выкл" ария-прессованный = "правда" > Активная кнопка переключения кнопка < type = "кнопка" отключен data-mdb-toggle = "кнопка" autocomplete = "выкл" > Отключенная кнопка переключения Переключить ссылку Активная ссылка переключения Отключено переключение ссылки

     
               Переключить ссылку 
              <а
                href = "#"
               
                роль = "кнопка"
                data-mdb-toggle = "кнопка"
                ария-прессованный = "правда"
                > Активная ссылка переключения 
               Отключено переключение ссылки 
              

    Если вы хотите поддержать наших друзей из Tailwind Elements, вы также можете воспользоваться Кнопки попутного ветра документация.

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *