Вопросы по CSS - [107] :: 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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Но оно ведь работает, ошибок не показывает.
	Всего записей: 3347 \| Зарегистр. 30-06-2002 \| Отправлено: 00:54 27-12-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

Но оно ведь работает, ошибок не показывает.

я не знаю что такое "оно". если вас устраивает - ок.

Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 01:02 27-12-2020

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

Silver Member

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

Я правильно понял, что в Foundation 6 теперь нет закругления в Progress Bar, как раньше, когда можно было дописать radius или round к progress? Поискал в инете и не нашёл ничего.

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

Mavrikii

Platinum Member

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

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

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Понятно. И несколько цветов (процентов) в одном баре/полосе тоже не сделать?
	Всего записей: 3347 \| Зарегистр. 30-06-2002 \| Отправлено: 21:08 30-01-2021

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

И несколько цветов (процентов) в одном баре/полосе тоже не сделать?

не знаю о чем вы, но смотрите css градиенты.

Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 22:10 30-01-2021

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

там, где Stacked

и в чем сложность? либо, как и сказал, делаем через градиентную заливку, либо внутри .meter размещаем разноцветные span с процентной шириной.

Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 22:28 30-01-2021

Silver Member

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

Mavrikii
Понятно, спасибо.

~~Но почему тогда внутри .progress они (span) не идут друг за другом, а ниже, друго под другом?~~
Хотя, получается, если сделать display - flex или -webkit-box. Но какой правильнее или лучше?

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 01:24 31-01-2021 | Исправлено: WONDROUS, 01:37 31-01-2021

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

Хотя, получается

способов много
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
и даже просто так - https://jsfiddle.net/pb21fzge/

Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 01:56 31-01-2021

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Ещё просьба подсказать по прогресс бару и тултип (balloon.css), можно ли сделать тултип для каждого meter, если их несколько будет в одном полосе?
	Всего записей: 3347 \| Зарегистр. 30-06-2002 \| Отправлено: 19:52 02-02-2021

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

можно ли сделать тултип для каждого meter

можно https://jsfiddle.net/hsL3a08f/

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

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

Silver Member

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

Просьба подсказать, насколько правильно было бы заменить этот код

Код:

@keyframes bar {
from {
background-position: 0 0;
}
to {
background-position: 1rem 0;
}
}

на этот?

Код:

@keyframes bar {
100% { background-position: 100% 0%; }
}

С первым работает нормально, если у прогресс бара один цвет, второй, если градиент. Но со вторым скорость увеличивается слишком.

Или как исправить данный косяк при анимации?

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 02:43 04-02-2021 | Исправлено: WONDROUS, 02:55 04-02-2021

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

насколько правильно было бы заменить этот код

неужели и единицы нужно объяснять?
https://learn.javascript.ru/css-units
https://w3schoolsrus.github.io/cssref/css_units.html#gsc.tab=0
1rem != 100%

Цитата:

Или как исправить данный косяк при анимации?

Код:

#stacks_in_355_page0 .progress-meter {
    background-image: linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent), linear-gradient(90deg, rgba(0, 140, 186, 1.00), rgba(105, 0, 165, 1.00));
    background-size: 2rem 2rem, 0 0;
    animation: stacks_in_355_page0bar 5s linear infinite;
    background-repeat: repeat, repeat-y;
}

@keyframes stacks_in_355_page0bar {
from {
background-position: 0 0, 0 0;
background-size: 2rem 2rem, 0 0;
}
to {
background-position: 100% 0, 0 0;
background-size: 2rem 2rem, 100% 100%;
}
}

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

Silver Member

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

Mavrikii
Спасибо за ответ, но это не то. Оставил пока без полоски без градиента.

Другой вопрос, можно ли простым путём сделать так, чтобы анимация прогресса срабатывала при появлении его на странице? С самой анимацией проблем нет, там всё понятно, а при появлении на странице нет.

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 00:23 05-02-2021

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

С самой анимацией проблем нет, там всё понятно, а при появлении на странице нет.

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

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Я использовал ранее плагин appear (вроде так называется), а сейчас просто немного не пойму, как к нему приделать анимацию прогресс бара.
	Всего записей: 3347 \| Зарегистр. 30-06-2002 \| Отправлено: 00:44 05-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