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

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в 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
Спасибо за ответы. Но ещё вопрос, обязательно ли надо все строки указывать или написать только те, которые будут влиять на просмотр на маленьких экранах?

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

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

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

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

Всего записей: 15040 | Зарегистр. 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);
    }
  }

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

Всего записей: 3346 | Зарегистр. 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/

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



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 23:43 28-01-2019 | Исправлено: WONDROUS, 00:57 29-01-2019
Mavrikii

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

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

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

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Я имел ввиду, что движение начинается слева, картинка доходит до правого края экрана, разворачивается горизонтально и движется снова налево. Потом, достигнув левого края, снова разворачивается в исходный вид и продолжает движение вправо. И так далее.

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

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

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



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

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
В той теме или нет, но подскажите, плиз, кто устанавливал на сайте подсветку кода Prism, как и где надо указывать название темы?

Всего записей: 3346 | Зарегистр. 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 подключите, та тема и будет

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



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

Всего записей: 3346 | Зарегистр. 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 файле - какой подключен при загрузке, тот и будет использоваться.

Всего записей: 15040 | Зарегистр. 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
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Теперь понятно, спасибо за ответы!

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Не понятно, почему-то некоторые сторонние темы не показывают номера строк, хоть они и прописаны в CSS темы (например, Duotone Dark).

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

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
сторонние темы не знают ничего о нумерации, это делает отдельный кусок css стиля
https://prismjs.com/plugins/line-numbers/

Всего записей: 15040 | Зарегистр. 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

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