Многие сайты имеют привлекательные плавающие углы CSS. Они могут использоваться для многих целей, таких как реклама. В этом посте я объясню, как создать эти плавающие углы CSS. Чтобы понять его происхождение, было бы разумно сначала взглянуть на макет печати и то, как это связано с этим. В макетах печати изображения устанавливаются на страницу, чтобы текст обертывался вокруг них, когда это необходимо, обычно называемое, как перенос текста.
Немного теорий:
Одним из основных преимуществ использования CSS является то, что вы больше не вынуждены размещать свои сайты в таблицах. Возможности компоновки CSS дают вам полный контроль над позициями и размерами всех элементов страницы.
Если вы попытались выложить страницу со столами, в прошлом вы, вероятно, были раздражены тем, что ваш браузер не смог отобразить вашу страницу так, как вы этого хотели. Структуры таблиц не являются наиболее гибкими устройствами компоновки страниц, поскольку они не были предназначены для этой цели. Теперь, однако, с некоторой надежной поддержкой браузера в текущем поколении браузеров, у вас есть новый и значительно улучшенный вариант.
Если вы просматриваете эту страницу, вы увидите один плавающий угол в своем браузере. Даже когда вы изменяете размер своего браузера, угол будет придерживаться его позиции.
Демонстрация:
Для этого используйте следующий код CSS. В этом примере я объясню только угол «zornet-rasenimsa».
Код
#zornet-rasenimsa {
display: block;
position: absolute;
left: 0;
top: 0px;
overflow: visible;
width: 300px;
height: 300px;
margin: 0 0 0 0;
padding: 0;
z-index: 9999;
border: none;
float: none;
}
И в своем HTML, введите следующий код:
Код
<div id="zornet-rasenimsa">
<img src="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/upperleftcorner.gif" border="0">
</div>
Чтобы углы выглядели немного:
Код
<div id="zornet-rasenimsa">
<img src="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/upperleftcorner.gif" border="0"
style="filter:alpha(opacity=60);opacity: 0.60;-moz-opacity:0.60;">
</div>
Для кода четырех углов перейдите к плавающим CSS-углам и проверьте исходный код.
