Cookie

предосторожность


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

В сегодняшней статье мы рассмотрим, как превратить простую форму, с помощью кнопки Неформатированной в столь же простой форме с отформатированной кнопкой. Все цвета, градиенты и тени “построенный” используя правила CSS на версии 3. Эти несколько простых правил, должны принять некоторые’ с помощью плоскогубцев, потому что они хорошо работают с браузером на основе Webkit (Сафари, Konquerror, IPad / iPhone) е Gecko (Firefox и т.д.), но они бесполезны для всех версий

Internet Explorer до 9.

Давайте начнем с HTML. Кроме того, мы будем связывать файл “style.css”:

<HTML>
<глава>
  <ссылка отн ="таблицы стилей" HREF ="style.css" тип ="текст / CSS" кодировка ="UTF-8" />
</глава>
<тело>
  <Форма действие ="#">
    <Таблица>
      <тр>
        <тд>имя:</тд><тд><тип входного ="текст" имя ="название" значение =""></тд>
      </тр>
      <тр>
        <тд>почта:</тд><тд><тип входного ="текст" имя ="почта" значение =""></тд>
      </тр>
      <тр>
        <тд = Объединение колонок"2" выравнивание ="центр"><Кнопка ID ="кнопка">представить</кнопка></тд>
      </тр>
    </Таблица>
  </форма><!--конец form-->
</тело>
</HTML>

Без форматирования задается CSS это будет результат “застывший”.

form_non_formattata

1. Home Style

Мы начинаем входить в наш “style.css” следующие строки кода, чтобы дать стиль к кнопке:

кнопка{
  ширина: 100ПВ;
  контур: никто;
  курсор: указатель;
  выравнивания текста: центр;
  текст-отделка: никто;
  шрифт: полужирный 12px Arial, Helvetica, без засечек;
  цвет: #FFF;
  набивка: 10ПВ 20px;
  граница: твердый 1px # 0076a3;
  фон: #0095CD;
}

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

1

2. Градиент фон

Тогда мы могли бы добавить градиент к цвету фона, дать ему трехмерным. Добавим следующие строки к элементу “кнопка” наш “style.css”:

фон: -WebKit-градиент(линейный, левый верхний, левый нижний, от(#00Adee), в(#0078a5));
фон: -WebKit-линейный градиент(Топ,  #00Adee,  #0078a5);
фон: -Мос-линейный градиент(Топ,  #00Adee,  #0078a5);
фон: -мс-линейный градиент(Топ,  #00Adee,  #0078a5);
фон: -о-линейный градиент(Топ,  #00Adee,  #0078a5);

Из этих строк есть немного, чтобы объяснить, добавить вертикальный градиент на фоне. Это результат:

2

3. Круглые углы

В зависимости от ваших предпочтений мы хотим, чтобы скруглить углы кнопки. Добавим следующие строки к элементу “кнопка” наш “style.css”:

-Мос-граница радиуса: 20ПВ;
-WebKit-границы радиуса: 20ПВ;
граница радиуса: 20ПВ;

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

3

4. тень

Чтобы дать последний штрих трех измерений необходимо дать небольшую тень. Добавим эти последние строки элемента “кнопка” наш “style.css”:

-Мос-бокс-тень: 0 1ПВ 3px RGBA(0,0,0,0.5);
-WebKit-бокс-тень: 0 1ПВ 3px RGBA(0,0,0,0.5);
коробчатого тень: 0 1ПВ 3px RGBA(0,0,0,0.5);

Это результат:

4

И теперь у нас есть стиль кнопки без выбора, но чтобы установить классическое действие на мыши и нажмите. Следующие строки добавляются в файл “style.css”:

кнопка:зависать {
  фон: #0095CD;
  фон: -WebKit-градиент(линейный, левый верхний, левый нижний, от(#0078a5), в(#00Adee));
  фон: -WebKit-линейный градиент(Топ,  #0078a5,  #00Adee);
  фон: -Мос-линейный градиент(Топ,  #0078a5,  #00Adee);
  фон: -мс-линейный градиент(Топ,  #0078a5,  #00Adee);
  фон: -о-линейный градиент(Топ,  #0078a5,  #00Adee);
  фон: линейный градиент(Топ,  #0078a5,  #00Adee);
}

кнопка:активный{
  позиция: родственник;
  Топ: 1ПВ;
}

И это операционный результат:

Это не достаточно?


TheJoe

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

оставьте ответ

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

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