На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное DigiMania RSS
msm.ru
  
> эксперименты с CSS, Ожидание и реальность
    Здравствуйте!

    Нашел статью о простом, но эффективном способе оформления страниц с помощью возможностей CSS.
    Сразу скажу, что тестировал в Google Chrome и Yandex браузере. Результат идентичен.

    Код страницы:

    ExpandedWrap disabled
      <html>
        <head>
         <meta charset="utf-8">
         <title>CSS-Work Test</title>  
         <link rel="stylesheet" href="test.css">
         </head>
        <body>
          <main>
              <nav>
                  <a class="camera">Фото</a>
                  <a class="mail">Почта</a>
                  <a class="banknote">Деньги</a>
                  <a class="note">Новости</a>
                  <a class="phone">Девайсы</a>
                  <a class="settings">Настройки</a>
              </nav>
                  <section></section>
          </main>
        </body>
      </html>


    Файл test.css прикрепляю.
    Прикреплённый файлПрикреплённый файлtest.css (3,09 Кбайт, скачиваний: 17)

    Ожидалось:
    Прикреплённый файлПрикреплённый файлawaiting.jpg (43,08 Кбайт, скачиваний: 30)

    А на деле
    Прикреплённый файлПрикреплённый файлresult.jpg (37,19 Кбайт, скачиваний: 25)

    Ссылки не активны. Ни при наведении, ни при нажатии.

    Что не так? И что это за коды в последних строках CSS-файла?
    ExpandedWrap disabled
      .shop:before { content: "\e626"; } - например


    Спасибо.
    Сообщение отредактировано: voidman -
    Вот так вот, относительно просто, решаются задачи проекций с числовыми отметками
      а где обязательный href у ссылок?

      Добавлено
      А по ссылке у тебя не CSS, а что-то между Stylus и Sass.

      Добавлено
      Не, это SCSS. Я просто вот это посмотрел и не понял с первого раза
      ExpandedWrap disabled
        background $transition,
        color $transition,
        max-height $transition $transition $bounce;


      А там это часть transition, только за такое оформление кода - надо руки оторвать.
      user posted image
        Цитата Serafim @
        а где обязательный href у ссылок?


        Честно говоря, только сейчас обратил внимание. Понятно, что ссылки никуда не должны вести. Это просто пример оформления.

        Цитата Serafim @
        А по ссылке у тебя не CSS


        Не у меня. Это попытка разобрать пример из статьи.

        Цитата Serafim @
        только за такое оформление кода - надо руки оторвать


        Ну или предложить корректное оформление и рабочий код.
        Вот так вот, относительно просто, решаются задачи проекций с числовыми отметками
          Цитата voidman @
          Не у меня. Это попытка разобрать пример из статьи.

          У тебя. Это ты приаттачил SCSS под видом CSS.

          Цитата voidman @
          Ну или предложить корректное оформление и рабочий код.

          Код вполне себе рабочий
          Прикреплённый файлПрикреплённый файл123123.jpg (472,59 Кбайт, скачиваний: 10)

          Добавлено
          Может у тебя гулп или вебпак просто криво настроен и через жопу собирает его? :huh: Приаттачь лучше CSS, который после компиляции исходников выходит.

          Добавлено
          Цитата voidman @
          Понятно, что ссылки никуда не должны вести.

          Тогда пишется href="#". Если его не указывать, то в некоторых браузерах ломается модель ссылок и отваливается курсор в том числе.

          Добавлено
          А на счёт оформления - вот так будет по-моему читаемее:
          ExpandedWrap disabled
            $background: #696969;
            $transition: .35s;
            $bounce: cubic-bezier(.3, 1.1, .9, 1);
             
            html, body {
                height: 100%;
            }
             
            html {
                box-sizing: border-box;
            }
             
            body {
                font: 100%/1.4 Alegreya Sans;
                background:
                    linear-gradient(#3cb371, transparent),
                    linear-gradient(-90deg, #87ceeb, transparent),
                    linear-gradient(90deg, #ff7f50, transparent);
                background-blend-mode: screen;
                padding: 1rem;
             
                main {
                    display: flex;
                    width: 100%;
                    max-width: 60rem;
                    height: 100%;
                    overflow: hidden;
                    background: rgba(black, .1);
                    margin: 0 auto;
                    box-shadow: 0 1px rgba(black, .2);
                }
             
                nav {
                    display: flex;
                    font-size: 115%;
                    flex-direction: column;
                    width: 10rem;
                    overflow: hidden;
             
                    a {
                        position: relative;
                        align-items: center;
                        user-select: none;
                        cursor: pointer;
                        width: 100%;
                        line-height: 3rem;
                        max-height: 3rem;
                        padding: 0 1em;
                        overflow: hidden;
                        background: linear-gradient(90deg, rgba(#fff, .7) 90%, rgba(#fff, .6) 100%);
                        box-shadow: inset 0 -1px rgba(black, .1);
                        transform-origin: 0 0;
                        transition:
                            background $transition,
                            color $transition,
                            max-height $transition $transition $bounce;
             
                        &:before {
                            display: inline-block;
                            font: 130% lineicon;
                            vertical-align: middle;
                            padding-right: 1rem;
                        }
             
                        &:hover {
                            background: white;
                            box-shadow: inset 0 -1px transparent;
                            color: shade($background, 20%);
                            transition: 0s;
                        }
             
                        &:active {
                            color: $background;
                        }
                    }
             
                    &.single-tab a {
                        &.selected {
                            background: white;
                            color: black;
                        }
                        &:not(.selected) {
                            color: transparent;
                            max-height: 0;
                        }
                    }
                }
             
                section {
                    font-size: 150%;
                    line-height: 1.75;
                    color: tint($background, 70%);
                    box-shadow: 0 1px rgba(black, .2);
                    background: white;
                    flex: 1;
                    padding: 1rem;
                }
             
                *, *:before, *:after {
                    margin: 0;
                    padding: 0;
                    box-sizing: inherit;
                }
             
                @font-face {
                    font-family: lineicon;
                }
             
                .heart:before {
                    content: "\e601";
                }
             
                .star:before {
                    content: "\e602";
                }
             
                .tv:before {
                    content: "\e603";
                }
             
                .search:before {
                    content: "\e604";
                }
             
                .settings:before {
                    content: "\e60a";
                }
             
                .camera:before {
                    content: "\e60b";
                }
             
                .tag:before {
                    content: "\e60c";
                }
             
                .lock:before {
                    content: "\e60d";
                }
             
                .bulb:before {
                    content: "\e60e";
                }
             
                .pen:before {
                    content: "\e60f";
                }
             
                .diamond:before {
                    content: "\e610";
                }
             
                .display:before {
                    content: "\e611";
                }
             
                .location:before {
                    content: "\e612";
                }
             
                .stack:before {
                    content: "\e613";
                }
             
                .cup:before {
                    content: "\e614";
                }
             
                .phone:before {
                    content: "\e615";
                }
             
                .news:before {
                    content: "\e616";
                }
             
                .mail:before {
                    content: "\e617";
                }
             
                .like:before {
                    content: "\e618";
                }
             
                .photo:before {
                    content: "\e619";
                }
             
                .note:before {
                    content: "\e61a";
                }
             
                .clock:before {
                    content: "\e61b";
                }
             
                .paperplane:before {
                    content: "\e61c";
                }
             
                .params:before {
                    content: "\e61d";
                }
             
                .banknote:before {
                    content: "\e61e";
                }
             
                .data:before {
                    content: "\e61f";
                }
             
                .music:before {
                    content: "\e620";
                }
             
                .megaphone:before {
                    content: "\e621";
                }
             
                .study:before {
                    content: "\e622";
                }
             
                .food:before {
                    content: "\e623";
                }
             
                .t-shirt:before {
                    content: "\e624";
                }
             
                .clip:before {
                    content: "\e625";
                }
             
                .shop:before {
                    content: "\e626";
                }
             
                .vynil:before {
                    content: "\e627";
                }
             
                .truck:before {
                    content: "\e628";
                }
             
                .world:before {
                    content: "\e629";
                }
            }
          Сообщение отредактировано: Serafim -
          user posted image
          1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
          0 пользователей:


          Рейтинг@Mail.ru
          [ Script Execution time: 0,1096 ]   [ 19 queries used ]   [ Generated: 21.11.18, 09:58 GMT ]