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

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в 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
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Valivan77777

Цитата:
Можно ли удалить определённое слово из текста?

CSS не манипулирует содержимым. если слово обернуто в какой от тег - можно спрятать.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 21:27 31-05-2022
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Кто может подсказать, если делать анимированный заголовок (хидер), чтобы каждой букве задать параметр появления (через тот же AOS), то каждую букву надо прописывать через span? Это, скорее всего, не вопрос по CSS, но не знал, где спросить.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 21:02 11-06-2022 | Исправлено: WONDROUS, 23:58 11-06-2022
Mavrikii

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

Цитата:
то кажду букву надо прописывать через span?

да, но можно не вручную, а с помощью js

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 23:14 11-06-2022
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Я правильно понимаю, что анимация AOS работает только с div, а со span нет? То есть тот же aos="fade" должен быть только внутри div?
 
Сразу извиняюсь, если снова не той теме спрашиваю.

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

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

Цитата:
То есть тот же aos="fade" должен быть только внутри div?

fade это изменение прозрачности, не должно влиять. Вот там, где изменение размеров, может.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 19:20 13-06-2022
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 19:42 13-06-2022
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать на своих установок для анимации AOS. Хотел сделать эффект scale(0.8) -> scale(1.5) -> scale(1), но как это сделать?

Код:
[data-aos=scale] {
    opacity: 0;
    transform:scale(1.5);
}
[data-aos=scale].aos-animate {
    opacity: 1;
    transform: scale(1);
    transition-property: opacity, transform;
}

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

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

Цитата:
Хотел сделать эффект scale(0.8) -> scale(1.5) -> scale(1), но как это сделать?

внятнее? последовательно анимации к одному элементу?

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 21:17 02-07-2022
WONDROUS



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

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

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
ну, так создайте одну анимацию, где 33% на один scale, следующие 33 на другой, последние 34 на третий.
https://css-tricks.com/using-multi-step-animations-transitions/

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 22:29 02-07-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
 
Сайт предусматривает закачку файла без перезагрузки страницы, и для этого есть такой код:
 
                <input class="site_load_file" style="display: none;" accept="image/*" name="loadfile" type="file" />
                <span class="ui_preloader ">
                <span class="ui_preloader__dot"></span>
                <span class="ui_preloader__dot"></span>
                <span class="ui_preloader__dot"></span>
                </span>
              </div>
 
Не могу понять смысл и функции четырех span, тем более, что относящиеся к ним классы отсутствуют в файлах CSS и  JS.
 
Это какая-то специфика закачки?
 
 
 
 
 
 

Всего записей: 340 | Зарегистр. 07-09-2016 | Отправлено: 17:01 20-07-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn
CSS не влияет на закачку никак, только на визуальное представление.
наверняка это просто был какой то индикатор активности - бегающие точки или что то еще.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 19:18 20-07-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
 
Есть в коде вот такая строка:
                 <div class="avatar__bg" style="width: 32px; height:32px;  color: #b4581c; background-color: #fbf8bb;"><span class="text-uppercase text-center font-weight-bold">VV</span></div>
 
Я не могу понять необходимости нагромождения class, style и span. В этом может быть какой-то скрытый смысл? Какой-то механизм подключения функционала? В JS я ни одного из этих классов не вижу.
 
Почему нельзя написать
 
<div class="a1" >
<p class="a2">VV</p>
</div>
 
И в этих класса а1 и а2 отразить все требования к воспроизведению VV ?
 
 
 

Всего записей: 340 | Зарегистр. 07-09-2016 | Отправлено: 13:05 22-07-2022 | Исправлено: Vladsvn, 15:40 22-07-2022
Mavrikii

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

Цитата:
И в этих класса а1 и а2 отразить все требования к воспроизведению VV

В идеале так и должно быть. Но не. Всегда удобно создавать кучу похожих классов, лишь немного отличающихся один от другого.
 

Цитата:
В JS я ни одного из этих классов не вижу.

Они могут и вообще там не использоваться. F12, выбрать элемент - покажет откуда и какие стили применяются.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 16:19 22-07-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Гугл предостерегает от использования составных классов, да и я этого не люблю, но, конечно же, не стоит доводить дело до абсурда. Но когда я вижу идущие подряд 5 классов, из которых одного вообще нет в CSS файле, то не знаю, чего и думать...  
 
Добавлено:
Не могу я понять профессиональную запись CSS...
 
Вот такой код:
.vote--sum-negative .vote__value {
    background-color: #fff1f1;
    color: #e52e3a;
}
 
Но в файле CSS отсутствует отдельно .vote__value, а в коде страницы нет комбинации vote--sum-negative .vote__value, зато есть  
<div id="comment_rating_2465" class="vote__value">0</div>
 
Вот как это работает?

Всего записей: 340 | Зарегистр. 07-09-2016 | Отправлено: 17:38 22-07-2022
Mavrikii

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

Цитата:
.vote--sum-negative .vote__value

откройте любые основы по CSS.
это работает для любого потомка с классом vote__value у родителя которого есть класс vote--sum-negative
 
https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Selectors
https://itchief.ru/html-and-css/selectors
https://web.dev/i18n/ru/learn/css/selectors/
https://frontender.info/basic-css-selectors-explained-with-cats/
 

Цитата:
Но когда я вижу идущие подряд 5 классов, из которых одного вообще нет в CSS файле

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

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 21:16 22-07-2022 | Исправлено: Mavrikii, 21:40 22-07-2022
Vladsvn

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

Цитата:
это работает для любого потомка с классом vote__value у родителя которого есть класс vote--sum-negative
Это я понимаю, но в коде страницы вообще нет класса vote--sum-negative. То есть, нет родителя то!
 
 
А вот здесь  
<div id="comment_rating_2465" class="vote__value">0</div>
используется класс "vote__value", но сам этот класс в файле CSS отсутствует.
По моим понятиям, в этом диве стили вообще не заданы.
 
А с учетом того, что и родитель отсутствует, само это выражение бесполезно.

Цитата:
.vote--sum-negative .vote__value {
    background-color: #fff1f1;
    color: #e52e3a;
}

 
 Разве не так?

Всего записей: 340 | Зарегистр. 07-09-2016 | Отправлено: 21:51 22-07-2022
Mavrikii

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

Цитата:
То есть, нет родителя то!

js может создать его в процессе голосования.

Цитата:
 Разве не так?

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

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 21:57 22-07-2022 | Исправлено: Mavrikii, 22:10 22-07-2022
Vladsvn

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

Всего записей: 340 | Зарегистр. 07-09-2016 | Отправлено: 22:03 22-07-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Все ж таки никак понять не могу...
 
Вот такая строка:
 
.modal-open .modal-dialog, .modal-openReg .modal-dialog, .modal-openRest .modal-dialog, .modal-openComp .modal-dialog { }
 
Из всего этого в коде присутствует только дочерний элемент modal-dialog. Ни одного материнского элемента в коде страницы нет (и для простоты будем считать, что в процессе работы он создаться не может).
 
Если я верно понимаю, вся эта запись эквивалентна  
 
.modal-dialog { }
 
Так?
 
 
 
 
 

Всего записей: 340 | Зарегистр. 07-09-2016 | Отправлено: 14:32 23-07-2022
Открыть новую тему     Написать ответ в эту тему

Страницы: 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