Привет, всем. Сегодня опять про картинки и предлагаю для вас попробовать красивый эффект рамки, которая будет раскладываться веером при наведении курсора на ваше изображение. Всё на чистом CSS.
Для начала посмотрите самый простой эффект рамки, может быть кто - нибудь и на этом остановится. А ниже приведу несколько вариантов трансформации рамки. Всё приведённые эффекты можно посмотреть в этом редакторе. Просто скопируйте любой код и вставьте его в поле редактора.
Пример просто рамки без эффекта
Рамка разложится в правую сторону (миниатюра в начале поста)
Попробуем поиграться с цветом рамки и её шириной. Заменим в кодах значения
border: 8px solid #FFCCCC; на другие
Рамка разложится в левую сторону
Рамочка раскладывается во все стороны
Чтобы в блоге рамка отразилась по центру страницы заключите весь код вот так
<div style="margin:0 auto;width:300px;">
Здесь весь код одного из примеров рамки
</div>
Если нужно сделать по центру и добавить отступы вверху и внизу сделаем вот ка
<div style="margin:30px auto;width:300px;">
Здесь весь код одного из примеров рамки
</div>
Ширину width: 300px; можно устанавливать по желанию. Зелёным цветом отметила адрес картинки - меняйте на свой.
Вот так из одного варианта, используя свойства трансформации и псевдоэлементов можно создать уникальные рамки для картинок вашего блога.
Спасибо за ваше внимание и до встречи.

Пример просто рамки без эффекта
<style>
.ramka{
float: left;
/* - Ширина картинки - */
width: 400px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 8px solid #FFCCCC;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type {margin-right: 0;}
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 8px solid #FFCCCC;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before {top: 4px; z-index: -10;}
.ramka:after {top: 8px; z-index: -20;}
</style>
<div class="ramka">
<img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" alt=""/>
</div>
.ramka{
float: left;
/* - Ширина картинки - */
width: 400px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 8px solid #FFCCCC;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type {margin-right: 0;}
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 8px solid #FFCCCC;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before {top: 4px; z-index: -10;}
.ramka:after {top: 8px; z-index: -20;}
</style>
<div class="ramka">
<img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" alt=""/>
</div>
Рамка разложится в правую сторону (миниатюра в начале поста)
<style>
.ramka {
float: left;
/* - Ширина картинки - */
width: 300px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 8px solid #FFCCCC;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type { margin-right: 0; }
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 8px solid #FFCCCC;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before { top: 4px; z-index: -10; }
.ramka:after { top: 8px; z-index: -20; }
.ramka.rotated:hover:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
.ramka.rotated:hover:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
</style>
<div class="ramka rotated">
<img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" />
</div>
.ramka {
float: left;
/* - Ширина картинки - */
width: 300px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 8px solid #FFCCCC;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type { margin-right: 0; }
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 8px solid #FFCCCC;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before { top: 4px; z-index: -10; }
.ramka:after { top: 8px; z-index: -20; }
.ramka.rotated:hover:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
.ramka.rotated:hover:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
</style>
<div class="ramka rotated">
<img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" />
</div>
Попробуем поиграться с цветом рамки и её шириной. Заменим в кодах значения
border: 8px solid #FFCCCC; на другие
Рамка разложится в левую сторону
<style>
.ramka {
float: left;
/* - Ширина картинки - */
width: 300px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 5px solid #CC0066;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type { margin-right: 0; }
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 5px solid #CC0066;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before { top: 4px; z-index: -10; }
.ramka:after { top: 8px; z-index: -20; }
.ramka.rotated-left:hover:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.ramka.rotated-left:hover:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
</style>
<div class="ramka rotated-left">
<img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" />
</div>
.ramka {
float: left;
/* - Ширина картинки - */
width: 300px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 5px solid #CC0066;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type { margin-right: 0; }
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 5px solid #CC0066;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before { top: 4px; z-index: -10; }
.ramka:after { top: 8px; z-index: -20; }
.ramka.rotated-left:hover:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.ramka.rotated-left:hover:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
</style>
<div class="ramka rotated-left">
<img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" />
</div>
Рамочка раскладывается во все стороны
<style>
.ramka {
float: left;
/* - Ширина картинки - */
width: 300px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 10px solid #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type { margin-right: 0; }
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 10px solid #fff;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before { top: 4px; z-index: -10; }
.ramka:after { top: 8px; z-index: -20; }
.ramka.twisted:hover:before {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
.ramka.twisted:hover:after {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(-4deg);
}
</style>
<div class="ramka twisted">
<img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" />
</div>
.ramka {
float: left;
/* - Ширина картинки - */
width: 300px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 10px solid #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type { margin-right: 0; }
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 10px solid #fff;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before { top: 4px; z-index: -10; }
.ramka:after { top: 8px; z-index: -20; }
.ramka.twisted:hover:before {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
.ramka.twisted:hover:after {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(-4deg);
}
</style>
<div class="ramka twisted">
<img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" />
</div>
Чтобы в блоге рамка отразилась по центру страницы заключите весь код вот так
<div style="margin:0 auto;width:300px;">
Здесь весь код одного из примеров рамки
</div>
Если нужно сделать по центру и добавить отступы вверху и внизу сделаем вот ка
<div style="margin:30px auto;width:300px;">
Здесь весь код одного из примеров рамки
</div>
Ширину width: 300px; можно устанавливать по желанию. Зелёным цветом отметила адрес картинки - меняйте на свой.
Вот так из одного варианта, используя свойства трансформации и псевдоэлементов можно создать уникальные рамки для картинок вашего блога.
Спасибо за ваше внимание и до встречи.
Получайте новые сообщения с блога прямо на почту
Интересный вариант. Для разнообразия очень даже мило выглядит. Попробовала в редакторе поменять цифры. Спасибочки, Вика. В закладки!
ОтветитьУдалитьЛюба, спасибо. Ты обязательно где - то применишь. Как у тебя с проблемой вируса?
ОтветитьУдалитьДа убрала блок статистику и всё нормализовалось. Спасибо.
УдалитьВиктория, ты кудесница! Поколдовала, как всегда, и получился красивый эффект рамки.
ОтветитьУдалитьМагия CSS.
Удалитькак всегда, Вика, высший пилотаж
ОтветитьУдалить