|
Закругление углов с помощью CSS на сайте
|
|
Kosten |
Пятница, 26 Июня 2015, 23:43 | Сообщение 1 |
|
Тут скинул один материал где можно закруглить углы у вида материалов и вид будет совершенно другой. Как мы знаем за это отвечает в CSS border-radius: 10px; или просто назовем его радиус. Тут главное его поставить как понимаю грамотно, то можно так установить, что весь сайт закруглится. Нашел стили от этого скрипта и примерил radius и вот что получилось.
Правильно ли сделано, или как то можно по другому.
|
| [ RU ] |
|
|
workman |
Суббота, 27 Июня 2015, 00:03 | Сообщение 2 |
|
Kosten, Вот еще есть варианты скругления углов, например картинки... но можно подогнать именно у вида материалов
|
| [ RU ] |
|
|
Kosten |
Суббота, 27 Июня 2015, 00:06 | Сообщение 3 |
|
|
workman, пробовал, что то не получилось.
|
| [ RU ] |
|
|
Kosten |
Суббота, 27 Июня 2015, 00:25 | Сообщение 4 |
|
|
С дивами, получается также как с 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, 02:47 | Сообщение 5 |
|
|
Идей не дождался и прошлось, как там говорят, самому креативить и вот что получилось.
|
| [ RU ] |
|
|
workman |
Суббота, 27 Июня 2015, 04:13 | Сообщение 6 |
|
|
НУ КАК-ТО ТАК  :D ТЫ ЕСЛИ ЧТО СПРАШИВАЙ. КОМУ-КОМУ А ТЕБЕ ПОДСКАЖУ 
Код <div style="background: url('https://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('https://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>
И ТАК ДАЛЕЕ ...
МОЖНО СТИЛЯМИ КРУТИТЬ КАК ХОЧЕШЬ ...
С ПОМОЩЬЮ ДАННОЙ КАНИТЕЛИ Код -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);
НАПРИМЕР:
А КОМУ ЛЕНЬ САМОМУ ПРОПИСЫВАТЬ СТИЛИ И Т.Д. ТО ЭТА ССЫЛКА ВСЕМ ВАМ В ПОМОЩЬ...
РАД БЫЛ ПОМОЧЬ ... БЛАГОДАРНОСТИ ПРИНИМАЮ ТОЛЬКО В РЕПУ... )))
МИР, ТРУД, МАЙ, ИЮНЬ, ИЮЛЬ, АВГУСТ ....
ВСЕМ УДАЧИ В СОЗДАНИИ КРАСОТЫ НА САЙТАХ И МИРНОГО НЕБА НАД ГОЛОВОЙ !!!!
Сообщение отредактировал
workman - Суббота, 27 Июня 2015, 04:41 |
| [ RU ] |
|
|
workman |
Суббота, 27 Июня 2015, 04:28 | Сообщение 7 |
|
|
Kosten, Код пробовал, что то не получилось.
КОГДА ТЫ МНЕ ТАКОЕ НАПИСАЛ, ТО СТАЛ ПЕРЕЖИВАТЬ И НЕ МОГ ЗАСНУТЬ ... ВСЕ ДУМАЛ, КАК ТАК У КОЛЛЕГИ НЕ ПОЛУЧИЛИСЬ МОИ КОДЫ ... ПСИХАНУЛ, ВСТАЛ И НАПИСАЛ ПОДРОБНЕЕ
|
| [ RU ] |
|
|
workman |
Суббота, 27 Июня 2015, 10:54 | Сообщение 8 |
|
|
Цитата Kosten (  )
Правильно ли сделано, или как то можно по другому.
я тебе уже примеры накидал ... Можно немного углы по загибать больше а низ, например правый оставить острым а левый на 10-15 пиксов закруглить... Или вообще чуть-ли не круглыми сделать ....
|
| [ RU ] |
|
|
Kosten |
Суббота, 27 Июня 2015, 14:58 | Сообщение 9 |
|
|
workman, просто в дивах пока нет смысла, пихать вид материала, можно стилями обойтись, что и сделал, под фото отличное решение.
|
| [ RU ] |
|
|
workman |
Суббота, 27 Июня 2015, 14:59 | Сообщение 10 |
|
|
Цитата Kosten ( ) под фото отличное решение.
ТАК ТАКИМ ОБРАЗОМ МОЖНО И ТАБЛИЦУ ЗАКРУГЛИТЬ И ВСЕ ЧТО УГОДНО,А ТО ЧТО В ДИВАХ, ПЕРЕВЕСТИ НА ФАЙЛ СО СТИЛЯМИ И УКАЗАТЬ КОДЫ... НАПРИМЕР ЕСЛИ НА ТАБЛИЦУ - Код <TABLE CLASS="свое">....</TABLE>
Сообщение отредактировал
workman - Суббота, 27 Июня 2015, 15:01 |
| [ RU ] |
|
|
Kosten |
Суббота, 27 Июня 2015, 15:10 | Сообщение 11 |
|
|
workman, вот вчера и просил чтоб подсказали, но как понимаю не до меня было. Что сайтом, как понял косяки все подобрал, почему не выводят в интернет его?
|
| [ RU ] |
|
|
workman |
Суббота, 27 Июня 2015, 15:10 | Сообщение 12 |
|
|
Цитата Kosten ( ) просто в дивах пока нет смысла, пихать вид материала, можно стилями обойтись
Тут я с тобой согласен. Так некоторые одними полными дивами нагружают сайт.Проще загнать в файл и ставить укороченным
|
| [ RU ] |
|
|
workman |
Суббота, 27 Июня 2015, 15:11 | Сообщение 13 |
|
|
Цитата Kosten ( ) Что сайтом, как понял косяки все подобрал, почему не выводят в интернет его?
Отписался, теперь жду когда запустят. Видимо сегодня у них выходной...
|
| [ RU ] |
|
|
