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

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

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

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

Цитата:
 При редактировании на той странице всё работает, копируешь и применяешь в другом месте или программе, ничего не работает.
 

потому что там SASS, а не чистый CSS
переделайте в чистый CSS или скопируйте обработанный из исходника страницы результата.
https://ru.wikipedia.org/wiki/Sass

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:27 05-10-2018
WONDROUS



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

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 23:50 05-10-2018
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ещё вопрос появился. Есть стиль CSS, анимация выделяемого фоном текста, когда выделяется фон фрагмента текста. Как можно сделать, чтобы цвет текста до выделения был таким же, как и остальной, а при выделении он становился другим? Можно, конечно, сделать color: и так далее, но тогда он становится таким до и после выделения/анимации. Сам код:
 
 
Подробнее...

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 21:40 10-10-2018 | Исправлено: WONDROUS, 21:59 10-10-2018
Mavrikii

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

Цитата:
Сам код (нажать Редактировать):  

зачем прятать???
 

Цитата:
при выделении он становился другим


Код:
  100% {
    width: 100%;
  }

сюда добавляете желаемый цвет и после анимации он изменится

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:43 10-10-2018
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Чтобы места меньше занимало сообщение.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 21:55 10-10-2018 | Исправлено: WONDROUS, 22:44 10-10-2018
Mavrikii

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

Цитата:
Чтобы места меньше занимало сообщение.

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

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:58 10-10-2018
WONDROUS



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

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 22:44 10-10-2018
Mavrikii

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

Цитата:
Добавил, не работает, цвет тот же, что и до выделения.

ок, глянул лучше. у вас анимируется ширина псевдоэлемента, который идет отдельно от текста и, конечно же, не меняет цвет текста.
http://jsfiddle.net/2h1w9dfe/

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:52 10-10-2018
WONDROUS



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

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 01:20 11-10-2018 | Исправлено: WONDROUS, 01:37 11-10-2018
Mavrikii

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

Цитата:
Это как-то можно исправить?

нет, подобная анимация не может распространяться на многострочные элементы.
можно поиграться с фоновыми изображением, там что то может получиться
 
ps: к примеру так - http://jsfiddle.net/2h1w9dfe/1/

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 01:52 11-10-2018 | Исправлено: Mavrikii, 02:05 11-10-2018
WONDROUS



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

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 14:01 11-10-2018
WONDROUS



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

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 01:27 12-10-2018 | Исправлено: WONDROUS, 01:35 12-10-2018
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
это не делается на css. цепляется обработчик на событие прокрутки и вычисляются координаты элемента - попадает в видимую область или нет.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 06:41 12-10-2018
b7music



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Ребят, подскажите, пытаюсь сделать задержку при появлении меню, прописываю в  
 
.menu_top_block.catalog_block .dropdown>li.full>.dropdown, .menu_top_block.catalogfirst li.full>.dropdown  
 

Код:
 
  transition: all 0.5s ease 0.5s;
  -webkit-transition: all 0.5s ease 0.5s;
  -moz-transition: all 0.5s ease 0.5s;
  -o-transition: all 0.5s ease 0.5s;
 
 

но не работает.  
вот страничка https://nbs22.ru/catalog/?q=
сделать пытаюсь левое меню. Подскажите, где ошибся.

Всего записей: 684 | Зарегистр. 04-03-2010 | Отправлено: 07:31 12-10-2018
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
b7music
у вас там мешанина, из слишком многих мест применяются/перекрываются классы.
анимация не может применяться к изменению display, поэтому и visibility тут не к месту.
можно анимировать прозрачность, но перед началом должен быть влключен display и выставлена прозрачность, прозрачность и анимируется.  сейчас переход нет никакого вообще, хоть вы и описали его свойства.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 07:51 12-10-2018 | Исправлено: Mavrikii, 07:51 12-10-2018
b7music



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Mavrikii
Что мне нужно сделать?  

Код:
.menu_top_block li.full:not(.v_bottom):hover>.dropdown {
    display: block;
}

Этот код отвечает

Всего записей: 684 | Зарегистр. 04-03-2010 | Отправлено: 08:39 12-10-2018
Mavrikii

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

Цитата:
Этот код отвечает

если бы, у вас во многих местах выставляется куча всего для .dropdown
и visibility, и display, и opacity
более того, код использует js для выставления координат для .dropdown по наведению мышки в меню.
почему тогда не использовать анимацию от jquery, которая все сделает за вас?
либо в том же js коде, когда считаются координаты .dropdown, выставить ему display: block, opacity: 0
и по :hover менять opacity: 1 - это проанимируется

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 08:49 12-10-2018 | Исправлено: Mavrikii, 08:51 12-10-2018
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, как здесь надписи (label) сделать в таком же порядке и с таким же отступом друг от друга, но чтобы они располагались справа (то есть текст/заголовок слева, этикетки справа).

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 20:56 14-10-2018 | Исправлено: WONDROUS, 20:58 14-10-2018
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
float: right;
потом, после вывода всего, делаем clear: both, чтобы не плыло - http://jsfiddle.net/9rwso8hg/
ну или современным способом через flexbox (IE10 и выше)

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:29 14-10-2018 | Исправлено: Mavrikii, 21:53 14-10-2018
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ и совет! Правда, float: right я сразу попробовал, но надписи поменялись местами. Flex тоже пробовал. Как-то не понятно, в примере всё нормально показывается, делаю то же самое в программе, меняются местами почему-то.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 23:01 14-10-2018
Открыть новую тему     Написать ответ в эту тему

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

Компьютерный форум 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