Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[18.189.2.122] |
|
Сообщ.
#1
,
|
|
|
Здравствуйте!
Нашел статью о простом, но эффективном способе оформления страниц с помощью возможностей CSS. Сразу скажу, что тестировал в Google Chrome и Yandex браузере. Результат идентичен. Код страницы: <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 Кбайт, скачиваний: 482) Ожидалось: Прикреплённый файлawaiting.jpg (43,08 Кбайт, скачиваний: 869) А на деле Прикреплённый файлresult.jpg (37,19 Кбайт, скачиваний: 882) Ссылки не активны. Ни при наведении, ни при нажатии. Что не так? И что это за коды в последних строках CSS-файла? .shop:before { content: "\e626"; } - например Спасибо. |
Сообщ.
#2
,
|
|
|
а где обязательный href у ссылок?
Добавлено А по ссылке у тебя не CSS, а что-то между Stylus и Sass. Добавлено Не, это SCSS. Я просто вот это посмотрел и не понял с первого раза background $transition, color $transition, max-height $transition $transition $bounce; А там это часть transition, только за такое оформление кода - надо руки оторвать. |
Сообщ.
#3
,
|
|
|
Цитата Serafim @ а где обязательный href у ссылок? Честно говоря, только сейчас обратил внимание. Понятно, что ссылки никуда не должны вести. Это просто пример оформления. Цитата Serafim @ А по ссылке у тебя не CSS Не у меня. Это попытка разобрать пример из статьи. Цитата Serafim @ только за такое оформление кода - надо руки оторвать Ну или предложить корректное оформление и рабочий код. |
Сообщ.
#4
,
|
|
|
Цитата voidman @ Не у меня. Это попытка разобрать пример из статьи. У тебя. Это ты приаттачил SCSS под видом CSS. Цитата voidman @ Ну или предложить корректное оформление и рабочий код. Код вполне себе рабочий Прикреплённый файл123123.jpg (472,59 Кбайт, скачиваний: 810) Добавлено Может у тебя гулп или вебпак просто криво настроен и через жопу собирает его? Приаттачь лучше CSS, который после компиляции исходников выходит. Добавлено Цитата voidman @ Понятно, что ссылки никуда не должны вести. Тогда пишется href="#". Если его не указывать, то в некоторых браузерах ломается модель ссылок и отваливается курсор в том числе. Добавлено А на счёт оформления - вот так будет по-моему читаемее: $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"; } } |