http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1276275544.html <p>Закругленные углы у блоков, что-то в этом есть притягивающее и манящее, другое дело, как и каким образом, все сделано.</p> <p>Если оставить в стороне использование графики, что в большинстве случаев приводит к тому, что макет страницы будет фиксированным по ширине, сложности ее нарезки и расфасовки полученных кусков в пустые дополнительные контейнеры, а при изменении цветовой гаммы, на любом отдельно взятом участке все операции придется повторить и не единожды, то…</p> <p>И начинаются поиски более простых решений – html-код и стили.</p> <p>Понятно, что говорить о полноценном использовании CSS3 преждевременно, но в будущем это без всяких сомнений значительно упростит не легкую жизнь верстальщика.</p> <p>Посмотрим скриншот:</p> <img src="i/menus/radius_01.png" style="display:block;margin:10px auto;width:406px;height:228px;"> <p>Верхний блок с прямыми углами, нижний с небольшими закруглениями, на первый взгляд практически не заметными и сразу же возникает мысль, а стоит ли огород городить?</p> <p>Может быть, и не стоит, но посмотрим следующий скриншот:</p> <img src="i/menus/radius_02.png" style="display:block;margin:10px auto;width:347px;height:39px;"> <p>Как видим закругление углов пусть и не очень значительное, выглядит более привлекательным чем, если бы были просто прямые углы.</p> <p>О технике создания подобного трюка писал <a href="http://trifler.ru/blog/post_1217095767.html">ранее</a>, теперь же рассмотрим все в расширенном варианте.</p> <p>В общем случае потребуется три контейнера вложенных друг в друга:</p> <pre class="pre"> &lt;div&gt;&lt;!-- Блок #1 --&gt; &lt;div&gt;&lt;!-- Блок #2 --&gt; &lt;div&gt;&lt;!-- Блок #3 --&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p>Каждый блок отвечает за прорисовку необходимых нам border’ов:</p> <p>первый – вертикальные</p> <p>второй – верхний</p> <p>третий – нижний</p> <p>На этом собственно теория и заканчивается, по линку данному выше можно ознакомится со стилями, мы же перейдем к более практичным вещам.</p> <p>Скриншот горизонтального меню уже посмотрели, посмотрим html-код:</p> <pre class="pre"> &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;</pre> <p>Для полного счастья не хватает одного контейнера, рисуем :)</p> <pre class="pre"> &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Home&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;</pre> <p>Не на много все сложнее для вертикального меню:</p> <img src="i/menus/radius_03.png" style="display:block;margin:10px auto;width:211px;height:106px;"> <pre class="pre"> &lt;ul&gt; &lt;li class="nolink"&gt;&lt;em&gt;&lt;em&gt;Раздел № 1&lt;/em&gt;&lt;/em&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Кнопка 1&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;</pre> <p>Форма поиска по сайту, куда без нее :)</p> <img src="i/menus/radius_04.png" style="display:block;margin:10px auto;width:205px;height:27px;"> <p>Собственно статья из-за поиска и написана.</p> <p>Время, от времени занимаюсь адаптацией тем WordPress под скрипты Мастера Lasto и очень часто форма поиска в графическом исполнении или без оного, никак не вписывается в то, что получается в конечном итоге, а рисовать графику это последнее дело…</p> <p>Без проблем в эти милые закругления можно вставить и картинку при помощи:</p> <pre class="pre"> background:url(...);</pre> <p>Без тестовой страницы не <a href="i/menus/radius.htm">обойтись</a>.</p> <p>Плюсы данного подхода:</p> <ul><li>Блок не имеет фиксированной ширины</li> <li>Легко можно сменить цвет окантовки блока</li> <li>При отключенной графике ничего не теряем</li> <li>Фоновая заливка или графика, размноженная по x или y в контейнере любая</li></ul> <p>Минусы:</p> <ul><li>Толщина border’a не может быть больше 1px</li> <li>Нет возможности изменить радиус закругления</li> <li>Дополнительные контейнеры</li> <li>В меню на hover трудно получить смену цвета border’a, по крайней мере, пока у меня не получилось :)</li><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1276275544.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1276275544.html">All Comments</a></div> <!-- RSS_link_to_post end --><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1276275544.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1276275544.html">All Comments</a></div> <!-- RSS_link_to_post end --> Fri, 11 Jun 2010 23:59:04 GMT