<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

Закруглённые углы через CSS

Закруглённые углы через CSS

Наверняка, Вы часто встречали блоки с закруглёнными углами. За примером далеко ходить не надо, достаточно посмотреть вправо и приглядеться к моим блокам, у которых как раз углы и закруглены. Стоит отметить, что способов создания этого очень много. У каждого из них есть свои преимущества и недостатки, и я рассмотрю один из них, которым обычно и пользуюсь.

Для начала потребуются 4 изображения, каждое из которых отвечает за свой угол блока. Далее напишите такой HTML-код:

<div class="roundborder">
  <div>
    <div>
      <div>
        <div>
          <br />
        </div>
      </div>
    </div>
  </div>
</div>

И такой CSS-код:

.roundborder {
  border: 2px solid #ffd460;
}
.roundborder div {
  background: url(../images/t-l.png) top left no-repeat;
  margin: -2px;
  position: relative;
}
.roundborder div div {
  background: url(../images/t-r.png) top right no-repeat;
  margin: 0;
}
.roundborder div div div {
  background: url(../images/b-r.png) bottom right no-repeat;
}
.roundborder div div div div {
  background: url(../images/b-l.png) bottom left no-repeat;
  padding: 20px;
}

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

  • t-l - верхний левый угол
  • t-r - верхний правый угол
  • b-l - нижний левый угол
  • b-r - нижний правый угол

Свойство padding Вы можете задавать своё, так как оно всего лишь делает отступ контента от закруглённой рамки. Также обратите внимание, свойство border должно быть толщиной с рамкой в картинке, а свойство margin: -2px, возможно, так же придётся поменять, поскольку это значение должно равняться ширине картинки, взятой со знаком минус.

Вот таким несложным способом делаются закруглённые углы через CSS. Большим преимуществом данного способа является то, что он является кроссбраузерным. А в качестве минуса я бы отметил большое количество div.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

karpedon karpedon 12.10.2011 10:59:55

Спасибо за статью... всё работает... только вот не могу понять КАК оно работает?!?!?!?!?

Ответить

RussianPro RussianPro 12.10.2011 17:27:46

Это всё гораздо проще делается!!! Не обязательно такой код писать! <div class="roundborder"> <div> <div> <div> <div> <br /> </div> </div> </div> </div> </div> Достаточно в CSS добавить к классу вот это: .roundborder { -moz-outline-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } Данный код работает только для браузеров поддерживающих CSS 3. Так что ни о какой кроссбраузерности не может быть и речи!

Ответить

Admin Admin 12.10.2011 17:38:32

Ни в коем случае так никогда не пишите! Это мало того, что не валидно, так ещё и работает только в самых современных браузерах. Поэтому порядка 50% не увидят закруглённых рамок.

Ответить

RussianPro RussianPro 12.10.2011 17:41:16

Это самая большая печаль в моей жизни! У меня весь сайт на этом построен!

Ответить

RussianPro RussianPro 12.10.2011 18:04:39

Большая часть Рунета пользуется либо Mozila либо Google Chrome. Оба браузера поддерживают border-radius!

Ответить

Admin Admin 12.10.2011 18:32:50

Только новые версии этих браузеров, которыми пользуются, как я уже сказал, не более 50%.

Ответить

RussianPro RussianPro 12.10.2011 21:51:39

На том сайт, который проверяет CSS на валидность, проверяется по стандарту CSS 2.1! Где можно проверить по стандарту CSS 3?

Ответить

Admin Admin 12.10.2011 21:58:21

На том же сайте всё и проверяется. Для этого разверните "Дополнительные возможности", и там всё будет.

Ответить

RussianPro RussianPro 12.10.2011 22:00:13

Спасибо огромное!

Ответить

sarcodin sarcodin 26.10.2011 20:42:06

как это работает

Ответить

Admin Admin 26.10.2011 20:51:39

Всё просто и понятно, но нужно более-менее знать HTML и CSS.

Ответить

sarcodin sarcodin 26.10.2011 21:28:55

А где писать имя это блока, а где содержимое.

Ответить

Admin Admin 26.10.2011 21:31:59

Содержимое блока там, где <br />. Вы его стираете и пишите там своё содержимое.

Ответить

WINzero WINzero 06.12.2011 23:45:02

<br /> Вроде XHTML уже прекратило своё развитие. А эти строгие тэги ещё пишут)

Ответить

malina95 malina95 21.07.2012 18:06:55

Если никто не хочет мучаться с фотошопом - я сделал блок без картинок и могу с вами поделиться... код CSS .Box { width:200px; /* Ширина блока */ height: 100px; /* Высота блока */ background-color: #ffffff; /* Фоновый цвет*/ border: 2px solid #D4D4D4; /* Ширина и цвет границ*/ border-radius: 10px; /* Радиус границ*/ box-shadow: 0 0 15px #A9A9A9; /* Размер и цвет тени блока*/ margin-left: 130px; padding:10px; } HTML код <div class="Box"> Блок с углами </div>

Ответить

malina95 malina95 04.09.2012 22:43:47

Михаил напишите пожалуйста про тени : box-shadow: Я просто когда смотрю на это прям так хочется очень красивые тени в блоке с закруглёнными углами... Напишите?

Ответить

Admin Admin 06.09.2012 19:02:06

Посмотрим.

Ответить

naumenko.romeo naumenko.romeo 20.12.2012 09:31:49

А не лехче так? #ugolkrug{ width:200px; /* Длина фигуры */ height:100px; /* Высота фигуры */ color: #0000; /* цвет текста */ background:#FF7F00; /* фон блока */ border: 3px #CCCCCC solid; /* стили рамки */ -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 10px; /* закругл. для старых Chrome и Safari */ -khtml-border-radius:10px; /* закругл. для браузера Konquerer системы Linux */ border-radius: 10px; /* закругление углов для всех, кто понимает */ padding: 5px; /* внутренние отступы */ } а в HTML : <div id="ugolkrug">Закругление</div>

Ответить

Admin Admin 20.12.2012 17:20:34

Гораздо легче, но, к сожалению, в IE8 и ниже не работает. Плюс большое количество хаков - не есть хорошо.

Ответить

Vano Vano 23.02.2013 21:22:29

Зачем мучаться с фотошопом? Элементарно делается без фотошопа в течении 5-10 минут.

Ответить

mataes mataes 10.04.2013 20:48:19

Есть ли разница между изготовленными в фотошопе закруглениями и в css или плюсы и минусы какие-то?

Ответить

Admin Admin 10.04.2013 21:34:24

Вопрос некорректный. Сначала делается дизайн в фотошопе, потом делается вёрстка.

Ответить

andrew11 andrew11 24.05.2013 19:58:29

Здравствуйте Михаил, не поможете ли вы мне решить следующую проблему - есть css код: input:not([type="radio"]), input:not([type="checkbox"]){width: 105%;} идея такая: все теги input кроме: type равный checkbox и radio получают заданную ширину. Но почему то заданную ширину получают все теги input. Помогите пожалуйста исправить данную проблему.

Ответить

Admin Admin 24.05.2013 21:27:06

Возможно, Ваш браузер не поддерживает CSS3 (а not это оттуда): http://myrusakov.ru/css-3.html

Ответить

andrew11 andrew11 25.05.2013 12:34:43

А что тогда делать, что можно изменить, чтобы работало на всех браузерах?

Ответить

Admin Admin 25.05.2013 13:22:26

Использовать другие селекторы: http://myrusakov.ru/selektory-css.html - немного больше кода потребуется, но результат будет тот, что нужен.

Ответить

andrew11 andrew11 25.05.2013 19:31:35

Спасибо!

Ответить

gamevitrix gamevitrix 13.06.2013 19:07:21

Можно сделать проще. В CSS блока нужно прописать border-radius: интересующее вас значение; Например border-radius: 6px;

Ответить

Admin Admin 13.06.2013 19:39:02

http://myrusakov.ru/css-3.html

Ответить

ermolmolotov ermolmolotov 30.10.2013 01:46:19

Уважаемый Михаил!!! Столкнулся с такой проблемой: IE не отображает "border-radius"/// в остальном кроссбраузерность нормальная. Даже кучу файлов htc перепробовал. Но увы, ничё не помогает. Может подскажите как решить проблемму с IE ( у меня 8-я версия ) ??? Заранее огромное спасибо

Ответить

Admin Admin 30.10.2013 11:18:33

В этой статье написано, как решить проблему. А border-radius - это CSS3, который, разумеется, в старых браузерах не работает.

Ответить

Веселый Дрозд Веселый Дрозд 05.11.2013 22:31:57

Одного не могу понять... Почему они вложены? Вообще не понял принцип.

Ответить

Павел Павел 19.10.2014 19:09:20

Пытаюсь сделать блок на сайте с прозрачным фоном и закруглёнными углами, пробовал стиль "opacity", но тогда прозрачные становятся все элементы страницы, сделал прозрачный однотонный рисунок ( background-repeat: repeat; получилась прозрачная заливка блока), сделал два прозрачных прямоугольных сектора (левый и правый угол). Сделал стиль как на Вашей этой странице, получилось два блока друг под другом. Немного изменил код, получилось расставить по углам блоки с углами. но как заполнить центр? не получается, вот мой код <body> <div class="div"> <div class="LL"></div> <div class="BG"></div> <div class="RR"></div> </div> </body> CSS стиль .div{ position: relative; /* Относительное позиционирование */ background-color: #0f0; height:350px; width: 350px; } .LL{ height: 40px; width: 40px; background: url(backgrWhiteLL40.gif) top left; /*путь к фоновой картинке*/ background-repeat: no-repeat; /*без повтора ресунка фона */ position: relative; } .BG{ position: relative; /*относительное позиционирование*/ background-image: url(backgrWhiteLL40.gif); /*путь к фоновой картинке*/ background-repeat: repeat; /*повтор ресунка фона */ margin: 20px 21px 22px 23px; /* Отступы вокруг блока */ } .RR{ position: absolute; /* Абсолютное позиционирование */ height: 40px; width: 40px; background: url(backgrWhiteRR40.gif); /*путь к фоновой картинке*/ background-repeat: no-repeat; /*без повтора ресунка фона */ top: 0; right: 0; } Подскажите пжлст, как поставить блок class="BG" между "LL" и "RR", и хотелось бы ширина блока была бы резиновая? Или может есть другой метод делать прозрачность только одного блока на странице?

Ответить

alexandrdante alexandrdante 19.10.2014 19:54:38

а почему бы просто не использовать заливку типа rgba у блока) проще,удобнее,разнообразнее,и прозрачным делает только блок. opacity же у блока,делает прозрачным и текст

Ответить

Павел Павел 20.10.2014 17:00:50

Спасибо, не знал об этом стиле.

Ответить

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