ФорумРазработкаКлиентская сторонаВерстка и оформление → Сделать блок с закругленными углами? [кроссбраузерно, без js]

Сделать блок с закругленными углами? [кроссбраузерно, без js]

  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 4 апреля 2009 г. 21:41

    Доброго времени суток ув.форумчане!
    Собственно сабж?
    Мой вариант
    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:
    
    <div class="corners corners-10">
       <div class="box">
          Тут у нас текст, или еще что ;)
       </div>
    </div>
    

    [+]Читаемый код(быстрое назначение, нет лишних тэгов)
    [+]Кроссбраузерность, при включение iepngfix.
    [+]Нет эффекта, когда углы появляются поочередно.

    [-]Не делается закругленный бокс в закругленном боксе.
    [-]Для каждого радиуса рисуем новую пнгшку.
  • Trej Gun

    Сообщения: 5305 Репутация: N Группа: в ухо

    Spritz 4 апреля 2009 г. 22:04, спустя 22 минуты 45 секунд

  • Trej Gun

    Сообщения: 5305 Репутация: N Группа: в ухо
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 4 апреля 2009 г. 22:58, спустя 54 минуты 9 секунд

    хмм, очень интересно :)
    http://www.vertexwerks.com/tests/sidebox/ - вот понравилось, код читаем, и так красивооо :)
  • ubica

    Сообщения: 530 Репутация: N Группа: Кто попало

    Spritz 4 апреля 2009 г. 23:05, спустя 7 минут 6 секунд

    oO
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 4 апреля 2009 г. 23:08, спустя 2 минуты 32 секунды

    oO x 10
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 4 апреля 2009 г. 23:11, спустя 2 минуты 45 секунд

    O!o ,what is it?!?
  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 4 апреля 2009 г. 23:13, спустя 2 минуты 1 секунду

    вы про чо?
    Сапожник без сапог
  • ubica

    Сообщения: 530 Репутация: N Группа: Кто попало
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 4 апреля 2009 г. 23:16, спустя 2 минуты 20 секунд

    :)
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 4 апреля 2009 г. 23:22, спустя 5 минут 46 секунд


    фсех флудеров в банн!!!

  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 5 апреля 2009 г. 9:13, спустя 9 часов 51 минуту

    перенести в F.A.Q. или в Готовые решения?
  • Trej Gun

    Сообщения: 5305 Репутация: N Группа: в ухо

    Spritz 5 апреля 2009 г. 13:11, спустя 3 часа 58 минут 9 секунд

    в /dev/null перенеси
  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 5 апреля 2009 г. 13:15, спустя 3 минуты 45 секунд

    CTAPbIu_MABP, поддерживаю
    Сапожник без сапог
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 5 апреля 2009 г. 22:42, спустя 9 часов 27 минут 35 секунд


    перенести в F.A.Q. или в Готовые решения?

    думаю не стоит, я тему создал для того что бы посмотреть как кто делает, ибо способов большучая куча, а каждый польуется по своим религиям… :) вот и хотел посмотреть, может по новому бы сделал бы :)

Пожалуйста, авторизуйтесь, чтобы написать комментарий!