Здравствуйте друзья и читатели блога. Не так давно Google добавил в список гаджет Избранное сообщение. Особой популярностью он пока не пользуется, но все же на некоторых блогах владельцы добавили новый гаджет.
Только вот вид такого избранного виджета оставляет желать лучшего. Применим стили CSS и оформим наш гаджет на свой вкус и цвет.
Еще вариант рамки с цветовой тенью
Вот несколько вариантов оформления виджета избранного сообщения. Вы оформляйте на своё усмотрение. В помощь информация по ссылкам:
Только вот вид такого избранного виджета оставляет желать лучшего. Применим стили CSS и оформим наш гаджет на свой вкус и цвет.
Как добавить гаджет: дизайн-добавить гаджет-выбрать "избранное сообщение"
HTML код
Такая стильная рамочка оформления
Пишем название гаджета или оставляем как есть. Обязательно установите отметку "показывать заголовок сообщения" и "показывать изображение" Текстовый фрагмент по желанию.
Можно использовать последнее опубликованное сообщение или выбрать по ярлыкам. Откройте список и выберите нужное сообщение из любого ярлыка. Посмотрите предварительный просмотр и нажмите "сохранить".
Самое простенькое оформление в рамку и изменить фон гаджета
HTML код
<style>
#FeaturedPost1{
background: #f8f8ff; *// фон гаджета;
border:7px groove #03b4cc; *// размер, форма и цвет рамки;
font-size:20px;color:#f00; *// размер и цвет шрифта;
}
</style>
#FeaturedPost1{
background: #f8f8ff; *// фон гаджета;
border:7px groove #03b4cc; *// размер, форма и цвет рамки;
font-size:20px;color:#f00; *// размер и цвет шрифта;
}
</style>
Такая стильная рамочка оформления
HTML код
<style>
#FeaturedPost1{
margin:1px;
padding: 20px;
background: #f8f8ff; *// цвет фона;
text-align:italic; *// шрифт наклонный;
color: #444444; *// цвет шрифта;
border: 3px solid #029d74; *// размер. форма и цвет рамки;
border-radius: 8px; *// размер скругления углов рамки;
-moz-border-radius: 8px; *// размер скругления углов рамки;
-webkit-border-radius: 8px; *// размер скругления углов рамки;
box-shadow: inset 0 0 20px #029d74; *// цвет тени;
-moz-box-shadow: inset 0 0 20px #029d74; *// цвет тени;
-webkit-box-shadow: inset 0 0 20px #029d74; *// цвет тени;
}
</style>
Еще вариант рамки с цветовой тенью
HTML код
<style>
#FeaturedPost1 {
font-style:italic;
box-shadow:-1px -2px 37px rgba(63, 175, 133, 1);
-webkit-box-shadow:-1px -2px 37px rgba(63, 175, 133, 1);
font-size:;
padding:20px;
margin:px;
}
</style>
#FeaturedPost1 {
font-style:italic;
box-shadow:-1px -2px 37px rgba(63, 175, 133, 1);
-webkit-box-shadow:-1px -2px 37px rgba(63, 175, 133, 1);
font-size:;
padding:20px;
margin:px;
}
</style>
Вот несколько вариантов оформления виджета избранного сообщения. Вы оформляйте на своё усмотрение. В помощь информация по ссылкам:
- Как выделить часть текста в рамку;
- Рамочки с прошивкой для текста и цитат на CSS;
- Стильные рамки со свечением цвета и изображением;
- Треугольники в оформлении дизайна рамок и цитат;
- Рамки разной толщины границ и формы окантовки;
- Безопасные коды цветов для использования в дизайне сайта;
- RGB и HEX коды цветов Название цвета на английском языке;
Пишите в комментариях свои пожелания, задавайте вопросы. На этом закончу, буду благодарна, если поделитесь со своими друзьями в соц сетях. Всего доброго.
