Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > И опять закругленные углы css/img?

Автор: Redstuff 13.5.2007, 17:17

Кто как реализует закругленные углы?

http://img387.imageshack.us/my.php?image=img1uk3.png

Видел даже с использованием стилей, но стоит ли это затрат времени, когда картинка 1 угла весит 50-200 байт.

Какой самый оптимальный вариант, чтобы можно было встраивать код куда угодно?

Автор: mr.Anderson 13.5.2007, 18:00

За малым знанием стилей я делаю так: делаю верхнюю полоску со скругленными углами, нижнюю полоску, и фон. А потом через трехстроковую таблицу делаю идеально и сверхпереносимо между браузерами панельку со скругленными углами. smile

Может, и не современно, но работоспособно на 100%. И при весе верхнего/нижнего рисунка в 1 килобайт незначительны затраты трафика и времени.

Автор: Redstuff 13.5.2007, 18:32

mr.Anderson, под полоской ты подразумеваешь от начала однго угла до конца другого?
_________________________
(_________________________)
Так чтоль?

Автор: mr.Anderson 13.5.2007, 18:36

Да, правильно. Вторая полоска - это такая же, но отраженная по вертикали (можно и другую, правда, сделать). Очень удобно.

Автор: Redstuff 13.5.2007, 18:57

mr.Anderson, 2 существенных недостатка:
1) размер
2) нет возможности делать резину

Автор: Mymik 13.5.2007, 19:08

Цитата(Redstuff @ 13.5.2007, 17:17

)

Видел даже с использованием стилей,

С помощью каких это стилей ??? те что работают только в Mozilla ???

Предпочитаю делать такое чудо с помощью JS -->> http://my-blog.name/gordi/post_1173530617.html

Автор: mr.Anderson 13.5.2007, 19:12

Redstuff, все недостатки легко устраняются небольшим усложнением структуры таблицы. Если надо, могу показать, как.

Автор: mr.Anderson 13.5.2007, 19:37

Вот.

Код


.tableText { 
 padding: 10px;
}

Код


<table border='0' align='center' cellspacing='0' cellpadding='0'>
 <tr>
  <td><img src='leftTopAngle.png'></td> <!-- Левый верхний угол -->
  <td background='topBorder.png'>Заголовок</td>
  <td><img src='rightTopAngle.png'></td> <!-- Правый верхний угол -->
 </tr>
 <tr><td class='tableText' colspan='3'>Текст таблицы</td></tr>
 <tr>
  <td><img src='leftBottomAngle.png'></td> <!-- Левый нижний угол -->
  <td background='bottomBorder.png'>&nbsp;</td> <!-- Нижняя полоса -->
  <td><img src='rightBottomAngle.png'></td> <!-- Правый нижний угол -->
 </tr>
</table>

Автор: SelenIT 13.5.2007, 19:39

Имхо, в той же табличке 3х3 можно использовать одну картнку - полный кружок - как фон для всех 4-х уголков, по-разному его позизионируя в них, а верх-низ-правый край-левый край просто залить цветом. Конечно, если нужны тени, текстуры и т.п., то таким ходом уже не отделаться...

Автор: mr.Anderson 13.5.2007, 19:51

SelenIT, вот именно, поэтому я предпочитаю именно "уголковую" структуру таблицы. Универсально и работоспособно на 100%.

Автор: Redstuff 13.5.2007, 20:08

Mymik, http://cssplay.co.uk/boxes/krazy.html проверял в Опере и ИЕ

SelenIT, вроде хорошая идея на счет кружка, покажешь пример?

mr.Anderson, только тогда зачем было в первом посте указывать, что полоски вырезаешь, а в примере 4 уголка smile

, хотя сам пока таким способом делаю smile

П.С. давайте приводить примеры картинками и кодом, а лучше сразу страницу... Глядишь соберем информацию для статьи smile

Автор: SelenIT 13.5.2007, 20:36

Цитата(Redstuff @ 13.5.2007, 20:08

)

покажешь пример?

http://silverflame.at.tut.by/corner/1234.html

Автор: mr.Anderson 13.5.2007, 20:50

Redstuff,

Цитата

только тогда зачем было в первом посте указывать, что полоски вырезаешь, а в примере 4 уголка

Цитата

все недостатки легко устраняются небольшим усложнением структуры таблицы. Если надо, могу показать, как.

Насчет кода - я привел. smile

Только картинки не стал собирать.

Автор: Redstuff 13.5.2007, 21:24

SelenIT, здорово!

http://img79.imageshack.us/my.php?image=myyz9.gif

Код


#news {
    background: #0f61b0;
    height: 113px;
    width: 100%;
    margin-top: 15px;
}
#news tr {
    vertical-align: top;
}
#news td {
    padding-left: 15px;
}
#news a {
    background: url(img/red.gif) no-repeat;
    font-size: 11px; 
    color: White;
    padding-left: 20px;
    margin-top: 7px;
    display: block;
}
.tla {
    background: url(img/tla.gif) no-repeat;
    width: 12px;
    height: 11px;
}
.tra {
    background: url(img/tra.gif) no-repeat right;
    width: 12px;
    height: 11px;
}
.bra {
    background: url(img/bra.gif) no-repeat right;
    width: 12px;
    height: 11px;
}
.bla {
    background: url(img/bla.gif) no-repeat;
    width: 12px;
    height: 11px;
}

Код


<table id="news" cellspacing="0" cellpadding="0" border="0">
<tr>
    <td class="tla"></td>
    <td></td>
    <td class="tra"></td>
</tr>
<tr>
    <td colspan="3">
    <a href="#">Ñîáûòèÿ è ìíåíèÿ</a>
    <a href="#">Íàïèñàòü ïèñüìî</a>
    <a href="#">×àñòî çàäàâàåìûå âîïðîñû</a>
    <a href="#">Ãîëîñîâàíèå íà ñàéòå</a>
    </td>
</tr>
<tr>
    <td class="bla"></td>
    <td></td>
    <td class="bra"></td>
</tr>
</table>

Есть предложения по оптимизации моего кода?

Автор: Elfet 5.1.2009, 22:05

Вот тут их куча: http://www.smileycat.com/miaow/archives/000044.php
Какой вариант наилучший? smile

Автор: Nikol 9.1.2009, 04:36

Elfet, вот и я как раз хотела дать эту ссылку - она у меня в закладках. Лично я выбрала для себя http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/ дивный резиновый вариант.

Это для блоков, а для таблиц всегда использую вариант 3х3, как написал mr.Anderson.

На счет закругления без картинок - мне это не очень нравится, т.к. угловато получается, сглаживания ведь нет, да и код довольно громоздкий.

Еще мне понравился вариант, который используется в http://css-framework.ru/, правда у меня не было времени до конца разобраться в нем. Можете почитать http://css-framework.ru/doc/corners/. И там же есть еще две ссылки на статьи с уголками http://habrahabr.ru/blogs/webdev/30019/ и http://cssing.org.ua/2008/06/23/rounded-corners-unusual-approach/.