Ще трохи стилів для цитат

51

Проблем з оформленням і висновком цитат, на сьогоднішній день не існує в принципі. Можна налаштувати зовнішній вигляд блоку з текстом як завгодно, все залежить від фантазії автора. За допомогою таблиць каскадних стилів CSS та нових стандартів в CSS3, можливості для натхнення практично безмежні. Але не у всіх є схильність і бажання фантазувати, от саме для цього я і продовжую розпочату серію у статті «Оформлення цитат». Нову серію із прикладів різних способів оформлення цитат.

Правда, необхідно відзначити, що не всі користувачі зможуть побачити однаковий результат.Ті хто використовує замшілий IE6, наприклад, не побачать закруглені кути блоків з текстом. Opera починаючи з останніх версій нарешті стала підтримувати деякі нові властивості CSS3.

Найбільш красиво і точно, з витримкою і відображенням всіх параметрів, при виведенні цитат з оформленням за допомогою CSS, працюють нові версії браузерів Firefox, Chrome і Safari.
Проблеми відображення пов’язані тільки з висновком округлених кутів в деяких браузерах, так як вони тупо ігнорують властивість border-radius: В іншому ж, все виглядає навіть дуже не погано.
І так, щоб отримати блок з цитатою з закругленими кутами і темним фоном у файл .css необхідно прописати наступний код:

1
2
3
4
5
6
7
blockquote {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; }

blockquote {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; }

На сторінці ви отримаєте цитату такого виду:

Стили оформления цитат

Використовувати такий стиль можна, та й потрібно, не обмежуючись оформленням лише цитат. Це так само можуть бути і коментарі або просто блоки з будь якою інформацією, що виводиться на сторінках ваших сайтів. Ну, а ми продовжимо про цитатах.


Світлий фон з закругленими кутами

1
2
3
4
5
6
7
8
9
10
blockquote {
margin: 1em 20px;
padding: 10px;
border: 2px solid #555;
background-color: #f2f2f2;
color: #555;
font-size: 100%;
text-align: justify;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }

blockquote {
margin: 1em 20px;
padding: 10px;
border: 2px solid #555;
background-color: #f2f2f2;
color: #555;
font-size: 100%;
text-align: justify;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }

В результаті ми отримаємо чудовий блок з цитатою без використання файлів з зображеннями:

Стиль оформления цитаты

Ви легко можете експериментувати з закругленими кутами. Необхідно лише пам’ятати одне, що для різних браузерів існують свої правила . Наприклад Firefox відійшов від стандартів і в порівнянні з Safari, для «лисиці» існують свої правила, які можна регулювати за допомогою параметрів стилів CSS.

1
2
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

Маніпулюючи даними параметрами не складно досягти різних результатів в оформленні блоків з цитатами. Наприклад, якщо виникне потреба надати округлість різних кутах, що ми і побачимо на наступному прикладі:

1
2
3
4
5
6
7
8
9
10
11
blockquote {
border: 2px solid #fc0;
padding: 8px 10px;
font-size: 100%;
color: #c90;
font-weight: bold;
background-color: #ff9;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px; }

blockquote {
border: 2px solid #fc0;
padding: 8px 10px;
font-size: 100%;
color: #c90;
font-weight: bold;
background-color: #ff9;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px; }

У підсумку всіх не хитрих дій, виходить добре і добротно оформлений блок з цитатою, і все так само без використання будь-яких картинок:

Оформление цитат

Не погано буде виглядати ваша цитата або комент, якщо використовувати округлення до трьох з чотирьох кутах, в стилі так званого міхура. Для прикладу скористайтеся наступною структурою коду css:

1
2
3
4
5
6
7
8
9
10
11
blockquote {
border: 1px solid #999;
background-color: #d8d8f4;
margin: 1em 40px;
padding: 15px;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px; }

blockquote {
border: 1px solid #999;
background-color: #d8d8f4;
margin: 1em 40px;
padding: 15px;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px; }

Що з цього вийде при виведенні на сторінках, можете побачити на скріні нижче, здається досить пристойно вийшло:

Оформление цитат

На всіх цих нехитрих прикладах, спробував показати найпростіший спосіб оформлення, практично чого завгодно, з допомогою кількох рядків коду. Це лише мала xfcnm всіх великих можливостей, які открываюпся нам з приходом нових стандартів CSS3.

Прихильникам плагінів WordPress, випереджаючи їх вигуки на підтримку оних, поспішаю помітити, що сам дуже навіть користуються ве чудовий плагін для цитат і іншого «WP — Note», чим зможете переконатися нижче.

От раніше ознакою готовності зварених пельменів було їх спливання. Тепер пельмені навіть не тонуть…

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: