• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Делаем цветную рамку на изображение в CSS (Создаем целевую рамку на 2 пикселя вокруг изображение)
Делаем цветную рамку на изображение в CSS
Kosten
 		Суббота, 21 Сентября 2019, 01:56 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Здесь не создаем не какого эффекта про появление рамки, а создаем ее по умолчанию, которая будет вокруг изображение. Здесь нам понадобиться свойство border, которое применим к к селектору img, что после этого появляется рамка.

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



HTML

Код
<img src="http://zornet.ru/_fr/83/4514692.jpg" alt="zornet.ru">

CSS

Код
img {
    border: 2px solid #1cbd1c;
}

На этом установка закончена.

Демонстрация

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



HTML

Код
  <p>
   <img src="http://zornet.ru/_fr/83/8997332.jpg" alt="Ключевые слова №1">
   <img src="http://zornet.ru/_fr/83/3637912.jpg" alt="Ключевые слова №2" class="klass-ramki">
  </p>

CSS

Код
.klass-ramki {
    border: 2px solid #1fb71f;
}

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

Демонстрация

Также рекомендую посмотреть, как создается эффект, это появление рамка при наведении курсора на изображение.
Прикрепления: 3219139.png (39.4 Kb) · 0061729.png (55.1 Kb)
Страна: (RU)
Kosten
 		Понедельник, 23 Сентября 2019, 02:35 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Обрамленное изображение с прозрачным фоном. Заполнение вокруг следующего кадра или рамки немного тоньше, чем приведенное выше, но вы можете сделать его шире, изменив отступ. Для прозрачного фона добавьте следующее в ваш файл CSS.

HTML

Код
<img src="images/YourImageName" width="200" height="256" alt="" class="img-frame">

CSS

Код
.img-frame {
    background:transparent;
    padding:8px;
    border:1px solid #999999;
}


Это должно создать изображение с прозрачной рамкой:
Прикрепления: 5971949.jpg (13.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Делаем цветную рамку на изображение в CSS (Создаем целевую рамку на 2 пикселя вокруг изображение)
  • Страница 1 из 1
  • 1
Поиск: