• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Горизонтальное меню в круглой форме на CSS
Горизонтальное меню в круглой форме на CSS
Kosten
Понедельник, 14 Августа 2017 | Сообщение 1
Онлайн
Администраторы
Сообщений:44267
Награды: 70
Вашему вниманию круглое меню, которое идет горизонтальным, где каждый раздел идет круглый. Сама навигация создана на CSS стилях, где использован "border-radius", что отвечает за окружность. Если меньше сделать, то будет квадратные категорий с закруглением углов. Здесь все настраивается в самих стилях, что идет под код. Вы можете выставить как форму, что ранее говорилось, но и безусловно гамму цвета, что можно сделать эффект при наведение.



Здесь видим, что идет под синий оттенок:



Это уже созданный под красную гамму:



Здесь эффект при наведение:



Приступаем к установке:

Скачиваем текстовый файл, там будет предоставлен код, что ставим туда где посчитаете нужным. И стили в CSS где идет основная настройка, как по формированию и выбора цвета.
Прикрепления: 0775339.jpg (54.8 Kb) · 5410762.png (7.9 Kb) · 2861509.png (8.0 Kb) · 3377396.png (10.3 Kb) · __.txt (1.3 Kb)
Страна: (RU)
Kosten
Понедельник, 14 Августа 2017 | Сообщение 2
Онлайн
Администраторы
Сообщений:44267
Награды: 70
Так как ранее на файлах размещал этот материал и здесь сделана демонстрация для просмотра.
Страна: (RU)
Critic©
Понедельник, 14 Августа 2017 | Сообщение 3
Оффлайн
Проверенные
Сообщений:16
Награды: 0
Для чего дублировать файлы если уже есть?
Страна: (RU)
Kosten
Понедельник, 14 Августа 2017 | Сообщение 4
Онлайн
Администраторы
Сообщений:44267
Награды: 70
Цитата Critic© ()
Для чего дублировать файлы если уже есть?

Во первых, только коды дублируются, что даже с начало на форуме размещал под разными ссылками. Но подготовил материал, все описал на текстовом документе и опять забыл проверить есть на сайте он, но оказалось, что ранее заливал, что здесь разместил. Но здесь есть материал, что на главных файлов нет.
Страна: (RU)
VIP36RUS
Понедельник, 14 Августа 2017 | Сообщение 5
Оффлайн
Проверенные
Сообщений:217
Награды: 4
Можно по всякому крутить их

Прикрепления: 0699460.png (9.7 Kb) · 5638464.png (3.9 Kb)


IPSGuru.RU - Сообщество веб администраторов
Kinoguru.Online - Онлайн фильмы
Любая тема на uCoz не интересует!
Страна: (RU)
Kosten
Понедельник, 14 Августа 2017 | Сообщение 6
Онлайн
Администраторы
Сообщений:44267
Награды: 70
VIP36RUS, нужно было сразу скинуть стили. 09a
Страна: (RU)
VIP36RUS
Вторник, 15 Августа 2017 | Сообщение 7
Оффлайн
Проверенные
Сообщений:217
Награды: 4
Цитата Kosten ()
VIP36RUS, нужно было сразу скинуть стили. 09a

Там особо не чего не изменилось просто где
Код
.circlemenu li a{
  display:block;
  float:left;
  text-align:center;
  text-decoration: none;
  color: white;
  background:#b72d23;
  margin: 0;
  margin-right:5px; /*Поле справа для каждой ссылки */
  width:100px;
  height:100px;
  border-radius: 400px; /*Большое значение для создания круглой рамки элемента*/
  -moz-border-radius: 400px;
  -webkit-border-radius: 400px;
}


Изменяем
Код
border-radius: 400px;

На
Код
border-radius: 15px 0px 15px 0px;


P.S - к чему 400px ставили? Когда 50px округляет полностью.


IPSGuru.RU - Сообщество веб администраторов
Kinoguru.Online - Онлайн фильмы
Любая тема на uCoz не интересует!
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Горизонтальное меню в круглой форме на CSS
  • Страница 1 из 1
  • 1
Поиск: