VPF::И опять закругленные углы css/img?

Redstuff

Дата 13.5.2007, 17:17 (ссылка)

(нет голосов)

Загрузка ...

Команда REDSTUFF

Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

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

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

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

Это сообщение отредактировал(а) Redstuff - 13.5.2007, 17:18

--------------------

ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>

mr.Anderson

Дата 13.5.2007, 18:00 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

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

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

--------------------

Redstuff

Дата 13.5.2007, 18:32 (ссылка)

(нет голосов)

Загрузка ...

Команда REDSTUFF

Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

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

--------------------

ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>

mr.Anderson

Дата 13.5.2007, 18:36 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

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

--------------------

Redstuff

Дата 13.5.2007, 18:57 (ссылка)

(нет голосов)

Загрузка ...

Команда REDSTUFF

Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

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

--------------------

ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>

Mymik

Дата 13.5.2007, 19:08 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 7
Всего: 78

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

)

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

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

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

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

mr.Anderson

Дата 13.5.2007, 19:12 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

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

--------------------

mr.Anderson

Дата 13.5.2007, 19:37 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

Вот.

Код


.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 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

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

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

mr.Anderson

Дата 13.5.2007, 19:51 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

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

--------------------

Redstuff

Дата 13.5.2007, 20:08 (ссылка)

(нет голосов)

Загрузка ...

Команда REDSTUFF

Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

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

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

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

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

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

Это сообщение отредактировал(а) Redstuff - 13.5.2007, 20:09

--------------------

ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>

SelenIT

Дата 13.5.2007, 20:36 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

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

)

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

Не вопрос;)

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

mr.Anderson

Дата 13.5.2007, 20:50 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

Redstuff,

Цитата

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

Цитата

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

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

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

--------------------

Redstuff

Дата 13.5.2007, 21:24 (ссылка)

(нет голосов)

Загрузка ...

Команда REDSTUFF

Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

SelenIT, здорово!

Код


#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 (ссылка)

(нет голосов)

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

Репутация: 1
Всего: 16

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

--------------------

PHP Чат Скрипт

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »