Пыха тебя найдет

Добро пожаловать на Пыху!

Логин:
Пароль:
 

Нет прописки? Зарегистрируйся!

Новости

Пыха переехала на новый сервер, ура!

Краснодарское время: 23 Май, 2012, 05:51:25

Страниц: [1] 2
« предыдущая тема следующая тема »
Печать
Автор Тема: Сделать блок с закругленными углами? [кроссбраузерно, без js]  (Прочитано 2490 раз)
0 Пользователей и 1 Гость смотрят эту тему.
mario    ↓ 
04 Апрель, 2009, 09:41:31
НЕ ХУЕТА! ХУЕТА!

wazzup
Группа: Джедаи

Карма: 67
Сообщений: 6162
Сила слова: 1.09
Доброго времени суток ув.форумчане!
Собственно сабж?
Мой вариант
css:
CSS

.corners { position: relative; overflow: hidden; }
.corners em.tl, .corners em.tr, .corners em.bl, .corners em.br
{
    position: absolute;
    font-size: 1px;
}
 
.corners-2 em.tl, .corners-2 em.tr, .corners-2 em.bl, .corners-2 em.br
{
    width: 4px;
    height: 4px;
    background-image: url(../i/corners/corners-2.png);
}
.corners-2 em.tl
{
    left: -2px;
    top: -2px;
}
.corners-2 em.tr
{
    right: -2px;
    top: -2px;
}
.corners-2 em.bl
{
    left: -2px;
    bottom: -2px;
}
.corners-2 em.br
{
    right: -2px;
    bottom: -2px;
}
 
html:
HTML

<div class="corners corners-10">
   <div class="box">
      Тут у нас текст, или еще что ;)
   </div>
</div>
 
[+]Читаемый код(быстрое назначение, нет лишних тэгов)
[+]Кроссбраузерность, при включение iepngfix.
[+]Нет эффекта, когда углы появляются поочередно.
[-]Не делается закругленный бокс в закругленном боксе.
[-]Для каждого радиуса рисуем новую пнгшку.

* corners-2.png (0.09 Кб, 4x4 - просмотрено 292 раз.)
« Последнее редактирование: 05 Апрель, 2009, 09:11:14 от Timur » Записан
с ув. mario.
Контакты
CTAPbIu_MABP    ↓ 
04 Апрель, 2009, 10:04:16 , спустя 22 минуты 45 секунд
 НЕ ХУЕТА! ХУЕТА!

мавр
Группа: в ухо

Карма: не нужна
Сообщений: 5187
Сила слова: 1.81
http://www.roundedcornr.com/
Записан
java.lang.OutOfMemoryError
CTAPbIu_MABP    ↓ 
04 Апрель, 2009, 10:04:43 , спустя 27 секунд
 НЕ ХУЕТА! ХУЕТА!

мавр
Группа: в ухо

Карма: не нужна
Сообщений: 5187
Сила слова: 1.81
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
Записан
java.lang.OutOfMemoryError
mario    ↓ 
04 Апрель, 2009, 10:58:52 , спустя 54 минуты 9 секунд
 НЕ ХУЕТА! ХУЕТА!

wazzup
Группа: Джедаи

Карма: 67
Сообщений: 6162
Сила слова: 1.09
хмм, очень интересно :)
http://www.vertexwerks.com/tests/sidebox/ - вот понравилось, код читаем, и так красивооо :)
Записан
с ув. mario.
Контакты
Убийца    ↓ 
04 Апрель, 2009, 11:05:58 , спустя 7 минут 6 секунд
 НЕ ХУЕТА! ХУЕТА!

адский парень
Группа: Жмурики

Карма: 7
Сообщений: 530
Сила слова: 1.32
oO
Записан
Givi    ↓ 
04 Апрель, 2009, 11:08:30 , спустя 2 минуты 32 секунды
 НЕ ХУЕТА! ХУЕТА!

Группа: Адекваты

Карма: 42
Сообщений: 2305
Сила слова: 1.82
oO x 10
Записан
Все, что говорят другие - неправда! До тех пор, пока ты сам в это не поверишь.
Если человек дурак, то... чур это не я!
mario    ↓ 
04 Апрель, 2009, 11:11:15 , спустя 2 минуты 45 секунд
 НЕ ХУЕТА! ХУЕТА!

wazzup
Группа: Джедаи

Карма: 67
Сообщений: 6162
Сила слова: 1.09
O!o ,what is it?!?
Записан
с ув. mario.
Контакты
phpdude    ↓ 
04 Апрель, 2009, 11:13:16 , спустя 2 минуты 1 секунду
 НЕ ХУЕТА! ХУЕТА!

я - ЭМО
Группа: в ухо

Карма: 344
Сообщений: д-о-х-у-я!
Сила слова: 1.66
вы про чо?
Записан
забанен. могу забанить других, пишите в личку
BEER. Helping ugly people have sex since 1862.
Убийца    ↓ 
04 Апрель, 2009, 11:14:19 , спустя 1 минуту 3 секунды
 НЕ ХУЕТА! ХУЕТА!

адский парень
Группа: Жмурики

Карма: 7
Сообщений: 530
Сила слова: 1.32
http://www.google.com/search?hl=ru&q=ghost+photos&sourceid=navclient-ff&rlz=1B3GGGL_ruRU319RU319&ie=UTF-8
Записан
mario    ↓ 
04 Апрель, 2009, 11:16:39 , спустя 2 минуты 20 секунд
 НЕ ХУЕТА! ХУЕТА!

wazzup
Группа: Джедаи

Карма: 67
Сообщений: 6162
Сила слова: 1.09
:)
Записан
с ув. mario.
Контакты
mario    ↓ 
04 Апрель, 2009, 11:22:25 , спустя 5 минут 46 секунд
 НЕ ХУЕТА! ХУЕТА!

wazzup
Группа: Джедаи

Карма: 67
Сообщений: 6162
Сила слова: 1.09
CTAPbIu_MABP

фсех флудеров в банн!!!
Записан
с ув. mario.
Контакты
Timur    ↓ 
05 Апрель, 2009, 09:13:25 , спустя 9 часов 51 минуту
 НЕ ХУЕТА! ХУЕТА!

NullPointerException
Группа: в ухо

Карма: 56
Сообщений: 1009
Сила слова: 5.55
перенести в F.A.Q. или в Готовые решения?
Записан
CTAPbIu_MABP    ↓ 
05 Апрель, 2009, 01:11:34 , спустя 3 часа 58 минут 9 секунд
 НЕ ХУЕТА! ХУЕТА!

мавр
Группа: в ухо

Карма: не нужна
Сообщений: 5187
Сила слова: 1.81
в /dev/null  перенеси
Записан
java.lang.OutOfMemoryError
phpdude    ↓ 
05 Апрель, 2009, 01:15:19 , спустя 3 минуты 45 секунд
 НЕ ХУЕТА! ХУЕТА!

я - ЭМО
Группа: в ухо

Карма: 344
Сообщений: д-о-х-у-я!
Сила слова: 1.66
CTAPbIu_MABP, поддерживаю
Записан
забанен. могу забанить других, пишите в личку
BEER. Helping ugly people have sex since 1862.
mario    ↓ 
05 Апрель, 2009, 10:42:54 , спустя 9 часов 27 минут 35 секунд
 НЕ ХУЕТА! ХУЕТА!

wazzup
Группа: Джедаи

Карма: 67
Сообщений: 6162
Сила слова: 1.09
Timur

перенести в F.A.Q. или в Готовые решения?
думаю не стоит, я тему создал для того что бы посмотреть как кто делает, ибо способов большучая куча, а каждый польуется по своим религиям... :) вот и хотел посмотреть, может по новому бы сделал бы :)
Записан
с ув. mario.
Контакты
Страниц: [1] 2
Печать
« предыдущая тема следующая тема »
 

Перейти в: