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

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



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
..упс.. а ведь и впрямь работает звёздочка с импортантом:
 
   
 
хотя странно, я и боди * и боди > * пробовал, не летело хоть тресни.. а вот с хтмл * - тока в путь..)
 
   
 
ладно, уговорил, красноречивый..)) признаю, был неправ, за "способствование" -      
век живи, короче..)

----------
..the one of.. ··· ..sam-&-pol..

Всего записей: 17873 | Зарегистр. 07-06-2006 | Отправлено: 08:36 23-10-2022
Kozma_ZipperTnias



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

Цитата:
попробуйте так
* {
line-height: 0.8 !important;
}

Голосом кота Матроскина: «Ура, заработало!» Спасибо!

Всего записей: 558 | Зарегистр. 28-12-2012 | Отправлено: 18:58 31-10-2022
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
приветствую, вопрос возник.  
 
Есть такой дизайн карточки. Не спрашивайте кто придумал - есть и утвержден. На десктопной версии без проблем, а вот в мобильных первый элемент должен быть поднят, выведен за рамки своего родительского дива ровно на половину своей высоты. Т.к. в зависимости от ширины экрана и высота элемента изменяется, то не нашел ничего лучше, чем transform: translateY(-50%). Но в таком варианте следующий элемент идет с  разрывом ровно на эту самую половину высоты первого. Было бы точное значение translate - в пикселях, например, не было бы проблем - отрицательный margin-bottom для первого элемента решил бы проблему.
Как лучше сделать в этом случае? С js ясно как, но может есть трюк какой чисто на css?
 
https://codepen.io/lagudal/pen/XWYbRvW

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 10:24 02-11-2022
Mavrikii

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

Цитата:
но может есть трюк какой чисто на css?

вряд ли. единственное свойство работающее с % размерами самого элемента - translate, производит "виртуальное" смещение.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 11:48 02-11-2022
pangasiys



Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
добрый день профессор Маврикий - вот посмотри пжлста этот пост там с помощью CSS можно убрать кнопку?

Всего записей: 6697 | Зарегистр. 05-06-2012 | Отправлено: 14:45 02-11-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
pangasiys
1) для этого есть ПМ
2) одно дело вебстраница, другое - особенности интерфейса браузера, разбираться в которых не хочется.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:26 02-11-2022
pangasiys



Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
понятно - ну ладно - буду с этой кляксой

Всего записей: 6697 | Зарегистр. 05-06-2012 | Отправлено: 22:28 02-11-2022
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
приветствую, подскажите,  правильно ли я  выбрал селектор для такой задачи:  
Slick слайдер, для мобильных всегда 3 слайда, средний слайд всегда цветной, остальные серые.  
На все сначала фильтр наложил, потом для среднего убираю.  
Проблема, если присмотреться повнимательнее, когда центральный слайд - это первый, то при прямом слайдинге, или наоборот, если центральный слайд - второй, то при обратном слайдинге происходит  задержка где-то в полсекунды на отмену фильтра.  
Может селектор для среднего выбрал не совсем корректно? Но в голову не приходит, как сделать, чтобы убрать эту задержку...
https://codepen.io/lagudal/pen/dyKgGge

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 13:54 05-12-2022 | Исправлено: Weinaum, 13:54 05-12-2022
Mavrikii

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

Цитата:
Slick.prototype.postSlide

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

Цитата:
_.setPosition();

что сдвигает элементы до нужного.  отсюда и задержка.
 
ps: можно сделать, к примеру, так https://codepen.io/lagudal/pen/dyKgGge
ну или найти иной способ, как подсвечивать первоначальный слайд из js после инициализации.
 
тьфу, ненавижу когда не сохраняет.. короче, сделать класс .remove-filter, добавить его нужному слайду в начале, а в js

Код:
    $('.customer-logos').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: false,
        autoplaySpeed: 1500,
        arrows: true,
        dots: false,
        infinite: true,
    }).on('beforeChange', function(e, slick, slide) {
        $(slick.$slides[slide]).next().removeClass('remove-filter');
    }).on('afterChange', function(e, slick, slide) {
        $(slick.$slides[slide]).next().addClass('remove-filter');
    });

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:16 05-12-2022 | Исправлено: Mavrikii, 22:55 05-12-2022
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
спасибо, понял. Думал на js как то меньше всего.  
 
ps. продолжил в правильной теме

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 09:15 06-12-2022 | Исправлено: Weinaum, 15:42 06-12-2022
Alinalessio

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

Код:
 
    background-image: url(//cdn.optipic.io/site-102809/wp-content/uploads/2022/12/41.jpg?id=9712) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
 

 
В развёрнутом виде браузера изображение нормальное. Но когда сворачиваю под узкие размеры экранов и нажимаю Ctrl+F5, то вижу, что изображение заменяется на такое же, только размер у него явно подрезан. Качество очень плохое.
 
Заглянув в исходный код в развёрнутом виде, при наведении на ссылку изображения в стилях вижу это:

Потом тут же сворачиваю под узкие экраны. Обновляю Ctrl+F5 и вижу, что это же изображение уже 400х300. Хотя ссылка та же.

 
Ссылка на сайт: https://ecopooh.ru/tsennosti-komanda-test
Речь про самый верхний блок, где написано "ценности команда"

Всего записей: 223 | Зарегистр. 21-06-2010 | Отправлено: 22:07 20-12-2022 | Исправлено: Alinalessio, 22:11 20-12-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alinalessio
rendered size это то, как браузер отображает, а не размер картинки.
вопрос то в чем?

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:14 20-12-2022
Alinalessio

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

 
На широких экранах изображение чёткое:

Всего записей: 223 | Зарегистр. 21-06-2010 | Отправлено: 22:24 20-12-2022 | Исправлено: Alinalessio, 22:26 20-12-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alinalessio
картинка, если посмотрите сетевые логи, скачивается всегда одна и та же.
и у меня не получается воспроизвести вашу картинку.
 

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:51 20-12-2022
Alinalessio

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
 
Чтобы получилось, надо при узком экране нажать Ctrl+F5. Тогда кеш обнулится и изображение заново загрузится.

Всего записей: 223 | Зарегистр. 21-06-2010 | Отправлено: 22:53 20-12-2022
Mavrikii

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

Цитата:
Чтобы получилось, надо при узком экране нажать Ctrl+F5. Тогда кеш обнулится и изображение заново загрузится.

жал кучу раз, отмечал отключение кэша.. идентично.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:54 20-12-2022
Alinalessio

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

Цитата:
жал кучу раз, отмечал отключение кэша.. идентично.

 
Хм... Всё ещё более странно. Я проверил в хроме и опере, там действительно с изображением всё в порядке и на узких экранах. У меня урезанное качество наблюдается только на Яндекс браузере.
 
Но дело в том, что на настоящем телефоне, если открываю хоть в яндексе, хоть в хроме, то изображение размытое.
 
Откройте пожалуйста на самом телефоне. На телефоне изображение размытое.
Вот снимок непосредственно с экрана телефона.

Всего записей: 223 | Зарегистр. 21-06-2010 | Отправлено: 09:20 21-12-2022 | Исправлено: Alinalessio, 09:22 21-12-2022
Mavrikii

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

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:15 21-12-2022
Alinalessio

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

Всего записей: 223 | Зарегистр. 21-06-2010 | Отправлено: 11:54 22-12-2022
Alinalessio

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
На сайте вордпресса плагином выводятся карточки товара. Пытаюсь стилями заменить содержание кнопки.  
На кнопке написано " заказать в 1 клик". Но я стилями удаляю эту надпись и вместо неё пытаюсь вывести иконку корзины. Но иконка не показывается.
Что не хватает? Почему иконка не показывается?
Вот страница https://ecopooh.ru/glavnaya-test
Речь об этой кнопке:

Всего записей: 223 | Зарегистр. 21-06-2010 | Отправлено: 00:31 25-12-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 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