Пример 1. Скруглены все div. Практической ценности нет, демонстрируются приемы
CSS:
h1{
font-size:20px;
color:#8B4513;
background:#F4A460;
}
h1,p{
margin:20px;
padding:10px;
}
.blue{
background:#B0E0E6;
color:#4169E1;
margin:20px;
padding:10px;
}
.red{
background:#FFDAB9;
color:#FF0000;
margin:20px;
padding:10px;
}
.white{
background:#FFF;
color:#000;
width:18em;
}
Вызов Nifty:
Nifty("div","big")
HTML:
<div class="white">
div class white
<h1>Заголовок h1</h1>
<p class="red">
абзац класс red
</p>
<div class="blue">
div класса blue
</div>
div class white
</div>
Результат:
Пример 2. Скруглены только верхние углы H1. Практической ценности нет, демонстрируются приемы
CSS:
То же, что и в примере 1
Вызов Nifty:
Nifty("h1","big top");
HTML:
<div class="white">
div class white
<h1>Заголовок h1</h1>
<p class="red">
абзац класс red
</p>
<div class="blue">
div класса blue
</div>
div class white
</div>
Результат:
Пример 3. Сглажены левый верхний и правый нижний углы абзаца класса red
CSS:
То же, что и в примере 1
Вызов Nifty:
Nifty("p.red","big tl br")
HTML:
<div class="white">
div class white
<h1>Заголовок h1</h1>
<p class="red">
абзац класс red
</p>
<div class="blue">
div класса blue
</div>
div class white
</div>
Результат:
Пример 4. Сглаживание контейнеров с id content и nav
CSS:
h1{
font-size:20px;
color:#8B4513;
background:#F4A460;
}
h2{
font-size:16px;
color:#8B4513;
background:#F4A460;
}
h1,h2,p{
margin:20px;
padding:10px;
}
div#container{
width:450px;
margin:0 auto;
padding:10px 0;
text-align:left;
}
div#content{
float:left;
width:300px;
padding:10px 0;
background:#BAFB80;
}
div#nav{
float:right;
width:145px;
padding:10px 0;
background:#DBCAEE;
}
Вызов Nifty:
Nifty("div#content,div#nav")
HTML:
<div id="container">
<div id="content">
div id=content
<h1>Заголовок h1</h1>
<p>абзац абзац абзац
абзац абзац абзац
абзац абзац абзац
</p>
<h2>Заголовок h2</h2>
<p> абзац абзац абзац
абзац абзац абзац
абзац абзац абзац
</p>
div id=content
</div>
<div id="nav">
div id=nav
<h2>Заголовок h2</h2>
<p>абзац абзац </p>
div id=content
</div>
</div>
Результат:
Пример 5. Бокс с цветным заголовком
CSS:
div.box{
width:200px;
}
div.box h3{
margin:0px;
padding:15px 0;
text-align:center;
color:#FFFFCC;
background:#FFBD00;
}
div.box p{
margin:0;
padding:15px;
}
div.back{
background:#FFFFCC;
}
Вызов Nifty:
Nifty("div.box h3","top big");
Nifty("div.box div","bottom big");
HTML:
<div class="box">
<h3>Заголовок бокса длинный</h3>
<div class="back">
<p>Это пример использования
технологии
<strong>
NiftyCube
</strong>
для скругления углов.
</p>
</div>
</div>
Результат:
Пример 6. Бокс с цветным заголовком и рамками
CSS:
div.box{
width:200px;
margin:5px auto;
padding:5px 5px 5px 5px;
background:#FFD700;
}
div.header{
background:#DAA520;
padding:10px;
text-align:center;
text-height:50%;
}
div.content{
clear:both;
padding:5px 0;
margin:5px 0 0px 0;
background:#F0E68C;
text-height:50%;
}
Вызов Nifty:
Nifty("div.box");
Nifty("div.header","top small");
Nifty("div.content","bottom small");
HTML:
<div class="box">
<div class="header">
<strong>Заголовок</strong>
</div>
<div class="content">
<p>
Абзац в боксе
Абзац в боксе
Абзац в боксе
Абзац в боксе
Абзац в боксе
Абзац в боксе
</p>
</div>
</div>
Результат:
Пример 7. Скругление контейнеров
CSS:
.box{
width:200px;
background:#FFD700;
border:2px solid #DAA520;
color:#000;
padding:5px;
}
.blue{
background:#B0E0E6;
color:#4169E1;
margin:0px;
padding:5px;
border:none;
}
.red{
background:#FFDAB9;
color:#FF0000;
margin:0px;
padding:5px;
border:none;
}
.white{
border:none;
background:#FFF;
color:#000;
padding:5px;
width:190px;
}
Вызов Nifty:
Nifty("div.white", "big");
Nifty("div.red", "big");
Nifty("div.blue", "big");
HTML:
<div class="box blue">
<h3>Заголовок</h3>
<p>
Здесь мы можем
ввести любой текст.
</p>
<p>
Здесь мы можем
ввести любой текст.
</p>
</div>
<br />
<div class="box red">
<h3>Заголовок</h3>
<p>
Здесь мы можем
ввести любой текст.
</p>
<p>
Здесь мы можем
ввести любой текст.
</p>
</div>
<br />
<div class="box">
<div class="box white">
<h3>Заголовок</h3>
<p>
Здесь мы можем
ввести любой текст.
</p>
<p>
Здесь мы можем
ввести любой текст.
</p>
</div>
</div>
<br />
Результат:
Замечание. В некоторых примерах происходило неправильное отображение уголков в браузере Opera версии 10.0.
Честно говоря, это удивило. Да, действительно, Opera не очень хорошо иногда обрабатывает Javascript, но чтобы так...
На всякий случай протестировал примеры на другом компьютере, и всё отобразилось правильно.
Версия Opera одна и та же - 10.00 Сборка: 1750,
Идентификация браузера: Opera/9.80 (Windows NT 5.1; U; ru) Presto/2.2.15 Version/10.00.
На всякий случай сделаем "узелок на память".
После экспериментов обнаружено, в чем глюки Opera:
Для примера 5 CSS:
div.box h3{
margin:0px;
padding:15px;
text-align:center;
color:#FFFFCC;
background:#FFBD00;
}
Отображается в Opera:
Если убрать padding:15px, то Opera покажет правильно. А Firefox, и даже IE показывают правильно и с padding. Чтобы Opera тоже использовала отступы сверху и снизу пришлось задать нулевые отступы сбоку:
div.box h3{
margin:0px;
padding:15px 0;
text-align:center;
color:#FFFFCC;
background:#FFBD00;
}
Как влияет отключение Javascript
Javascript включен:
Javascript отключен:
Для исправления надо вставлять br или какой-то текст:
<div class="white">
<br />
<h1>Заголовок h1</h1>
<p class="red">абзац класс red</p>
<div class="blue">
<p class="red">абзац класс red</p>
</div>
<br />
</div>
Тогда и при отключенном Javascript показывается прилично:
Итоги
При использовании технологии Nifty возможно создавать разные виды боксов со скругленными уголками. Но далеко не все, какие нужны. Недостатком метода является определенная капризность в требованиях к коду CSS и HTML.
Пожалуй, наилучший способ использования показан в примере 7 - первые два бокса. Главное достоинство - очень простой код HTML, только один div:
<div class="box blue">
Здесь мы можем ввести любой текст.
</div>
Внутри такого контейнера можно вставлять любой код. Очень удобно, что непосредственно в HTML не требуется никаких дополнительных указаний на сглаженность уголков. Кроме того, вставку таких div можно и привязать к списку Стили редактора TinyMCE.
Написать комментарий