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

WONDROUS

Silver Member

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

Mavrikii
Спасибо за ответы. Но ещё вопрос, обязательно ли надо все строки указывать или написать только те, которые будут влиять на просмотр на маленьких экранах?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 18:57 21-01-2019

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

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

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

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 19:33 21-01-2019

VVL99

Silver Member

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

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

----------
Гомосексуальность среди модераторов не является психическим расстройством, несмотря на синонимы этого понятия в русском языке.

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 21:56 23-01-2019 | Исправлено: VVL99, 16:40 24-01-2019

WONDROUS

Silver Member

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

Просьба подсказать, как сделать в CSS, чтобы картинка поворачивалась горизонтально после того, как достигнет бокового края браузера? Есть такой код:

Код:

-webkit-transform: scaleX(-1);
transform: scaleX(-1);

И такой, для самой анимации:

Код:

.anima img {
animation: go-left-right 10s infinite ease alternate;
-webkit-animation: go-left-right 10s infinite linear alternate;

position: relative;
}
@keyframes go-left-right {
from {
left: calc(0% - 50px);
}
to {
left: calc(100% - 50px);
}
}

И вопрос, как теперь сделать разворот картинки?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 17:40 28-01-2019 | Исправлено: WONDROUS, 17:40 28-01-2019

Mavrikii

Platinum Member

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

Код:

@keyframes go-left-right {
0% {
left: calc(0% - 50px);
transform: scaleX(1);
}
99% {
transform: scaleX(1);
}
100% {
left: calc(100% - 50px);
transform: scaleX(-1);
}
}

http://jsfiddle.net/f18rn2ah/

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 17:58 28-01-2019 | Исправлено: Mavrikii, 18:01 28-01-2019

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо за ответ, но почему-то не работает. Она вроде бы как делает разворот, но обратно движется задом (ссылка).
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 23:43 28-01-2019 \| Исправлено: WONDROUS, 00:57 29-01-2019

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

но не обратно движется задом

потому, что вы описываете только половину анимации. хотите, чтобы двигалась задом, то момент разворота это будет 50% анимации.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 00:45 29-01-2019

WONDROUS

Silver Member

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

Mavrikii
Я имел ввиду, что движение начинается слева, картинка доходит до правого края экрана, разворачивается горизонтально и движется снова налево. Потом, достигнув левого края, снова разворачивается в исходный вид и продолжает движение вправо. И так далее.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 01:19 29-01-2019

Mavrikii

Platinum Member

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

WONDROUS
я отлично понял что вы имели в виду. поясняю, раз непонятно было в первый раз.
вы указали в своей анимации только движение слева направо и, затем, анимация идет в обратном порядке (alternate). вот она и доходит до крайней правой точки, поворачивается, затем анимация проигрывается в обратном порядке.
вам нужно указать, что крайняя правая точка и поворот - 50% анимации, и описать оставшуюся до 100% анимацию как повернутое движение обратно.
ps: если это тоже просто набор букв, то http://jsfiddle.net/2r1u93s8/

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 01:22 29-01-2019 | Исправлено: Mavrikii, 02:32 29-01-2019

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору В той теме или нет, но подскажите, плиз, кто устанавливал на сайте подсветку кода Prism, как и где надо указывать название темы?
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 17:53 14-02-2019

VVL99

Silver Member

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

WONDROUS
http://falbar.ru/article/uluchshennaya-podsvetka-koda-ot-prism

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 18:12 14-02-2019

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

как и где надо указывать название темы?

какой css подключите, та тема и будет

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 18:14 14-02-2019

WONDROUS

Silver Member

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

Спасибо за ссылку! Получается, что в нём нет отдельных тем, как в том же Rainbow, и чтобы установить тему, надо скачать и подключить файлы js и css с необходимой темой?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 20:12 14-02-2019

VVL99

Silver Member

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

WONDROUS
https://prismjs.com/download.html?#themes=prism&languages=markup+css+clike+javascript+markup-templating+php&plugins=line-numbers

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 21:06 14-02-2019

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

что в нём нет отдельных тем

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

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:37 14-02-2019 | Исправлено: Mavrikii, 21:37 14-02-2019

VVL99

Silver Member

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

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

Добавлено:
WONDROUS
https://prismjs.com/test.html
Пиши код выбирай синтаксис и тему.

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 21:41 14-02-2019

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Теперь понятно, спасибо за ответы!
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 23:12 14-02-2019

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Не понятно, почему-то некоторые сторонние темы не показывают номера строк, хоть они и прописаны в CSS темы (например, Duotone Dark).
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 19:30 15-02-2019

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS сторонние темы не знают ничего о нумерации, это делает отдельный кусок css стиля https://prismjs.com/plugins/line-numbers/
	Всего записей: 15684 \| Зарегистр. 20-09-2014 \| Отправлено: 20:36 15-02-2019

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