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

Открыть новую тему

Написать ответ в эту тему

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

Всего записей: 342 | Зарегистр. 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/
	Всего записей: 15100 \| Зарегистр. 20-09-2014 \| Отправлено: 18:39 26-08-2023

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

Vladsvn

Member

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

Дизайнер задал очень сложную верстку, к которой непонятно, как приступить. Вероятно, оси можно повернуть с помощью GRID. Но как пустить сам текст снизу вверх? И как отобразить стрелку, да ещё и с градиентом - есть вообще такой способ?

https://ibb.co/WyGj5b9

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

Всего записей: 15100 | Зарегистр. 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 файл один на весь сайт, поэтому для каких-то страниц часть настроек вообще не нужна.

Как же правильно оформлять код?

Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 14:26 28-08-2023

Mavrikii

Platinum Member

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

Vladsvn

Цитата:

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

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

Цитата:

Обычно использование этого способа считается плохой практикой. Но иногда в виде исключения бывает удобнее воспользоваться встраиванием стилей в атрибут style, чем писать отдельные CSS-правила. Например, когда нужно управлять стилями именно из разметки, и создавать отдельные классы при этом будет излишне. Так бывает, когда какие-то стилевые параметры устанавливаются с помощью сторонних программ или другими людьми, например, через CMS.

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

Всего записей: 1367 | Зарегистр. 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/
	Всего записей: 15100 \| Зарегистр. 20-09-2014 \| Отправлено: 17:15 17-09-2023

Vladsvn

Member

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

Добрый день!

Модальное окно открывается одновременно с открытием страницы. Всё работает нормально, но не удается подстроить размер модального окна под ширину экрана - @media не срабатывает. Болеет того, @media даже не видно в инспекторе кода в браузере. Вот взгляните здесь: https://svn.12348.ru/test-modal-3.html

Почему так и как это исправить?

Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 17:40 06-12-2023

Mavrikii

Platinum Member

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

Vladsvn

Цитата:

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

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

Цитата:

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

а точнее?

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

Как такое возможно?

Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 21:43 06-12-2023 | Исправлено: Vladsvn, 21:45 06-12-2023

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

Vladsvn

Member

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

Этот макет я вытащил из рабочей страницы, где doctype, конечно же, присутствует. По Вашему замечанию, я прописал его сейчас и в макете https://svn.12348.ru/test-modal-3.html

На проблему не повлияло.

Всего записей: 342 | Зарегистр. 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">
	Всего записей: 15100 \| Зарегистр. 20-09-2014 \| Отправлено: 22:07 06-12-2023

Открыть новую тему

Написать ответ в эту тему

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