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

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

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
 
Нужно сверстать нечитаемый, расплывчатый текст, который невозможно прочесть, но что бы при этом было ясно, что это буквы (вложение).
 
Как это можно сделать?
 
https://ibb.co/ncj3c1x
Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 14:00 26-08-2023
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn
https://www.w3docs.com/snippets/css/how-to-create-a-blurry-text-in-css.html
https://css-tricks.com/fun-with-blurred-text/
Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 18:39 26-08-2023
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Очень здорово получилось! Спасибо!
Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 19:12 26-08-2023
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Дизайнер задал очень сложную верстку, к которой непонятно, как приступить. Вероятно, оси можно повернуть с помощью GRID. Но как пустить сам текст снизу вверх? И как отобразить стрелку, да ещё и с градиентом - есть вообще такой способ?
 
https://ibb.co/WyGj5b9
Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 11:04 27-08-2023
Mavrikii

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

Цитата:
Но как пустить сам текст снизу вверх?

здрасти
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
 

Цитата:
И как отобразить стрелку, да ещё и с градиентом - есть вообще такой способ?

линия (или заполненный div) с градиентом, плюс уголок - https://www.w3schools.com/howto/howto_css_arrows.asp
Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 11:10 27-08-2023 | Исправлено: Mavrikii, 11:11 27-08-2023
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
 
В коде встречаются мелкие индивидуальные настройки типа:
style="font-size:50px; margin: 0 10px;"
style="font-size: 42%; line-height: normal;"
style="font-size: 80%;"
 
Обычно я их включаю непосредственно в HTML код, но вот в статьях пишут, что, по сегодняшним правилам, это совершенно недопустимо. И что все настройки непременно надо выносить в отдельный CSS файл. В итоге, CSS файл растет и плодятся классы, которые применяются лишь однократно. Я даже уже и не знаю, какие им придумывать имена...
 
CSS файл один на весь сайт, поэтому для каких-то страниц часть настроек вообще не нужна.
 
Как же правильно оформлять код?
Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 14:26 28-08-2023
Mavrikii

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

Цитата:
это совершенно недопустимо.  

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

Цитата:
Обычно использование этого способа считается плохой практикой. Но иногда в виде исключения бывает удобнее воспользоваться встраиванием стилей в атрибут style, чем писать отдельные CSS-правила. Например, когда нужно управлять стилями именно из разметки, и создавать отдельные классы при этом будет излишне. Так бывает, когда какие-то стилевые параметры устанавливаются с помощью сторонних программ или другими людьми, например, через CMS.
Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 19:26 28-08-2023
D1D1D1D

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Привет. В колонке таблицы с классом .d, есть кнопка с классами ".dx-header-filter .dx-header-filter-empty". Как менять цвет этой кнопки при наведении курсора на колонку? Подобные варианты не срабатывают:
 

Код:
.dx-data-row .d:hover > .dx-header-filter .dx-header-filter-empty {
    color: #FAFA01 !important;
}

 
Так это действует в самой ячейке, в которой находится кнопка, но не по всей колонке:
 

Код:
.d:hover > div .dx-header-filter {
   color: #FAFA01 !important;
}

 
Всего записей: 1472 | Зарегистр. 05-04-2010 | Отправлено: 14:29 17-09-2023 | Исправлено: D1D1D1D, 15:01 17-09-2023
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D
И не сработает без js. Даже для подсветки  столбца приходится извращаться https://css-tricks.com/simple-css-row-column-highlighting/
Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 17:15 17-09-2023
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
 
Модальное окно открывается одновременно с открытием страницы. Всё работает нормально, но не удается подстроить размер модального окна под ширину экрана - @media не срабатывает. Болеет того, @media даже не видно в инспекторе кода в браузере. Вот взгляните здесь: https://svn.12348.ru/test-modal-3.html
 
Почему так и как это исправить?
Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 17:40 06-12-2023
Mavrikii

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

Цитата:
но не удается подстроить размер модального окна под ширину экрана - @media не срабатывает

почему так решили?
 

Цитата:
 Болеет того, @media даже не видно в инспекторе кода в браузере

а точнее?
Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 21:01 06-12-2023
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вот взгляните: https://i.ibb.co/5sfKf2p/1.jpg
 
Здесь ширина экрана 500 пикселей. То есть, медиа @media screen and (max-width: 768px) должно уже сработать.
 
Но ширина по прежнему 30% и это видно "на глаз". А должна бы быть 90% в соответствии с @media.
 
И в инспекторе видно, что modal-token 30%, и это не перечеркнуто. То есть, Инспектор браузера не видит @media.
 
Как такое возможно?
Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 21:43 06-12-2023 | Исправлено: Vladsvn, 21:45 06-12-2023
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn
doctype указывайте.
Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 21:59 06-12-2023
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Этот макет я вытащил из рабочей страницы, где   doctype, конечно же, присутствует. По Вашему замечанию, я прописал его сейчас и в макете https://svn.12348.ru/test-modal-3.html  
 
На проблему не повлияло.
Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 22:03 06-12-2023 | Исправлено: Vladsvn, 22:07 06-12-2023
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn
оно все работает, если уменьшить размер браузера.
плюс добавьте
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 22:07 06-12-2023
TheBarmaley



Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
есть вопросик:
1. есть желание реализовать проверку фичастости клиентского браузера через цсс и отдавать соответствующий шрифт в виде цсс.
предварительно предполагается сделать через @support с вложенным @import содержащим либо первый либо второй цсс.
т.е. (по сути) хочу проверить клиента на предмет поддержки формата вофф2, для старых сразу отдавать вофф1.
пока это сделано через жаваскрипт с проверкой поддержки одной из (относительно) новых функций + <link src=...(1/2).css>
 
2. сопссно вопросиков три:
а) будет ли работать вложенный в суппорт импорт?
б) если а) не прокатит - можно ли наоборот - суппорт вложить в импорт? если "ага" - а как? в импорте ведь нужно урл задать..
в) какую цсс-фичу нужно проверить, чтобы гарантированно отсечь браузеры старше хром-40? (чтобы для них отдавать вофф1)

----------
..the one of.. ··· ..sam-&-pol..
Всего записей: 17876 | Зарегистр. 07-06-2006 | Отправлено: 05:14 25-06-2024
Mavrikii

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

Цитата:
а) будет ли работать вложенный в суппорт импорт?
 


Цитата:
The @import CSS at-rule is used to import style rules from other valid stylesheets. An @import rule must be defined at the top of the stylesheet, before any other at-rule (except @charset and @layer) and style declarations, or it will be ignored.

 

Цитата:
можно ли наоборот - суппорт вложить в импорт? если "ага" - а как? в импорте ведь нужно урл задать.

только в том файле, что импортится
 

Цитата:
в) какую цсс-фичу нужно проверить, чтобы гарантированно отсечь браузеры старше хром-40? (чтобы для них отдавать вофф1)
 

а чем не устраивает стандартная метода перечисления разных форматов?
например

Цитата:
@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff");
}
Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 12:56 25-06-2024
Death_INN

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Может есть способ именно через ::part получить доступ ко вложенному shadow-root (open)?

Код:
shadow-root (open)
  ... // стилизуется
  ...
  shadow-root (open)
    ... // не стилизуется
Всего записей: 3598 | Зарегистр. 24-10-2002 | Отправлено: 13:49 25-06-2024 | Исправлено: Death_INN, 13:50 25-06-2024
TheBarmaley



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

Цитата:
чем не устраивает стандартная метода перечисления разных форматов?
а разве там можно задать цсс-файл в качестве урл? и как тогда быть с "формат" - это же (теперь) НЕшрифтовый файл?
если "да/без разницы", тогда вопрос снят.. вообще-то, раньше так и было сделано, а потом шрифты конвертнули в цсс....
 
ну и второе - даже при "стандартной" методе всё равно придётся делать проверку в первом импортируемом стиле, т.ч. вопрос про "какое свойство проверить для гарантии отсева старых движков" - остаётся.. и, соответственно - опять вопрос импортирования шрифта в цсс..
понятно, что можно наплодить первых цсс-ов под разные шрифты, но чем-то проверять (и выбирать) всё равно придётся..
 
в принципе, всё устраивает (и норм.работает) через выбор посредством жс-проверки, но хотелось бы полного феншуя..))

----------
..the one of.. ··· ..sam-&-pol..
Всего записей: 17876 | Зарегистр. 07-06-2006 | Отправлено: 19:43 25-06-2024
Mavrikii

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

Цитата:
а разве там можно задать цсс-файл в качестве урл?

зачем? я же привел пример перечисления разных типов файлов для одного шрифта. браузер сам загрузит тот шрифт, что поддерживает.
 
а то, что хочется - это css хаки, раньше были популярны, теперь не очень.
https://habr.com/ru/articles/125396/
и
https://www.browserstack.com/guide/create-browser-specific-css
Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 19:55 25-06-2024
Открыть новую тему     Написать ответ в эту тему

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