Главная » Изображения » Как изменить рамку для фотографии в Блоггере
Как изменить рамку для фотографии в Блоггере
Если вам импонирует рамка для ваших картинок в статье, но хотелось бы её изменить на более красивую, в шаблоне нужно будет сделать небольшие изменения. Рамки можно будет менять хоть каждый день.
Обязательно перед каждым изменением в шаблоне сохраняйте его.
Меняем рамку для изображений
Заходим в Шаблон - Изменить HTML. Нужная строка может выглядеть по-разному:
1)
.post img{
____код____
}
2)
.post img
{____код____
}
3)
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
____код____
}
4)
img {
____код____
}
5)
.post-body img {
____код____
}
Находим нужный код с помощью ctrl+f .
Находится он в отделе
/* Posts
----------------------------------------------- */
У меня в шаблоне Корпорация чудес оказался последний вариант.
Этот код нужно удалить и вставить либо предложенные ниже, либо свой, но сделанный на основе предложенных.Код, который будете заменять в шаблоне, сохраните на компьютере. Если вдруг понадобится вернуться к исходному коду, вы легко установите его обратно.
Вариант 3 - рамка зелёная, без тени.
Вариант 1 - рамка в виде марки:
.post img {padding: 8px;background: #ffffff;border: 3px dotted #E2E2E2;-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);box-shadow: 0 0 20px rgba(0, 0, 0, .2);-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
Вариант 2 - ещё одна рамка в виде марки
.post img {padding: 8px;background: #ffffff;border: 3px dashed #E2E2E2;-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);box-shadow: 0 0 20px rgba(0, 0, 0, .2);border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
Вариант 4 - градиентная рамка и тень..post img {padding: 8px;background: #FFFFFF;border-top:10px ridge #2ecca4;border-right:10px double #2ecca4;border-bottom:10px ridge #2ecca4;border-left:10px double #2ecca4;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
.post img {
-moz-box-shadow: 0 0 20px rgba(114, 10, 242, 1);
-webkit-box-shadow: 0 0 20px rgba(114, 10, 242, 1);
box-shadow: 0 0 20px rgba(114, 10, 242, 1);
border: 4px solid transparent;
border-image-source:linear-gradient(to bottom right, #760a85 0%, #ff00d4 100%);
border-image-slice: 1;
}
Вариант 5 - двойная рамка с тенью.
Вариант 6 - рамка круглая..post img {padding: 8px;background: #FFFFFF;border: 5px double #495518;-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);box-shadow: 0 0 20px rgba(0, 0, 0, .2);-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.post img {border-radius: 50%/50%;box-shadow: 0 0 0 3px #495518,0 0 0 7px #6c7a28,0 0 0 10px #879539;padding: 40px;margin: 20px auto;}
Если фото прямоугольное, то рамка будет овальной, если фото квадратное, то рамка будет круглая.
Вариант 7 - изменить форму фото.
.post img {
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;}
Добавлять можно тени, различные рамки, в том числе градиентные, менять их цвет, ширину, скруглять и многое другое. Одним словом, от .post img { и до } можно создавать разное оформление.
Спасибо! Очень даже интересно!
ОтветитьУдалитьПожалуйста.
Удалить