<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать красивое текстовое поле

Как сделать красивое текстовое поле

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

Первым делом, Вам необходимо сделать 3 картинки из текстового поля:

  1. Левый угол. Должен затрагивать самое начало текстового поля (например, его тень) слева и идти до момента, когда уже закругления нет.
  2. Правый угол. Аналогично левому углу, но с другой стороны.
  3. Полоска основной части. Эта полоска должна быть в ширину 1 пиксель и должна быть вырезана где-нибудь посередине текстового поля.

Очень важный момент заключается в том, что все 3 картинки должны быть одинаковой высоты. Следующий этап - это HTML-код:

<table cellpadding="0" cellspacing="0">
  <tr>
    <td class="input_left"></td>
    <td>
      <input type="text" name="text" />
    </td>
    <td class="input_right"></td>
  </tr>
</table>

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

И теперь CSS-код:

.input_left {
  background: url("input_left.jpg") no-repeat scroll 0 0 transparent; //Фон с левым углом
}
.input_right {
  background: url("input_right.jpg") no-repeat scroll 0 0 transparent; //Фон с правым углом
}
input {
  background: url("bg_input.jpg") repeat-x scroll 0 0 transparent; //Фон текстового поля
  border: none; //Убрать стандартную рамку у текстового поля
  height: 35px; //Высота картинки
  outline: none; //Убрать рамку фокуса в IE
  width: 200px; //Требуемая ширина текстового поля
}

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (17):

soffrick soffrick 31.05.2012 10:23:31

Еще бы картинки приложить к статье и было бы вообще класс:)

Ответить

KotOFF KotOFF 05.06.2012 16:56:41

Можно сделать тоже самое, тока без картинок (jQuery)! Будет Круче))))

Ответить

Admin Admin 05.06.2012 19:49:04

Будет хуже из-за JavaScript. Там где можно обойтись без JS (а уж тем более без такой библиотеки как JQuery), надо обходиться без JS.

Ответить

lev_100rus lev_100rus 29.08.2012 22:07:04

Михаил, скажите почему если я создаю папку допустим на рабочем столе и там верстаю сайт то всё ок! Но как я создаю index.php и с index.html и естественно все картинки и css скидываю туда, то у меня дизайн съезжает

Ответить

Admin Admin 30.08.2012 12:17:38

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

Ответить

lev_100rus lev_100rus 30.08.2012 17:46:43

А что делать если я допустим скачал шаблон сайта НО он в HTML и если его кинуть потом в php файл(или HTML) Тоже самое получается

Ответить

Admin Admin 30.08.2012 22:16:19

Во всех браузерах такое? Просто не понимаю в чем может быть разница, если код один и тот же. Учитывая что все css правильно подключились, конечно.

Ответить

lev_100rus lev_100rus 31.08.2012 14:54:24

Вот почему я вам и пишу. Да во всех

Ответить

Admin Admin 31.08.2012 17:18:08

Возможно проблема в кодировке, которая меняется когда Вы редактируете шаблон. В шаблоне может стоят совсем другая, например. Или если кодировка utf-8, то не стоит "utf-8 без BOM".

Ответить

lev_100rus lev_100rus 31.08.2012 19:47:17

Хм. А вот на это я внимания не обратил. Спасибо

Ответить

ligas ligas 24.05.2013 22:26:59

Чтобы выглянули края текстового поля, мне пришлось применить в стилях width: 8px; - ширину этих краёв, не знаю как насчет правильности, но без этого никак не получилось.

Ответить

andrio andrio 15.06.2013 18:39:46

а где картинки взять bg_input.jpg, input_left.jpg, input_right.jpg ????

Ответить

Admin Admin 15.06.2013 21:36:19

Вырезать из картинки самого input, например, в том же photoshop.

Ответить

LeonG LeonG 10.09.2013 15:59:31

Не понимаю, что значит "scroll 0 0"? Я забыл..

Ответить

Admin Admin 11.09.2013 17:56:07

scroll нужен, чтобы фон двигался вместе с элементом.

Ответить

Twist-tracer Twist-tracer 12.02.2015 20:51:01

Я так понял это старый способ? (в css3 вроде добавилось свойство закругления)

Ответить

alexandrdante alexandrdante 14.02.2015 05:17:24

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

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.