Версия для печати
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум на Исходниках.RU > WWW Masters. Прочее > эксперименты с CSS


Автор: voidman 21.09.18, 09:57
Здравствуйте!

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

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

<{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}>
    <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 (, : 484)

Ожидалось:
awaiting.jpg (, : 872)

А на деле
result.jpg (, : 884)

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

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


Спасибо.

Автор: Serafim 28.10.18, 00:30
а где обязательный href у ссылок?

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

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


А там это часть transition, только за такое оформление кода - надо руки оторвать.

Автор: voidman 28.10.18, 17:38
Цитата Serafim @
а где обязательный href у ссылок?


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

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


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

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


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

Автор: Serafim 28.10.18, 22:30
Цитата voidman @
Не у меня. Это попытка разобрать пример из статьи.

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

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

Код вполне себе рабочий
123123.jpg (, : 814)

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

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

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

Добавлено
А на счёт оформления - вот так будет по-моему читаемее:
<{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}>
    $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";
        }
    }

Powered by Invision Power Board (https://www.invisionboard.com)
© Invision Power Services (https://www.invisionpower.com)