Joomla! Україна

Блоги — цікаві статті та записи про Joomla, програмування, верстку та інше.
  • Версія Joomla! від 13.08.2019
  • 1229 користувачі
  • 60 записи в блогах
  • 788 новини та статті
     

Закруглені кути за допомогою псевдоелементів :before та :after

27.10.2007, 18:56 |  Прочитано: 12200 раз  |  CSS та верстка  |  Автор: Денис Носов Друк|E-mail

(0 голоси)

Іноді постає завдання в шаблоні створити фон для модулів із заокругленими кутами. Як затратити мінімум зусиль та html-коду ми розкажемо у цій статті.

Оскільки фон из деяких частин сучасні браузери (крім Safari) не підтримують, то такі речі доводиться робити декількома елементами, вкладеними одне в одне. Є спосіб як можна уникнути подібних речей.

Маємо html-код:

<div class="incut">
    Текст
</div>

У css задаємо фон блакитний:

.incut{
    background: #dff7ff;
    padding: 20px;
}

Чотири кути (це зображення із заокругленням) навішуємо на елементи :before та :after:

.incut:before{
	content:url(top_left.gif);
	background: url(top_right.gif) no-repeat 100% 0;
	height: 7px;
	display: block;
	margin: -20px -20px 13px -20px;
}
.incut:after{
	content:url(bottom_left.gif);
	background: url(bottom_right.gif) no-repeat 100% 0;
	height: 7px;
	display: block;
	margin:13px -20px -20px -20px;
}

Цей приклад працює у всіх сучасних броузерах крім Internet Explorer (Firefox 1-2, Opera 7-9, Safari 3). Для IE аналогічний функціонал навішуємо за допомогою ява-скрипту, який ми розмістимо у самому css (краще розмістити його в окремий файл css для Internet Explorer):

.incut{
	zoom:1;
	ehavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '<span style="background: url(top_right.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="top_left.gif" alt="" /></span>' + this.innerHTML + '<span style="background: url(bottom_right.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;"><img src="bottom_left.gif" alt="" /></span>') : '');
}

Тепер наш блок буде працювати і в Internet Explorer 6-7.При відключених скриптах користувач IE побачить блакитне тло без заокруглених кутів, тобто візуально нічого не зламається.