Добро пожаловать на Pro Pawn - Портал о PAWN-скриптинге.
Показано с 1 по 5 из 5
  1. #1
    Аватар для - John.Besson
    Пользователь

    Статус
    Оффлайн
    Регистрация
    10.12.2013
    Адрес
    Украина, Киев
    Сообщений
    20
    Репутация:
    4 ±

    Навигация с закруглёнными краями на CSS3

    Навигация с закруглёнными краями, без использования изображений. Всё на чистом CSS.

    Всё очень просто и понятно. Структура навигации:

    Код:
    <div class="nav-container">
       <nav>
          <ul>
             <li><a href="#">Главная</a></li>
             <li><a href="#">Форум</a></li>
             <li><a href="#">Блог</a></li>
             <li><a href="#">О нас</a></li>
             <li><a href="#">Контакты</a></li>
          </ul>
          
          <div class="nav-left"></div>
          <div class="nav-right"></div>
       </nav>
    </div>

    CSS:

    Код:
    .nav-container { 
       margin-bottom: 2em; 
       width: 100%;
       margin-right: -2em;
       margin-top: 1em;
    }
    
    nav {
       -moz-box-sizing: border-box; 
       -webkit-box-sizing: border-box; 
       box-sizing: border-box;
       
       padding: .5em 3em;
       margin-left: -14px;
       margin-right: -14px;
        
       background-color: #2a7b99;
       background-image: -moz-linear-gradient(top,  #389abe 0%, #2a7b99 100%); /* FF3.6+ */
       background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#389abe), color-stop(100%,#2a7b99)); /* Chrome,Safari4+ */
       background-image: -webkit-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* Chrome10+,Safari5.1+ */
       background-image: -o-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* Opera 11.10+ */
       background-image: -ms-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* IE10+ */
       background-image: linear-gradient(to bottom,  #389abe 0%,#2a7b99 100%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389abe', endColorstr='#2a7b99',GradientType=0 ); /* IE6-9 */
        
       position: relative;
       
       border-top-left-radius: 1em 0.5em;
       border-top-right-radius: 1em 0.5em;
        
       -moz-border-radius-topleft: 1em 0.5em; /* FF4.0 */
       -webkit-border-top-left-radius: 1em 0.5em; /* Chrome4.0, Safari5.0, iOS */
       -moz-border-radius-topright: 1em 0.5em; /* FF4.0 */
       -webkit-border-top-right-radius: 1em 0.5em; /* Chrome4.0, Safari5.0, iOS */
    }
    
    .nav-left {
       position: absolute;
       left: 0;
       bottom: -14px;
       width: 14px;
       height: 14px;
       background: #2a7b99;
       border-bottom-left-radius: 100% 50%;
        
       -moz-border-radius-bottomleft: 100% 50%; /* FF4.0 */
       -webkit-border-bottom-left-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
    }
    
    .nav-left:after {
       content: '';
       position: absolute;
       right: 0;
       width: 66%;
       height: 66%;
       background: #000;
       border-top-left-radius: 100% 50%;
       border-bottom-left-radius: 100% 50%;
        
       -moz-border-radius-topleft: 100% 50%; /* FF4.0 */
       -webkit-border-top-left-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
       -moz-border-radius-bottomleft: 100% 50%; /* FF4.0 */
       -webkit-border-bottom-left-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
    }
    
    .nav-right {
       position: absolute;
       right: 0;
       bottom: -14px;
       width: 14px;
       height: 14px;
       background: #2a7b99;
       border-bottom-right-radius: 100% 50%;
        
       -moz-border-radius-bottomright: 100% 50%; /* FF4.0 */
       -webkit-border-bottom-right-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
    }
    
    .nav-right:after {
       content: '';
       position: absolute;
       left: 0;
       width: 66%;
       height: 66%;
       background: #000;
       border-top-right-radius: 100% 50%;
       border-bottom-right-radius: 100% 50%;
        
       -moz-border-radius-topright: 100% 50%; /* FF4.0 */
       -webkit-border-top-right-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
       -moz-border-radius-bottomright: 100% 50%; /* FF4.0 */
       -webkit-border-bottom-right-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
    }
    
    nav li {
       display: inline;
       list-style: none;
       border-right: 1px dashed #999;
    }
    nav li:last-of-type {
       border-right: 0;
    }
    
    nav li a {
       text-decoration: none;
       font-size: 1.2em;
       color: #2c2e24;
       font-weight: bold;
       display: inline-block;
       text-align: center;
       padding: .5em;
    }
    
    nav li a:hover,
    nav li a.selected {
       color: #fff;
    }

    Для полной красоты имеет смысл сделать навигацию выходящую за границы форума, для этого находим:

    Код:
    nav {
       -moz-box-sizing: border-box; 
       -webkit-box-sizing: border-box; 
       box-sizing: border-box;
       
       padding: .5em 3em;
       margin-left: -14px;
       margin-right: -14px;
    
    ...

    -14px - выставляем до получения оптимального отображения.
    Последний раз редактировалось - John.Besson; 12.12.2013 в 21:08.

  2. Пользователь сказал cпасибо:
    Tony_Stark (12.12.2013)
  3. #2
    Аватар для Tony_Stark
    Пользователь

    Статус
    Оффлайн
    Регистрация
    16.11.2013
    Сообщений
    77
    Репутация:
    10 ±
    неплохо, кто автор? +сик

  4. #3
    Аватар для - John.Besson
    Пользователь

    Статус
    Оффлайн
    Регистрация
    10.12.2013
    Адрес
    Украина, Киев
    Сообщений
    20
    Репутация:
    4 ±
    Цитата Сообщение от Tony_Stark Посмотреть сообщение
    неплохо, кто автор? +сик
    Автора точно не знаю, но брал с cabinetadmina.ru (не реклама)

  5. #4
    Аватар для MrBurn
    Пользователь

    Статус
    Оффлайн
    Регистрация
    12.05.2014
    Сообщений
    37
    Репутация:
    3 ±
    Вопрос такой, как сместить всё с левого края в право.

  6. #5
    Аватар для Wesley
    Пользователь

    Статус
    Оффлайн
    Регистрация
    02.11.2013
    Сообщений
    90
    Репутация:
    14 ±
    Понравилось.

 

 

Информация о теме

Пользователи, просматривающие эту тему

Эту тему просматривают: 1 (пользователей: 0 , гостей: 1)

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •