Доброго времени суток, мої дорогі читачі і гості блогу. Ось за що я люблю Блоггер, так це за його гнучкий і пластичний шаблон. По суті справи, якщо ви хоч трохи в ньому розберетеся, що дуже всім раджу, можна створити просто унікальний за своїм виглядом блог, сайт. Можливостей насправді багато.
Отже, як в шаблоні Блоггер можна змінити стиль гаджетів. Зробити картинку фоном, округлити кути, виділити гаджет в рамку і багато іншого.
Для початку також заходимо у вкладку шаблон - змінити HTML і знайти в кодах CSS ось такий рядок
/ * Widgets
----------------------------------------------- * /
Саме вона нам сьогодні знадобитися. Зараз спускаємося трохи нижче і знаходимо фрагмент, який відповідає за поле віджетів sidebar .widget
Відразу за фігурною дужкою і будемо додавати стилі CSS. Запропоную просто кілька варіантів. Тут, як то кажуть, вистачило б фантазії. Щось можна прибрати, щось додати.
1. Зробимо фон, колір, задамо ширину рамки і закруглити кути. Якось ось так це буде виглядати.
Замість основного фону я використовувала зображення. Розмір рамки встановила 3px і задала # 336699 колір. Часто у початківців возникаю проблеми зі зміною значення кольору. Тому ще раз зверну увагу. Міняйте тільки саме знак решітки і шестизначне число. 10px; -закруглілі кути віджета.
Код виглядає так.
2. Трохи змінимо параметри і додамо значення boxShadow, ніж задамо наружнюю тінь.
border-radius: 20px; / закруглення кутів /
background: #CCCCCC; / колір фону /
boxShadow
width: 80%;
max-width: 550px;
margin: 2em auto;
padding: 1em;
box-shadow: 0 0 10px 5px rgba (221, 221, 221, 1);
>
3.Мне дуже подобається ефект тіні з боків. Подивіться ось тут. будь ласка, як це виглядає.
boxShadow
width: 80%;
max-width: 550px;
margin: 10px auto;
padding: 1em;
box-shadow:
0 1px 4px rgba (0, 0, 0. 3),
-23px 0 20px -23px rgba (0, 0, 0. 8);
>
4.Чи зробити тінь усередині блогу.
boxShadow
width: 80%;
max-width: 550px;
margin: 1em auto;
padding: 1em;
box-shadow: 0 0 40px rgba (0, 0, 0. 1) inset;
>
Взагалі, при додаванні різних стилів, можна зробити найнеймовірніші перетворення дизайну гаджетів. Кого це зацікавила, пропоную подивитися ще інші ефекти, які можна застосувати в даному випадку, на цьому сайті.
Завжди рада відповісти на ваші запитання. На сьогодні у мене все. Скоро побачимося. Спасибі, що читаєте мої шпаргалки.
Ой, а що це там нижче? Ну треба ж! Натискаємо!