[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Закругленные углы
roland_07
Кто-то может подсказать как делать закругленные углы с помощью css. В инете много чего написано, но желательно без использования картинок и прочего. Хотелось бы вот как на этом сайте: http://docki.net/. Там в центре основной блок в рамке с круглыми углами. Заранее спасибо.



Спустя 28 минут, 49 секунд (22.06.2009 - 12:47) glock18 написал(а):
Цитата
http://docki.net/.

там углы сделаны картинками.

насколько я знаю, в css нельзя сделать закругленный бордер... человеческими методами.

в голову только приходит идиотских совершенно способ - используй картинки, в общем.

Спустя 8 минут, 8 секунд (22.06.2009 - 12:55) waldicom написал(а):
А кто сказал, что на том сайте без картинок это реализовано? И почему использование картинок есть "идиотский совершенно способ"?

Спустя 12 минут, 36 секунд (22.06.2009 - 13:08) glock18 написал(а):
Цитата (waldicom @ 22.06.2009 - 09:55)
А кто сказал, что на том сайте без картинок это реализовано? И почему использование картинок есть "идиотский совершенно способ"?


не, ты меня не понял. я сказал все наоборот. то есть хотел сказать, походу smile.gif

Цитата (glock18 @ 22.06.2009 - 09:47)
там углы сделаны картинками.


вот собственно я и говорю, что они там сделаны картинками.

Цитата (glock18 @ 22.06.2009 - 09:47)
в голову только приходит идиотских совершенно способ - используй картинки, в общем.


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

а решение, например, такое biggrin.gif

угол заполняешь сплошным цветом - цвет угла.
в него напихиваешь по position:absolute кучу блоков с z-index больше чем у угла и белым фоном так, чтобы они как раз не покрыли только само закругление.

очень идиотское решение, но без картинок.

а теперь,roland_07, подумай - действительно ли актуально делать все без картинок? smile.gif

Спустя 55 минут, 46 секунд (22.06.2009 - 14:04) roland_07 написал(а):
Извиняюсь, может стоит и правда подумать о картинках

Спустя 19 минут, 51 секунда (22.06.2009 - 14:24) sergeiss написал(а):
Собственно говоря, местоположение картинок ты можешь как раз в ЦСС настроить.

И вообще... Когда появляется вопрос у человека "как сделать, чтобы было как на таком-то сайте", особенно что касается чисто визуальных эффектов, то у меня всегда появляется встречный вопрос. А что, посмотреть текст страницы и подумать самому - никак нельзя? Можно "молча" получить много полезной информации. Пробежаться по всем связям, понять, как там что устроено...

Спустя 11 минут, 41 секунда (22.06.2009 - 14:35) roland_07 написал(а):
Есть вот такой вот код:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Блок с закругленными углами </title>

<script language="javascript" type="text/javascript">
<!--
function getWidthBlock() {
var block = document.getElementById("wrap");
var divWidth = parseInt(document.getElementById("text").offsetWidth);
block.style.width = divWidth +10 +"px";
}
//-->
</script>

</head>

<body onload="getWidthBlock();">

<div id="wrap">
<b style="font-size:1px; display:block; overflow:hidden;">
<b style="background:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; margin:0px 5px;"></b>
<b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden;height:1px; border-style:solid; border-width:0px 1px; margin:0px 3px; border-width:0px 2px;"></b>
<b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; border-style:solid; border-width:0px 1px; margin:0px 2px;"></b>
<b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; border-style:solid; border-width:0px 1px; height:2px; margin:0px 1px;"></b>
</b>

<div style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; border-style:solid; border-width:0px 1px;">
<b style="font-size:1px; display:block; overflow:hidden; height:1px;"></b>

<table border="0" id="text">
<tr>
<td valign="middle" nowrap="nowrap" style="font:bold 16px Arial;">
И тут что-то написать
</td>
</tr>
</table>

<b style="font-size:1px; display:block; overflow:hidden; height:1px;"></b>
</div>

<b style="font-size:1px; display:block; overflow:hidden;">
<b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; border-style:solid; border-width:0px 1px; height:2px; margin:0px 1px;"></b>
<b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; border-style:solid; border-width:0px 1px; margin:0 2px;"></b>
<b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; border-style:solid; border-width:0px 1px; margin:0px 3px; border-width:0px 2px;"></b>
<b style="background:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; margin:0px 5px;"></b>
</b>
</div>

</body>

У меня вопрос: как сделать так чтобы эта таблица была не слева, а по центру. Заранее прошу прошения за такой вопрос. Просто уже все попробовал. Если убрать из боди onload="getWidthBlock();", то она растягивается на весь лист. Подскажите пожалуйста.

Спустя 25 минут, 5 секунд (22.06.2009 - 15:00) glock18 написал(а):
1. когда дело касается таблицы, нужно перегружать сообщение мусором, чтобы другие искали в нем таблицу.

2. что касается центрирования - попробуй задать стиль margin: 0 auto;
собственно, искать саму таблицу нет интереса.

Спустя 5 минут, 48 секунд (22.06.2009 - 15:06) roland_07 написал(а):
Цитата (glock18 @ 22.06.2009 - 12:00)
1. когда дело касается таблицы, нужно перегружать сообщение мусором, чтобы другие искали в нем таблицу.




А что значит: "перегружать сообщение мусором"

Спустя 19 минут, 51 секунда (22.06.2009 - 15:26) glock18 написал(а):
Цитата (roland_07 @ 22.06.2009 - 12:06)
А что значит: "перегружать сообщение мусором"

huh.gif

значит что вставить в сообщение содержимое всего документа, когда нужна только таблица. и еще может быть, ее родитель.

HTML
<div><table border="0" id="text">
<tr>
<td valign="middle" nowrap="nowrap" style="font:bold 16px Arial;">
И тут что-то написать
</td>
</tr>
</table></div>

этого вполне хватит - по-русски будет "как поставить таблицу по центру дива". читай пункт 2 моего прошлого поста.

Спустя 1 час, 24 минуты, 31 секунда (22.06.2009 - 16:50) roland_07 написал(а):
с margin: 0 auto не получилось

Спустя 40 минут, 50 секунд (22.06.2009 - 17:31) glock18 написал(а):
td задай align=center, только что за изврат: таблица с одной строкой и одной ячейкой?

Спустя 23 минуты, 16 секунд (22.06.2009 - 17:55) Sylex написал(а):
в CSS 3 можно делать закругленные углы

Спустя 1 минута, 16 секунд (22.06.2009 - 17:56) Sylex написал(а):
есть решения на ява-скриптах для простых бордюров без картинок...

и, конечно же, картинками - все 4 угла [+2 или 4 стороны] или 2 угла, зависит от блока короче smile.gif

Спустя 37 минут, 6 секунд (22.06.2009 - 18:33) glock18 написал(а):
Цитата (Sylex @ 22.06.2009 - 14:55)
в CSS 3 можно делать закругленные углы

прикольно. это какой-то из новых border-style?

Спустя 35 минут, 34 секунды (22.06.2009 - 19:08) Sylex написал(а):
еще раз даю ссылку на этот классный обзор smile.gif

http://vremenno.net/html-css/38-articles-a...rounded-corners

glock18
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

также можно задать радиус для каждой стороны

Спустя 19 минут, 25 секунд (22.06.2009 - 19:28) glock18 написал(а):
прочту. кажется, уже понимаю, что это за радиус такой. забавно smile.gif интересно, а по гиперболоиде скоро можно будет бордер выгнуть? smile.gif

Спустя 4 минуты, 17 секунд (22.06.2009 - 19:32) Joker написал(а):
Да чот нечего классного в обзоре не нашел... всё типично и легко. Хотя для новичка наверне полезно.

Спустя 7 минут, 13 секунд (22.06.2009 - 19:39) glock18 написал(а):
а, по-моему, так забавно. столько решений такой тривиальной задачи. а еще начинка на английском, что мне еще больше нравится smile.gif обязательно почитаю чуть погодя

Спустя 48 минут, 18 секунд (22.06.2009 - 20:28) Sylex написал(а):
Цитата (glock18 @ 22.06.2009 - 22:28)
интересно, а по гиперболоиде скоро можно будет бордер выгнуть? smile.gif

наверное, в CSS 5 biggrin.gif

Спустя 29 минут, 21 секунда (22.06.2009 - 20:57) roland_07 написал(а):
Цитата (glock18 @ 22.06.2009 - 14:31)
только что за изврат: таблица с одной строкой и одной ячейкой?

У меня большая таблица - с селектами и кучей всего

Спустя 1 час, 50 минут, 5 секунд (22.06.2009 - 22:47) roland_07 написал(а):
и все же, к сожалению, не получается центрировать

Спустя 53 минуты, 11 секунд (22.06.2009 - 23:40) glock18 написал(а):
roland_07, задай td атрибут width="*".

Цитата (roland_07 @ 22.06.2009 - 17:57)
У меня большая таблица - с селектами и кучей всего


до сих пор не понимаю зачем таблица. таблица большая тогда, не когда она
Цитата
с селектами и кучей всего

а когда в ней по крайней мере больше одной ячейки в строке (до этого момента она и таблицей считаться не в праве).

Спустя 34 минуты, 25 секунд (23.06.2009 - 00:15) glock18 написал(а):
Sylex, представляю те css файлы с гиперболоидами...
HTML
.block
{
border-width: 10px;
border-hyperbolic: two-cavity 10 8 9;
}


или как-нибудь круче - расширенная версия

HTML
.block
{
border-width: 10px;
border-hyperbolic-cavity: 2;
border-hyperbolic-a: 10;
border-hyperbolic-b: 8;
border-hyperbolic-c: 9;
/* и еще */
border-style: dotted;
}


интересно какой он тогда будет biggrin.gif я себе как-то "двуполостный гиперболоид в крапинку" представляю laugh.gif

Спустя 10 часов, 42 секунды (23.06.2009 - 10:15) sergeiss написал(а):
Я вот что думаю по сему поводу.

Учитывая тот неоспоримый факт, что многие языки сближаются по своим возможностям, потому что вбирают самое лучшее, то где-нибудь в CSS23 (а может, в CSS37?) будет возможность создавать свои компоненты. Как в С++Билдере. И вот там сможешь делать бордюрчики как угодно: хоть семиполосный хитровыгнутый гиперболоид в голубую крапинку, хоть двухполосный wink.gif

Анекдот не совсем в тему, но вспомнился по ассоциациям:
Времена далёкого коммунистического будущего. Усталая продавщица в мясном отделе магазина объясняет возмущенному покупателю:
- Мужчина, я вам уже пятый раз объясняю: собачатина восемнадцатой категории рубится вместе с будкой и цепью!!!

Спустя 10 минут, 34 секунды (23.06.2009 - 10:26) glock18 написал(а):
biggrin.gif

ну да, у меня тоже сомнения по поводу версии CSS когда гиперболоид там появится smile.gif n-полостный, где n > 2, по-моему, не придумали еще. так что еще их должны разработать сначала biggrin.gif

у нас случай был на моей бывшей работе:
писали что-то типа большого поисковика по жратве в Англии + на нем нужна была возможность сравнения еды по полезным качествам.

в итоге нам дали задание - сделать, что сайт сам определял эти самые качества, а также вкус, консистенцию и т.п. Мы сделали так - blink.gif А в плане на разработку на полном серьезе написали что типа "Создать институт по искуственному интеллекту. Разработать искуственный интеллект" и скромные 70 лет на выполнение biggrin.gif

после этого от заказчика пришла более реальная формулировка требований smile.gif

Спустя 7 часов, 39 минут, 31 секунда (23.06.2009 - 18:06) roland_07 написал(а):
Цитата (glock18 @ 22.06.2009 - 20:40)
roland_07, задай td атрибут width="*".


задал, не помагает, может еще что-то есть?
А что именно в этой функции
PHP
function getWidthBlock() {
var 
block document.getElementById("wrap");
var 
divWidth parseInt(document.getElementById("text").offsetWidth);
block.style.width divWidth +10 +"px";
}

Объясните кто-нибудь

Спустя 2 часа, 17 минут, 13 секунд (23.06.2009 - 20:23) UnWind написал(а):
Не вижу ничего плохого в использовании картинок, это самый оптимальный вариант.
Хм вот вам ссылка на одну интересную статейку.
http://designformasters.info/posts/round-corners-no-image/
Там описанно как сделать закруглённые края на CSS без использования изображений.
P.S.> Посмотрел 35 статей о создании закруглённых углов, мало что работает, но варианты всё же есть.

Спустя 14 дней, 1 час, 43 минуты, 14 секунд (7.07.2009 - 22:06) pas написал(а):
Цитата (roland_07 @ 22.06.2009 - 13:50)
с margin: 0 auto не получилось

Попробуйте так:

HTML
<div id="wrap" style="margin-left: auto; margin-right: auto">

Или я не правильно понял проблему?

Спустя 5 месяцев, 6 дней, 4 часа, 16 минут, 13 секунд (14.12.2009 - 03:22) Rigel написал(а):
Цитата (Sylex @ 22.06.2009 - 16:08)
glock18
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;


работает только в firefox, да и в нем если залить background, он будет вылазить за пределы закругленных углов

Спустя 15 часов, 9 минут, 29 секунд (14.12.2009 - 18:32) deMone написал(а):
Да, проблема большая с этими скруглениями, конечно.

Я её для себя решил очень простым способом:
Подключаем JS-библиотеку rocon (http://code.google.com/p/rocon/) и после этого у каждого элемента, которому прописывается class="rcX" появляются закруглённые уголки радиусом в X пикселей. Кроссбраузерно. Всяческие там фоны и прочее поддерживает отлично.

— А как же быть с теми, у кого отключён яваскрипт?!
— Наплевать. Всем мил не будешь.

Спустя 18 дней, 17 часов, 8 минут, 52 секунды (3.01.2010 - 11:41) cyberx написал(а):
У меня такая же проблема, не могу округлить таблички. есть такой css код:
.table {
border:1px solid #CCCCCC;
width:130px;
margin-left:10px;
margin-right:0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px;
-moz-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px; width:220px; height:50px;}


он округляет но не работает в explorer, может как то можно исправить и сделать так чтоб работал в explorer?

Спустя 6 дней, 7 часов, 47 минут, 30 секунд (9.01.2010 - 19:28) malbur написал(а):
Цитата
в CSS 3 можно делать закругленные углы


Не подскажешь как?

Спустя 21 день, 20 часов, 16 минут, 21 секунда (3.02.2010 - 15:44) cyberx написал(а):
Вот это работает во всех браузерах
<style type="text/css">
body{padding: 20px;background-color: #FFF;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p
{margin: 0 10px}
h1
{font-size: 250%;color: #FFF}
h2
{font-size: 200%;color: #f0f0f0}
p
{padding-bottom:1em}
h2
{padding-top: 0.3em}
div
#nifty{ margin: 0 10%;background: #9BD1FA; width:700px;}
b.rtop, b.rbottom{display:block;background: #FFF}
b
.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b
.r1{margin: 0 5px}
b
.r2{margin: 0 3px}
b
.r3{margin: 0 2px}
b
.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>

<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Скругление углов</h1>
<p>Обратите внимание на окантовку этого блока. У него закругленные углы.
Это сделанно без использования картинок. Только за счет использования CSS3.</p>
<p>Подробный пример код данного примера отображен ниже.</p>
<p>Но перед этим немного рекламы, которая меня "кормит".</p>

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>


Спустя 5 месяцев, 8 дней, 2 часа, 21 минута, 32 секунды (11.07.2010 - 17:06) Yuriy_Latenko написал(а):
Цитата
Да, проблема большая с этими скруглениями, конечно

Спустя 32 минуты, 46 секунд (11.07.2010 - 17:39) qpayct написал(а):
да никакая это не пробелма. просто подождать чуток надо. скоро и в ИЕ будет всё работать

Спустя 42 минуты, 16 секунд (11.07.2010 - 18:21) Gesandte написал(а):
Цитата (qpayct @ 11.07.2010 - 14:39)
да никакая это не пробелма. просто подождать чуток надо. скоро и в ИЕ будет всё работать

насмешил) совсем скоро)))) мечтатели. Это реализуют в 9 осле (в лучшем случае), на сколько я знаю 9 осел удет работать на винде не ниже висты, а по интернету полно лазиет народу с 6 ослом, которым тупо лень обновить арбузер, атут прямо они еще и от своей любимой хрюши должны будут отказаться....тормоза....
лет 5 наверно ещепойдет, когда 9 осел среди ословодов будет преобладать.


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

Спустя 46 минут, 7 секунд (11.07.2010 - 19:07) Yuriy_Latenko написал(а):
http://alsouved.narod.ru/menu/menu1/all_th...r/computer.html
Аудио - видео проигрыватели для сайта, блога.
Закругленные стильные рамки без скриптов.
Закруглённые уголки с помощью одного изображения.
Таблица безопасных шрифтов.


http://alsouved.narod.ru/menu/menu1/all_th...r/computer.html
Audio - video players for site, blog.
Rounded corners, borders, frames.
Rounded corners with one image.
Web safe fonts.


Цитата (qpayct @ 11.07.2010 - 14:39)
да никакая это не пробелма. просто подождать чуток надо. скоро и в ИЕ будет всё работать
Побыстрее бы...

Спустя 1 час, 28 минут, 34 секунды (11.07.2010 - 20:36) qpayct написал(а):
Gesandte
побольше оптимизма rolleyes.gif

Спустя 43 минуты, 33 секунды (11.07.2010 - 21:19) Yuriy_Latenko написал(а):
И не кашлять rolleyes.gif

Спустя 1 минута, 41 секунда (11.07.2010 - 21:21) Gesandte написал(а):
Цитата (qpayct @ 11.07.2010 - 17:36)
Gesandte
побольше оптимизма  rolleyes.gif

Оптимизм должен быть умеренный) Поэтому надеяться что ситуация по ослу измениться не приходится. Кстати тут даже есть связь определенная, майкрософт со своим ослом пожизни отстает по внедрению новых технологий по сравнению с другими арбузерами, так и пользователь осла так же любят старье, типа зачем чтото менять и так все работает)

Поэтому жизненоважные элементы диза всетаки стоит делать без использования цсс3, хотя если насрать на осла, то можно на цсс3 rolleyes.gif

Спустя 2 часа, 1 минута, 20 секунд (11.07.2010 - 23:22) sergeiss написал(а):
Цитата (Gesandte @ 11.07.2010 - 19:21)
а тут прямо они еще и от своей любимой хрюши должны будут отказаться....тормоза....

Вопрос не только в "тормознутости" smile.gif Вот если ты заведомо используешь "левое" ПО (например, на домашнем компе), то ты можешь ставить любые, самые свежие версии. Но если человек работает в более-менее крупной конторе, то там жестко всё: ПО только лицензионное, и админских прав нету. Т.е. ты не можешь установить то, что хочешь. Хорошо еще, если Оперу или еще что-то кроме ИЕ можно использовать. А то еще и ИЕ 6-й стоит... Вот это точно "вешалка" smile.gif

Это я про браузеры говорю... И уж тем более это всё относится и к ОС, и к офисным программам. Только лицензионное! Пусть и не самое свежее.

Так что дело не только в людях, но и во внутренней политике компании.

И как ты думаешь, будет ли компания постоянно тратить деньги на большое количество новых лицензий? Нет, конечно.

Спустя 45 минут (12.07.2010 - 00:07) qpayct написал(а):
даже таких тише-едов, как майкрософт, поставят перед фактом и тут уже деваться будет некуда wink.gif

Спустя 8 часов, 15 минут, 54 секунды (12.07.2010 - 08:23) Gesandte написал(а):
Бу) А политику компании определяют люди. Кстати обноволение арбузера на винде бесплатно (у самого лецензия)
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.