ГлавнаяВёрстка WordPress › Форма для комментариев в WordPress с Неоновой подсветкой


Форма для комментариев в WordPress с Неоновой подсветкой


Форма для комментариев

Доброго времени суток, всем читателям — Sozdaiblog.ru!

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

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

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

Для этого в файл «style.css», который находится в папке Вашей активной темы оформления, я добавил следующие стили:

 

#respond {
background: #ffffff;
}

#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

#respond input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

 

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

Следующим шагом в поле адреса сайта я изменил его цвет отображения с помощью добавления следующего стиля:

 

#url  {
color: #21759b;
}

 

Ну а последним штрихом в модернизации формы для комментариев стала доработка кнопки отправления сообщений. Это было реализовано с помощью CSS3:

 

#submit {
font-family: Arial;
color: #ffffff;
font-size: 14px;
padding: 0px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#006ad4), to(#003366));
background: -moz-linear-gradient(top, #006ad4, #003366);
}

#submit:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#003366), to(#006ad4));
  background: -moz-linear-gradient(top, #003366, #006ad4)
}

 

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

На сегодня это всё. Удачи.

 

С уважением, Денис Черников!




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




10 комментариевА что думаете Вы?

  1. Алексей

    Пока только вскользь слышал о работе CSS3, еще только курс Попова по CSS прослушал. Думаю, что надо и CSS прослушать. А какой материал Вы, Денис, использовали для изучения CSS3?

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  2. Vadar

    Денис дорогой, У вас такой интересный сайт, что и без этого я стараюсь всегда комментировать ваши статьи!

    [Ответить]

    Денис Черников ответил:

    Спасибо, Vadar! Мне очень приятно.

    [Ответить]

  3. Кристина

    А у еня проблема, как сделать древовидные комментарии, чтобы не плодили дубли? Стандартные отключила, не знаю что и делать.

    [Ответить]

    Денис Черников ответил:

    Пока только плагином, в ближайшее время решу эту проблему!

    [Ответить]

  4. Olga

    прикольно) а можно чем то подобным облагородить календарь событий? подсветка даты при наведении, фон, может форма... или это уже сверх?

    [Ответить]

    Денис Черников ответил:

    При желании можно всё!

    [Ответить]

  5. Olga

    так же с помощью стилей? или тем способом кот. Вы описывали вход в админ.панель?

    [Ответить]

    Денис Черников ответил:

    Не думал об этом! Скорее стилями!

    [Ответить]

Оставить комментарий!

Вверх