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

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в 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

Цитата:

как к нему приделать анимацию прогресс бара.

к нему - никак. цепляется класс в котором прописана анимация в нужный момент.

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Я это и имел ввиду.
	Всего записей: 3346 \| Зарегистр. 30-06-2002 \| Отправлено: 01:26 05-02-2021

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

Я это и имел ввиду.

ну так сделайте, делов то.
https://creativelive.github.io/appear/

Цитата:

appear: function appear(el){
console.log('visible', el);
},

вот тут цепляете нужный класс.

ps: так как файла нет в CDN, то просто вставил в js код
https://jsfiddle.net/68qnkfrv/

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо за ответ с примером, правда, в примере ничего не происходит. В CDN вроде есть этот плагин, только версия другая.
	Всего записей: 3346 \| Зарегистр. 30-06-2002 \| Отправлено: 03:28 05-02-2021

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

правда, в примере ничего не происходит

как это не происходит? добавляется класс, который меняет текст и цвет фона.
или нужно еще явно анимацию лепить? можете самостоятельно описать ее в .animation

можно и просто с помощью jquery - https://jsfiddle.net/c29ws8kd/1/

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

WONDROUS

Silver Member

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

Просьба подсказать, как правильно добавить в эту строку delay?

Код:

animation: progressAnimation 2s linear 1 forwards;

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 19:57 08-02-2021

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS https://developer.mozilla.org/ru/docs/Web/CSS/animation-delay
	Всего записей: 15100 \| Зарегистр. 20-09-2014 \| Отправлено: 21:37 08-02-2021

WONDROUS

Silver Member

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

Mavrikii
Спасибо за ссылку. Я ту страницу читал ранее, но что-то пропустил, наверное.

Ещё просьба подсказать, как исправить такую вещь. Вопрос в том, что если не добавлять надпись справа в самом баре, то последний уровень закругляется как и задумано, а при добавлении надписи, последний уровень справа не закругляется.
Похоже div с надписью немного не там разместил.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 14:45 10-02-2021 | Исправлено: WONDROUS, 16:52 10-02-2021

WONDROUS

Silver Member

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

Большая просьба подсказать, есть ли в этом баре что-то из бутстрап или что не так с кодом анимации? Если бар один или два, то анимация в Сафари работает нормально, если их несколько, то анимация не работает, полоски не двигаются. В остальных браузерах (даже в старом Firefox) при любом количестве баров анимация работает нормально.

P.S. в общем, не знаю почему, но подглючивает в Сафари именно при использовании оформления на основе бутстрап.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 20:09 11-02-2021 | Исправлено: WONDROUS, 00:50 12-02-2021

WONDROUS

Silver Member

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

Подскажите, пожалуйста, как лучше сделать в данном примере так, чтобы на мобильных устройствах строка с info нормально смотрелась? При предпросмотре для мобильных есть переход на новую строку, но выглядит не очень. Если делать grid, например, то много места займёт, наверное.

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

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS Каждый круг и текст в отдельный display: inline-block, внутри отключить перенос white-space: nowrap;
	Всего записей: 15100 \| Зарегистр. 20-09-2014 \| Отправлено: 01:58 17-02-2021 \| Исправлено: Mavrikii, 01:59 17-02-2021

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Оба спана с кругом и текстом в див, и этому диву инлайн-блок?
	Всего записей: 3346 \| Зарегистр. 30-06-2002 \| Отправлено: 02:19 17-02-2021 \| Исправлено: WONDROUS, 02:19 17-02-2021

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

Оба спана с кругом и текстом в див, и этому диву инлайн-блок?

я что то иное написал?
будет то же самое, что есть, но при узком экране переноситься будет вместе, а не по отдельности.
но раз используется bootstrap, то можно и с его помощью.

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Да я понял, просто уточнил. Спасибо за ответ! Bootstrap не всегда используется.
	Всего записей: 3346 \| Зарегистр. 30-06-2002 \| Отправлено: 02:42 17-02-2021

K V M

Junior Member

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

Здравствуйте. Рисую сайт с использованием svg как background в css.
https://jsfiddle.net/6tfc9uky/
Если присмотреться, то части бекграунда разделяються линийми в 1 пиксель.
В SVG границ для фигур нету. все рисуеться одинм цветом. Пробовал убрать белый фон - без изменений.
Так понимаю что проблема в SVG (то ли в вьюпорте его) но не могу понять как решить.
Заранее спасибо.

Всего записей: 73 | Зарегистр. 14-10-2009 | Отправлено: 22:59 19-02-2021

Mavrikii

Platinum Member

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

K V M

Цитата:

Если присмотреться, то части бекграунда разделяються линийми в 1 пиксель.

где?

это может быть артефактом отрисовки браузера, если у вас включено увеличение в браузере.

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

K V M Junior Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Странно. Перепроверил. У меня воспроизводиться (firefox esr последний). Проверил на другом ПК на хроме также.
	Всего записей: 73 \| Зарегистр. 14-10-2009 \| Отправлено: 23:51 19-02-2021

Mavrikii

Platinum Member

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

K V M
у меня скриншот был из Хрома, в FF наблюдается, но я думаю это артефакт графического движка браузера.
в Хроме нечто аналогичное возникает при увеличении страницы.

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

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

K V M

Junior Member

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

Спасибо за помощь.
Походу проблема в маштабировании (хотя отображалось в 100% height и width).
Может кому-то будет нужно. Проблему решил диписав в SVG

Код:

preserveAspectRatio="none"

теперь рамок нету.

Всего записей: 73 | Зарегистр. 14-10-2009 | Отправлено: 01:17 20-02-2021

WONDROUS

Silver Member

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

Ох уж этот Сафари... Просьба подсказать, можно ли как-то сделать, немного переделать, чтобы Сафари понимал эти правила (две строки)? Оригинал здесь.

Код:

transition: calc(var(--t, 0) * var(--ripple-duration, 600ms)) var(--ripple-easing, linear);
transform: translate(-50%, -50%) scale(var(--s, 1));

В Chrome без проблем всё работает.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 23:58 22-02-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