Рамки на картинки
В этом уроке я раскажу вам как сделать несколько видов рамок для изображений. Чтобы установить их, нужно прописать код в вверх 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 картинка - при наведении на картинку ссылку
Если что не понятно - задаем вопросы)
