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

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, как правильно сделать, чтобы svg был в :before. Сделал так, но если цвет выбирается с #, то он не работает.

Код:
.inbox:before {
  display: block;
  content: ' ';
  background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 529.09 642"><defs><style>.cls-1{fill:rgb(229, 229, 234);}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M184,0H527C543.14,502,474.88,596.46,0,642,209,541,190,441,184,0Z"/></g></g></svg>');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
  position:absolute;
  bottom:0;
  left:-10px;
}

Или лучше в base64 конвертировать? Но тогда, наверное, цвет не переназначить.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 18:20 29-06-2020 | Исправлено: WONDROUS, 19:34 29-06-2020
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
# - зарезервированный символ в URL
https://jsfiddle.net/cq4zk2eo/
 

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 20:23 29-06-2020
WONDROUS



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

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 20:55 29-06-2020
Mavrikii

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

Цитата:
используя цвет HEX  

а зачем я вам ссылку привел??
догадайтесь, что это?

Цитата:
.cls-1%7Bfill%3A%23F00%3B%7D

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 20:56 29-06-2020 | Исправлено: Mavrikii, 20:58 29-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Ааа, там просто много символом в коде появилось, сразу не увидел. На одном сайте нашёл ответы на подобные вопросы, предлагали сделать или через JS (конвертируя), или как SASS.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 21:06 29-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Я правильно понимаю, что если использовать SVG в формате base64, то цвет у него уже не поменять через CSS?

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

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

Цитата:
то цвет у него уже не поменять через CSS

почему? base64 всего лишь способ кодирования содержимого.
другое дело, что css стиль должен быть внутри этого содержимого, если оно идет фоном, а не отдельным тегом.
https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 23:04 30-06-2020 | Исправлено: Mavrikii, 23:08 30-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ и ссылку! Я попробовал применить svg в url и в качестве фона, как ранее писал, и вроде бы работает, но в веб-редакторе (в режиме самого редактора) бардак получается. Если конвертировать в base64, то всё нормально, но тогда цвет не поменять через css.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 23:24 30-06-2020
Mavrikii

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

Цитата:
но тогда цвет не поменять через css

поменять, нужно лишь чтобы умел кодировать обратно.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 23:37 30-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
А в данном примере можно ли без каких-то больших заморочек менять цвет чёрного svg? Почитал на css-tricks про fill, но что-то не получается.
 
Попробовал даже используя scss, всё равно не получается.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 00:16 01-07-2020 | Исправлено: WONDROUS, 00:57 01-07-2020
Mavrikii

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

Цитата:
Попробовал даже используя scss

потому, что н понимаете что это и зачем. не поможет.
 

Цитата:
каких-то больших заморочек менять цвет чёрного svg

ссылку читали?

Цитата:
You can't change the color of an image that way. If you load SVG as an image, you can't change how it is displayed using CSS or Javascript in the browser.


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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
В общем, не знаю, насколько правильно, но получилось сделать так. Видны какие-нибудь скрытые ошибки?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 17:31 01-07-2020
Mavrikii

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

Цитата:
Видны какие-нибудь скрытые ошибки?

работает в разных браузерах? нравится? значит ок.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:53 01-07-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Проверил в последних версиях Chrome и Opera - работает, в не очень старых Firefox и Safari - тоже работает. В IE нет возможности проверить.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 22:32 01-07-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ещё просьба подсказать, если сделать окно чата overflow-y: auto и выставить высоту, чтобы скролл был, то при использовании AOS, можно ли сделать, чтобы анимация внутри не срабатывала сразу, а работала по мере прокрутки в окошке этого чата?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 19:05 03-07-2020
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
я вам в какой раз уже повторяю - не занимайтесь украшательствами, это только во вред.

Цитата:
а работала по мере прокрутки в окошке этого чата?

чтобы следило за видимостью элемента в чате, а не в общем окне (видимо так происходит).
самое простое - окно чата в iframe.

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



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

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 21:44 03-07-2020
Altruumann



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Надеюсь здесь уместно задавать вопросы по поводу персональных веб-стилей в браузере?
 
Собственно, мне нужно центрировать весь веб контент на экране широкоформатного телевизора, чтобы он занимал, ну, 75-80% от изначального размера экрана. То есть, грубо говоря, чтобы веб страница была как на квадратном мониторе. При этом не уменьшая масштаб самой страницы, не меняя размер окна браузера и т.д. Для чего? Субъективно - оказалось, мне так легче и удобнее воспринимать информацию.
 
Пока что у меня вот такой стиль прописан, но он не везде работает корректно. На Гитхабе вёрстка "едет" сильнее, чем того бы хотелось. Проблемы, в основном, с шапками сайтов.
 

Код:
body,html,#headerInner {
margin:auto!important;
max-width: 1200px!important;}

 
Как этот код дополнить для универсальности?
 
 
И ещё такой вопрос. Я добавил отображение иконок рядом со ссылками некоторых особо популярных сайтов. Но мне хотелось бы чтобы они показывались только рядом с внешними ссылками, а на самом сайте его же внутренние ссылки были без иконок. На примере Wikipеdia
 

Код:
Если a[target="_blank"],a[href^="https://en.wikipedia.com"] тогда
::after{position:relative;top:3px;left:4px;content: url("data:image/png;base64,***")}

 
Можно ли это проделать силами CSS?

Всего записей: 471 | Зарегистр. 04-04-2016 | Отправлено: 17:22 08-07-2020
Mavrikii

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

Цитата:
Как этот код дополнить для универсальности?

"универсальность" это только html и body, для остального нужно смотреть код конкретных сайтов/страниц.
 

Цитата:
Можно ли это проделать силами CSS?

можно, оно уже написано средствами css
a[target="_blank"]::after,
a[href^="URL"]::after {
...
}

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 20:24 08-07-2020
Altruumann



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

Не выходит. Так одна и та же иконка "лепится" ко всем внешним ссылкам.
 

Код:
a[target="_blank"]::after,a[href^="https://ru.wikipedia.com"]::after{position:relative;top:3px;left:4px;content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAG7AAABuwE67OPiAAAAB3RJTUUH3gMZFCg5lyaYNAAAAM1JREFUOMvt0z1LAlAUxvEfJIFfINpqdxUbMmhsyNUlmhucXCRwjnAoSKQv0C76CYwgGgOHZp0MoqgpBCGXU9xA01l6pud/ueflnsPlX9+q4RkvOMQJXtHHLh7whBLO8R4xv1TFCJngC9yFr6MQfhPXs7rIRtVy8AY+cYDL5N4ptuc9pYH7hFv4SAIyaP41iy1MkA/ewVfCZewtGmgbN+HP0IkzuFpmI/sYo4gKctHVEY6XXWsfj1gP7mKY8I/W5iQYoxeJYIA33K7gH5gCH3onUuK/u/gAAAAASUVORK5CYII=")}





Не используйте дату и время в нестандартном цитировании

Всего записей: 471 | Зарегистр. 04-04-2016 | Отправлено: 21:13 08-07-2020 | Исправлено: Altruumann, 21:35 08-07-2020
Открыть новую тему     Написать ответ в эту тему

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