[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 2
  • 1
  • 2
  • »
Форум » Сайтостроение » CSS & html » Рамки на картинки
Рамки на картинки
Small_vampireДата: Воскресенье, 16.10.2011, 08:28 | Сообщение # 1
The Girl Who Loves Vampires
Группа: Администраторы
Сообщений: 756
Награды: 13
Репутация: 18
Статус:

Рамки на картинки



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

1 вид - Квадратная рамка с закругленными краями при наведении
Эта рамка будет добавляться только к картинкам-ссылкам
Code
a img {
            border: 1px solid #afc6f6; /*Цвет обводки вокруг картинки и его толщина, при желании вы можете указать 2px или больше, чтобы сделать рамку толще*/
            background-color: #afc6f6; /*Цвет рамки*/
            margin: 1px; /*расстояние картинок в ширину*/
            padding: 2px;
            }

            a:hover img {
            border: 1px solid #6990f2; /*цвет и ширину обводки*/
            background-color: #6990f2; /*цвет фона*/
            margin: 1px;
            padding: 2px;
-moz-border-radius: 5px; /*радиус закругления углов*/
-webkit-border-radius: 5px;
border-radius: 5px;
            }


А теперь давайте разберем. a img - означает что рамка накладывается только картинки являющиеся ссылками.
a:hover img - рамка, которая будет при наведении на картинку являющаяся ссылкой.
Остальные настройки подписаны, их можно убрать легко не испортив код по желанию. а так это будет ваша подсказка.

Пример
1 - картинка-ссылка; 2 - картинка-ссылка при наведении


2 вид - Двухцветная рамка с закргуленными краями
Code
img {
background-color: #f2cd69; /*Часть заполненная оранжевым цветом*/
padding: 6px; /*Ширина части залитой оранжевым*/
border: solid 2px #f2ea69; /*Цвет и ширина желтой рамочки*/
-moz-border-radius: 5px; /*Радиус закругления углов рамки*/
-webkit-border-radius: 5px;
border-radius: 5px;
             }

a img {
background-color: #f2cd69; /*Часть заполненная оранжевым цветом*/
padding: 6px; /*Ширина части залитой оранжевым*/
border: solid 2px #f596d7; /*Цвет и ширина розовой рамочки*/
-moz-border-radius: 5px; /*Радиус закругления углов рамки*/
-webkit-border-radius: 5px;
border-radius: 5px;
             }


img и a img - означает, что рамка будет вокруг обычных картинок и картинок-ссылок

Пример


3 вид - Рамка с фоновой картинкой и с закргуленными краями
Code
img {
background-image:url('http://www.10pix.ru/img1/772050/5894516.jpg'); /*Вставляем сюда ссылку на фоновое изображением*/
padding: 6px; /*Ширина полосы фоновой картинки*/
border: solid 2px #f59696; /*Ширина и цвет розовой рамки*/
-moz-border-radius: 5px; /*Радиус закругления углов*/
-webkit-border-radius: 5px;
border-radius: 5px;
            }

a img {
background-image:url(http://www.10pix.ru/img1/772050/5894516.jpg); /*Вставляем сюда ссылку на фоновое изображением*/
padding: 6px; /*Ширина полосы фоновой картинки*/
border: solid 2px #f59696; /*Ширина и цвет розовой рамки*/
-moz-border-radius: 5px; /*Радиус закругления углов*/
-webkit-border-radius: 5px;
border-radius: 5px;
            }


Пример


4 вид - Двухцветная рамка, при наведении цвета меняются местами
Code
img {
background-color:#f59696; /*Цвет заливки (темная)*/
border:3px solid #efccae; /*Цвет и ширина обводки (светлая полоса)*/
margin:1px;
padding:4px;
}

img:hover {
background-color:#03bfb7; /*Цвет заливки (светлая полоса)*/
border:1px solid #efccae; /*цвет и ширина обводки (темная полоса)*/
margin:1px;
padding:4px;
}


Пример
1 картинка - обычная картинка; 2 картинка - при наведении на картинку ссылку


5 вид - Квадратная рамка с тенью
Code
a img {
background-color:#95ebb8; /*Цвет фона*/
border:2px solid #95ebb8; /*Цвет и ширина обводки*/
text-shadow:#000000 1px 1px 1;
margin:1px;
padding:4px;
box-shadow:0px 0px 10px #007d32; /*Цвет тени*/
-webkit-box-shadow:0px 0px 10px #007d32; /*Цвет тени*/
-moz-box-shadow:0px 0px 10px #007d32; /*Цвет тени*/
}

a img:hover {
background-color:#39e47e;  /*Цвет фона*/
border:2px solid #39e47e; /*Цвет и ширина обводки*/
text-shadow:#000000 1px 1px 1;
margin:1px;
padding:4px;
box-shadow:0px 0px 10px #007d32; /*Цвет тени*/
-webkit-box-shadow:0px 0px 10px #007d32; /*Цвет тени*/
-moz-box-shadow:0px 0px 10px #007d32; /*Цвет тени*/
}


Пример
1 картинка - обычная картинка; 2 картинка - при наведении на картинку ссылку


6 вид - Рамка с двумя закругленными краями
Code
a img {
padding : 6px 6px 6px 6px;
margin : 1px;
text-decoration : none;
border : 1px solid #deb2f0; /*Цвет и ширина обводки*/
color : #deb2f0; /*Цвет обводки*/
background-color : #f4d6ff; /*Цвет фона*/
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
}
a img:hover {
padding : 6px 6px 6px 6px;
margin : 1px;
text-decoration : none;
border : 1px solid #ae13ef; /*Цвет и ширина обводки при наведении*/
color : #ae13ef; /*Цвет обводки при наведении*/
background-color : #f4d6ff; /*Цвет заливки*/
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
}


Пример
1 картинка - обычная картинка; 2 картинка - при наведении на картинку ссылку


Если что не понятно - задаем вопросы)
 
АлинаДата: Воскресенье, 16.10.2011, 12:04 | Сообщение # 2
Моя версия-быть счастливой!
Группа: Друзья
Сообщений: 250
Награды: 0
Репутация: 3
Статус:

хороший урок,но я такие вещи не очень люблю

 
Small_vampireДата: Воскресенье, 16.10.2011, 12:11 | Сообщение # 3
The Girl Who Loves Vampires
Группа: Администраторы
Сообщений: 756
Награды: 13
Репутация: 18
Статус:

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

 
АлинаДата: Воскресенье, 16.10.2011, 12:23 | Сообщение # 4
Моя версия-быть счастливой!
Группа: Друзья
Сообщений: 250
Награды: 0
Репутация: 3
Статус:

Small_vampire, мдааа...

 
LollipopДата: Воскресенье, 16.10.2011, 13:16 | Сообщение # 5
Талантище
Группа: Мастер
Сообщений: 103
Награды: 6
Репутация: 11
Статус:

обожаю рамки шестого вида ^^

 
Small_vampireДата: Воскресенье, 16.10.2011, 17:06 | Сообщение # 6
The Girl Who Loves Vampires
Группа: Администраторы
Сообщений: 756
Награды: 13
Репутация: 18
Статус:

Lollipop, мне они тоже нравятся)

 
modern_mythДата: Пятница, 28.10.2011, 00:01 | Сообщение # 7
упырь
Группа: Пользователи
Сообщений: 14
Награды: 1
Репутация: 0
Статус:

Small_vampire, спасибо!)) супер!)) надо попробовать))

но тогда такая рамка будет везде?
 
Small_vampireДата: Вторник, 06.12.2011, 05:16 | Сообщение # 8
The Girl Who Loves Vampires
Группа: Администраторы
Сообщений: 756
Награды: 13
Репутация: 18
Статус:

modern_myth, да.Но ты можешь сделать по другому, но тогда придется к каждому изображению приписывать класс.

 
АлинаДата: Понедельник, 12.12.2011, 19:59 | Сообщение # 9
Моя версия-быть счастливой!
Группа: Друзья
Сообщений: 250
Награды: 0
Репутация: 3
Статус:

странно,но я вставила и не сработало

 
Small_vampireДата: Вторник, 13.12.2011, 04:43 | Сообщение # 10
The Girl Who Loves Vampires
Группа: Администраторы
Сообщений: 756
Награды: 13
Репутация: 18
Статус:

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

 
АлинаДата: Вторник, 13.12.2011, 15:51 | Сообщение # 11
Моя версия-быть счастливой!
Группа: Друзья
Сообщений: 250
Награды: 0
Репутация: 3
Статус:

Small_vampire, да и в самый верх только самый последний код и сохранила

 
LollipopДата: Вторник, 13.12.2011, 15:59 | Сообщение # 12
Талантище
Группа: Мастер
Сообщений: 103
Награды: 6
Репутация: 11
Статус:

тогда возможно, что ты неправильно прописываешь картинки. Некоторые рамки (1,5,6) будут "работать" только с картинками-ссылками.

 
Small_vampireДата: Вторник, 13.12.2011, 20:45 | Сообщение # 13
The Girl Who Loves Vampires
Группа: Администраторы
Сообщений: 756
Награды: 13
Репутация: 18
Статус:

Lollipop, да, есть рамки, которые действуют только на кликабельные изображения.

 
АлинаДата: Четверг, 15.12.2011, 16:01 | Сообщение # 14
Моя версия-быть счастливой!
Группа: Друзья
Сообщений: 250
Награды: 0
Репутация: 3
Статус:

Lollipop,
Quote
ты неправильно прописываешь картинки

В смысле?Как прописывать надо?Я не поняла


 
Small_vampireДата: Четверг, 15.12.2011, 16:10 | Сообщение # 15
The Girl Who Loves Vampires
Группа: Администраторы
Сообщений: 756
Награды: 13
Репутация: 18
Статус:

Алина, попробуй так
Code
.img {  
  padding : 6px 6px 6px 6px;  
  margin : 1px;  
  text-decoration : none;  
  border : 1px solid #deb2f0; /*Цвет и ширина обводки*/  
  color : #deb2f0; /*Цвет обводки*/  
  background-color : #f4d6ff; /*Цвет фона*/  
  border-top-left-radius: 10px;  
  border-bottom-right-radius: 10px;  
  -webkit-border-top-left-radius: 20px;  
  -webkit-border-bottom-right-radius: 10px;  
  -moz-border-radius-topleft: 10px;  
  -moz-border-radius-bottomright: 10px;  
  }  
  .img:link, .img:visited, .img:active  {  
  padding : 6px 6px 6px 6px;  
  margin : 1px;  
  text-decoration : none;  
  border : 1px solid #ae13ef; /*Цвет и ширина обводки при наведении*/  
  color : #ae13ef; /*Цвет обводки при наведении*/  
  background-color : #f4d6ff; /*Цвет заливки*/  
  border-top-left-radius: 10px;  
  border-bottom-right-radius: 10px;  
  -webkit-border-top-left-radius: 20px;  
  -webkit-border-bottom-right-radius: 10px;  
  -moz-border-radius-topleft: 10px;  
  -moz-border-radius-bottomright: 10px;  
  }


 
Форум » Сайтостроение » CSS & html » Рамки на картинки
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Конструктор сайтов - uCoz
Конструктор сайтов - uCoz