• Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Форум » Веб-разработка » Вопросы про uCoz » Закругление углов с помощью CSS на сайте
Закругление углов с помощью CSS на сайте
Kosten
Пятница, 26 Июня 2015 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Тут скинул один материал где можно закруглить углы у вида материалов и вид будет совершенно другой. Как мы знаем за это отвечает в CSS border-radius: 10px; или просто назовем его радиус. Тут главное его поставить как понимаю грамотно, то можно так установить, что весь сайт закруглится. Нашел стили от этого скрипта и примерил radius и вот что получилось.



Правильно ли сделано, или как то можно по другому.
Прикрепления: 2521708.jpg (57.2 Kb)
Страна: (RU)
workman
Суббота, 27 Июня 2015 | Сообщение 2
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Kosten, Вот еще есть варианты скругления углов, например картинки... но можно подогнать именно у вида материалов
Страна: (RU)
Kosten
Суббота, 27 Июня 2015 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
workman, пробовал, что то не получилось.
Страна: (RU)
Kosten
Суббота, 27 Июня 2015 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
С дивами, получается также как с border-radius.

Код
<div style="background"> материал </div>


CSS:

Код
#img-rad {  
               border:3px solid #85A0C9;//Указываем толщину рамки и цвет  
               border-radius: 10px;//Указываем радиус скругления  
               -webkit-border-radius: 10px;  
               -moz-border-radius: 10px;  
}


Получилось так же, так как реально это под картинку заточено.

Код
<div style="background: url('ссылка на картинку'); width: 448px; height: 250px;"></div>
Страна: (RU)
Kosten
Суббота, 27 Июня 2015 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Идей не дождался и прошлось, как там говорят, самому креативить и вот что получилось.

Прикрепления: 5737396.jpg (67.3 Kb)
Страна: (RU)
workman
Суббота, 27 Июня 2015 | Сообщение 6
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
НУ КАК-ТО ТАК biggrin :D biggrin ТЫ ЕСЛИ ЧТО СПРАШИВАЙ. КОМУ-КОМУ А ТЕБЕ ПОДСКАЖУ smile


Код
<div style="background: url('http://zornet.ru/_fr/45/s5737396.jpg'); width: 448px; height: 250px; border: 1px solid #405C0A; border-radius: 0 180px 0 200px; -webkit-border-radius: 0 180px 0 200px; - moz-border-radius: 0 180px 0 200px;"></div>


Код
<div style="background: url('http://zornet.ru/_fr/45/s5737396.jpg'); width: 448px; height: 250px; border: 1px solid #405C0A; border-radius: 0 180px 0 200px; -webkit-border-radius: 0 180px 0 200px; - moz-border-radius: 0 180px 0 200px;"></div>


И ТАК ДАЛЕЕ ... biggrin
МОЖНО СТИЛЯМИ КРУТИТЬ КАК ХОЧЕШЬ ...

С ПОМОЩЬЮ ДАННОЙ КАНИТЕЛИ
Код
-webkit-box-shadow: 0px 0px 18px 0px rgba(219, 123, 72, 0.79);
-moz-box-shadow:    0px 0px 18px 0px rgba(219, 123, 72, 0.79);
box-shadow:         0px 0px 18px 0px rgba(219, 123, 72, 0.79);
МОЖНО ЗАДАТЬ ТЕНЬ ВОКРУГ КАРТИНКИ...

НАПРИМЕР:



А КОМУ ЛЕНЬ САМОМУ ПРОПИСЫВАТЬ СТИЛИ И Т.Д. ТО ЭТА ССЫЛКА ВСЕМ ВАМ В ПОМОЩЬ...

РАД БЫЛ ПОМОЧЬ ... БЛАГОДАРНОСТИ ПРИНИМАЮ ТОЛЬКО В РЕПУ... )))

МИР, ТРУД, МАЙ, ИЮНЬ, ИЮЛЬ, АВГУСТ .... biggrin
ВСЕМ УДАЧИ В СОЗДАНИИ КРАСОТЫ НА САЙТАХ И МИРНОГО НЕБА НАД ГОЛОВОЙ !!!!


Сообщение отредактировал
workman - Суббота, 27 Июня 2015, 04:41
Страна: (RU)
workman
Суббота, 27 Июня 2015 | Сообщение 7
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Kosten,
Код
пробовал, что то не получилось.


КОГДА ТЫ МНЕ ТАКОЕ НАПИСАЛ, ТО СТАЛ ПЕРЕЖИВАТЬ И НЕ МОГ ЗАСНУТЬ ... ВСЕ ДУМАЛ, КАК ТАК У КОЛЛЕГИ НЕ ПОЛУЧИЛИСЬ МОИ КОДЫ ... ПСИХАНУЛ, ВСТАЛ И НАПИСАЛ ПОДРОБНЕЕ biggrin
Страна: (RU)
workman
Суббота, 27 Июня 2015 | Сообщение 8
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()

Правильно ли сделано, или как то можно по другому.

я тебе уже примеры накидал ... Можно немного углы по загибать больше а низ, например правый оставить острым а левый на 10-15 пиксов закруглить... Или вообще чуть-ли не круглыми сделать ....
Страна: (RU)
Kosten
Суббота, 27 Июня 2015 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
workman, просто в дивах пока нет смысла, пихать вид материала, можно стилями обойтись, что и сделал, под фото отличное решение.
Страна: (RU)
workman
Суббота, 27 Июня 2015 | Сообщение 10
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
под фото отличное решение.

ТАК ТАКИМ ОБРАЗОМ МОЖНО И ТАБЛИЦУ ЗАКРУГЛИТЬ И ВСЕ ЧТО УГОДНО,А ТО ЧТО В ДИВАХ, ПЕРЕВЕСТИ НА ФАЙЛ СО СТИЛЯМИ И УКАЗАТЬ КОДЫ... НАПРИМЕР ЕСЛИ НА ТАБЛИЦУ -
Код
<TABLE CLASS="свое">....</TABLE>


Сообщение отредактировал
workman - Суббота, 27 Июня 2015, 15:01
Страна: (RU)
Kosten
Суббота, 27 Июня 2015 | Сообщение 11
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
workman, вот вчера и просил чтоб подсказали, но как понимаю не до меня было. Что сайтом, как понял косяки все подобрал, почему не выводят в интернет его?
Страна: (RU)
workman
Суббота, 27 Июня 2015 | Сообщение 12
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
просто в дивах пока нет смысла, пихать вид материала, можно стилями обойтись

Тут я с тобой согласен. Так некоторые одними полными дивами нагружают сайт.Проще загнать в файл и ставить укороченным
Страна: (RU)
workman
Суббота, 27 Июня 2015 | Сообщение 13
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
Что сайтом, как понял косяки все подобрал, почему не выводят в интернет его?

Отписался, теперь жду когда запустят. Видимо сегодня у них выходной... biggrin
Страна: (RU)
Форум » Веб-разработка » Вопросы про uCoz » Закругление углов с помощью CSS на сайте
  • Страница 1 из 1
  • 1
Поиск: