[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 2 из 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 картинка - при наведении на картинку ссылку


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

Small_vampire, это я поняла.Вот вставлю и всё?будет работать везде?или еще где-то что-то надо будет?например перед каждой картинкой код какой-то и т.д.

 
Perepiska99Дата: Пятница, 16.12.2011, 21:43 | Сообщение # 17
Талант
Группа: Пользователи
Сообщений: 72
Награды: 0
Репутация: 0
Статус:

Quote (Small_vampire)
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; }


То,что тут после звёздочек убирать?


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

Perepiska99, можно не убирать, то что в слешах html не выводит. Это просто подскзка, коды уже полностью готовы, править их не нужно, ну конечно только цвета.

 
Perepiska99Дата: Суббота, 17.12.2011, 13:58 | Сообщение # 19
Талант
Группа: Пользователи
Сообщений: 72
Награды: 0
Репутация: 0
Статус:

Small_vampire, Ок.Вообщем ставил шестой,очень плохо...Можно сделать только так,чтобы отображалось только в картинках на новостях?

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

Perepiska99, конечно задать свой класс. например в коде каждой картинки прописывать class="icons"

тогда код будет такой:
Code
.icons {  
  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;  
  }


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


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