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

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

Цитата:
то нормально показываются, а маленькие нет

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

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 20:57 13-03-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Элегантно или нет, но я пробовал не один раз, то ли не так делал или что, но с inherit не работает.
 
Тень сделал по центру и для маленьких картинок, и для больших.

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

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

Цитата:
Тень сделал по центру и для маленьких картинок, и для больших

а я говорю, что она не по центру.
 
смотрим на div.img2
 
 

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Страницу на сервере я не обновлял.
 
А в том примере ещё и задание фиксированного размера не подходит.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 21:10 13-03-2019
Mavrikii

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

Цитата:
Страницу на сервере я не обновлял

от нас что тогда хотите??

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:11 13-03-2019
WONDROUS



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

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 22:00 13-03-2019 | Исправлено: WONDROUS, 22:01 13-03-2019
Mavrikii

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

Цитата:
Я же и написал, что сделал.

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

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



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

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 22:34 13-03-2019
Mavrikii

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

Цитата:
Страницу на сервере я не обновлял.  


Цитата:
от нас что тогда хотите??


Цитата:
Так ссылка та же.

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

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:44 13-03-2019 | Исправлено: Mavrikii, 22:45 13-03-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
То, что по ссылке ранее, тень есть везде, на разных экранах и устройствах.
 
А там, где тени нет, или в разные стороны тень уходит, то ширина окна та же самая, может, только немного занимает сайдбар в некоторых темах. Всё это просматривалось на компьютере. Не знаю, но это, наверное, особенности тем оформления, так как разработчики закладывают в них свой код.
 
P.S. и ещё раз напишу, в примере по Вашей ссылке есть фиксированные размеры, что не подходит.
 
Добавлено:
Мне ещё не понятно, на старых браузерах, мобильных (Сафари 7 или Хром 47), не работает анимация вращения картинок, это нормально? Приписал к коду -webkit-, не работает всё равно. Ссылка.

Код:
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 5000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 23:46 13-03-2019 | Исправлено: WONDROUS, 23:47 13-03-2019
Mavrikii

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

Цитата:
и ещё раз напишу, в примере по Вашей ссылке есть фиксированные размеры, что не подходит

я же давал вам подсказки.
https://codepen.io/anon/pen/BbJPpY
 

Цитата:
не работает анимация вращения картинок, это нормально?  

идем на https://caniuse.com/ , вводим нужное свойство, читаем какие браузеры и как поддерживают

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 23:58 13-03-2019 | Исправлено: Mavrikii, 23:58 13-03-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
По поводу анимации, добавил -webkit- к @keyframes и поменял местами строки в коде выше, анимация заработала только для обычных картинок, для SVG не работает.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 00:13 14-03-2019
WONDROUS



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

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 13:31 14-03-2019
WONDROUS



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

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

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

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

тени нужно цеплять не к .box2, а к родителю, облегающему плотно картинку (или к самой картинке). потому что ширина .box2 больше, чем сама картинка.
 
либо делать ему display: inline-block и центрировать его уже через text-align его родителя

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо, попробую так сделать.
 
Но всё же интересно, насколько важно поддерживать работу каких-то современных стилей в устаревших браузерах? Особенно, когда для того же Виндос есть Фокс, Хром и Опера,

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 21:37 14-03-2019
Mavrikii

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

Цитата:
когда для того же Виндос есть Фокс, Хром и Опера,

они есть и не только для W
 

Цитата:
в устаревших браузерах

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

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Хм, делаешь, чтобы анимация работала в ранней мобильной версии Сафари и Хром (приписывая -webkit-), так перестаёт работать в других версиях для настольного браузера.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 14:50 15-03-2019 | Исправлено: WONDROUS, 05:58 16-03-2019
Mavrikii

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

Цитата:
приписывая -webkit-

надо не приписывать, а делать две копии, одну с префиксом, вторую без.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 09:26 16-03-2019
WONDROUS



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

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 12:05 16-03-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

Рейтинг.ru