Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

Открыть новую тему     Написать ответ в эту тему

Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ссылки для самостоятельного изучения:
 
Теория + примеры + учебники:
W3School: CSS Tutorial
MDN: Cascading Style Sheets (CSS)
WebReference: Уроки по HTML и CSS
htmlbook: Справочник CSS
YouTube: Основы CSS/CSS3
CSS для JavaScript-разработчика
Основы CSS - каскадные таблицы стилей
Статьи по основам CSS
 
Применение на практике:
StackOverflow: 'CSS' Questions
CSS-Tricks
 

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Просьба подсказать, можно ли как-то сделать

переписать в ES5
я же давал ссылку, там упоминалась такая вещь как transpiler - переводит код в версию предыдущего поколения.
https://babeljs.io/
https://es6console.com/
и представленный код это TypeScript
прямой перевод в ES5

Код:
[].map.call(document.querySelectorAll('[anim="ripple"]'), function (el) {
    el.addEventListener('click', function (e) {
        e = e.touches ? e.touches[0] : e;
        var r = el.getBoundingClientRect(), d = Math.sqrt(Math.pow(r.width, 2) + Math.pow(r.height, 2)) * 2;
        el.style.cssText = "--s: 0; --o: 1;";
        el.offsetTop;
        el.style.cssText = "--t: 1; --o: 0; --d: " + d + "; --x:" + (e.clientX - r.left) + "; --y:" + (e.clientY - r.top) + ";";
    });
});
 

Правда el.offsetTop отдельно не имеет смысла, ну и CSS там не в чистом виде, а SASS
--s: 0 - это определение переменной

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 00:28 23-02-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за подробный ответ!
 
На счёт SASS, переделываю в CSS (View Compiled CSS), потом добавляю в CSS.
 
Ошибка:
 

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 01:41 23-02-2021 | Исправлено: WONDROUS, 02:18 23-02-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
интересно, вы когда нибудь научитесь самостоятельно находить информацию?
https://developer.mozilla.org/ru/docs/Web/CSS/Using_CSS_custom_properties

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 02:21 23-02-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Прочитал, но всё равно не соображу, что и где менять, если надо.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 15:22 23-02-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
но всё равно не соображу, что и где менять, если надо.

нигде, если браузер не поддерживает, значит не поддерживает - версии браузеров в конце текста.
 
только переписывать в отдельные классы с нужными значениями параметров и применять их целиком.
или через cssText выставлять именно параметры, а не переменные.

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 22:02 23-02-2021 | Исправлено: Mavrikii, 22:09 23-02-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Насколько правильным было бы кроме CSS:

Код:
@font-face {
      font-family: FontName;
      src: url("../font.ttf");
}

прописать это же в html внутри style?

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 23:59 28-02-2021 | Исправлено: WONDROUS, 00:48 01-03-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
прописать это же в html внутри style?

смысл? без разницы, файл должен подгрузиться один раз, но можно проверить, есть ли проблемы с кэшированием (закладка сетевой активности панели разработчика браузера)

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 01:17 01-03-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Если в Network - Font, то даже после обновления страницы шрифта нет в списке.
 
Когда текст просто на странице, то шрифт применяется нормально, если внутри columns, то он не работает и ставится указанный fallback font. А если @font-face прописать внутри style в html, то всё работает и ошибок вроде никаких не показывает.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 01:42 01-03-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
если внутри columns, то он не работает и ставится указанный fallback font.

не телепат, зависит от того, куда и как прописывается шрифт. и переписывается ли в каком то месте. скорее всего именно последнее. как и могут быть пути неправильными - без проблемной ссылки это все гадание на кофейной гуще.

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 01:53 01-03-2021 | Исправлено: Mavrikii, 02:06 01-03-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Насколько я понял, косяк при наличие элемента слева (что крутится), если убрать, то показывается задуманный шрифт. Вот только не пойму, почему так. Пример.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 02:13 01-03-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
почему так

"так" - как? если уж спрашиваете, то задавайте вопрос более открыто, с детализацией.
чтобы точно знать куда смотреть, что отображается не так, как должно.

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 02:48 01-03-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
В том смысле, что должен быть фигурный шрифт, а при наличие крутящейся фигни в левой колонке он не подгружается. Хотя слева ничего такого нет, кроме анимации на CSS.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 02:51 01-03-2021 | Исправлено: WONDROUS, 02:52 01-03-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
В том смысле, что должен быть фигурный шрифт

какой именно? Ubuntu шрифт подгружается.
Если речь о Dokdo, то он используется?
Или речь о "hallo"?
Не используйте ttf шрифт, используйте woff или woff2
Он то назначен и не переопределяется.
Но для ttf его нужно явно указывать как
src: url('fonts/fancyfont.ttf') format('truetype');
и, кстати, раз уж определили как 'hallo', то напишите так же, с кавычками.

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 03:03 01-03-2021 | Исправлено: Mavrikii, 03:05 01-03-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Да, кавычки не указал, спасибо. Но там без разницы, какой формат использовать, так как без анимации работает.
Вопрос в другом всё же, можно ли @font-face добавить в style в html, как здесь?

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 03:16 01-03-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
так как без анимации работает.

проблема в ваших руках

Цитата:
@keyframes stacks_in_364_page0spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(-360deg);
    }
}
}

здесь лишняя закрывающая фигурная скобка, а так как после этого куска идет загрузка шрифта, то он не срабатывает.

Цитата:
Да, кавычки не указал, спасибо

это, на самом деле, не критично.
 

Цитата:
@font-face добавить в style в html

можно, везде где можно прописать CSS (только не атрибуте style)

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 03:19 01-03-2021 | Исправлено: Mavrikii, 03:20 01-03-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Одна лишняя фигурная скобка давала такой глюк? Хм, убрал, нужный шрифт показывается.
Спасибо!

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 03:28 01-03-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать по overflow. Можно ли как-то сделать, кроме как увеличить padding сверху, чтобы в данном примере показывались тултипы? Проблема в том, что у .slider overflow: hidden и если сделать его видимым, то вся лента картинок будет видна.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 11:10 10-03-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Можно ли как-то сделать, кроме как увеличить padding сверху, чтобы в данном примере показывались тултипы?

нет, либо margin-top.

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 19:12 10-03-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Понятно, спасибо.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 20:50 10-03-2021
b7music



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Большое спасибо!

Всего записей: 673 | Зарегистр. 04-03-2010 | Отправлено: 10:43 23-03-2021 | Исправлено: b7music, 07:49 24-03-2021
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru