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

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 2
1
2
»

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

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;
  }

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

Страница 1 из 2
1
2
»

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