как вставить картинку в css

Slylish, я выбираю тебя! Настало время пользовательских CSS!

Stylish

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

Для Chrome

Для Firefox

Данное расширение использует так называемые "Касакадные таблицы стилей", то есть, эти самые CSS, отвечающие за оформление сайтов. В своей работе расширение подменяет в коде выбранных просматриваемых страниц указанные пользователем параметры таблиц на нужные ему и мы получаем результат - индивидуальное изменение оформления сайта.

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

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

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

Вот основное, что мне хотелось донести до вас.

Ну и для тех, кто всё же не желает ничего делать самостоятельно, но хочет видеть на реакторе старый дизайн, я написал (и продолжаю дописывать) и опубликовал  CSS со стилем оформления, близящемся к старому, ламповому реактору здесь.

Ещё одна темная тема для реактора (мои рассуждения + код)

Доброго времени суток, глубокоуважаемые пидоры и прочие интересные личности.

Использовал я значит раньше тему Dark Reactor [by Sirko] [Fixed by FeaR], которую допилил напильником и выложил на greasyfork.org. Однако подумал что она слишком тяжела и пора бы запилить нечто более легкое. То есть, представленная ниже тема минимально затрагивает разметку css сайта, а также не содержит никаких картинок. И вот что я делал.

Как наверное кто-то (а может и нихуя никто) видел в моих предыдущих кастомных темах я использую расширение Tampermonkey, отличительной особенностью которого (а также его подобий типа greasemonkey) в том, что он позволяет исполнять пользовательские скрипты JavaScript, как-то изменяя или дополняя функционал различных сайтов. Поскольку я не программист, попытаюсь порассуждать с позиции того что я понял как обычный мимокрокодил, прошу не пинать за неточности формулировок или ламерство.

Итак, что же делает скрипт. Во время события document-start, что видимо означает начало отображения документа, он инкапсулирует кастомную разметку css. Как вы наверное видели, современные браузеры начинают отображать веб-страницу еще до её полной загрузки, то есть пока не будет полностью загружено дерево документа. Если что, вся веб-страница со всей её иерархией блоков, картинок и прочей хуеты называется веб-документ.

Так вот начало скрипта document.addEventListener("DOMContentLoaded"... по сути позволяет добавлять в обработчики событий документа событие когда весь документ можно сопоставить со всей его иерархией. Ну а дальше идет представление пользовательского стиля css, в котором я меняю разметку, а после - внедрения стиля при помощи внутреннего инструмента GM_addStyle, который встроен в Tampermonkey. Либо PRO_addStyle или addStyle или ручное внедрение стиля средствами js.

Что касается самого стиля - во первых вместо шапки с пекафейсом простая заливка linear-gradient. Минималистично, и не требуется отображать пиксельную картинку как в предыдущей теме раньше.

Второе - закругления. Тут вы можете меня гнать и насмехаться надо мной, но мне они нравятся, я постарался закруглить где это счел нужным.

И что самое интересное - айфреймы. Если кто не знает - iframe это контейнер который разрешает стороннему сайту встроить в него что хочешь, например плеер с видеороликом. Вообще, с фреймами на джое что-то странное, так как допустим при размещения ютуп-ролика сайт будет встраивать в пост окно разрешения 560 на 315. У меня уже давно вопрос встал - нахуя, а главное - зачем? Неужели чтобы тренировать наше потраченное от дрочки на трапов зрение? Хотя, я так полагаю чтобы была какая-никакая совместимость с небольшими дисплеями 1024х768 на которых до сих пор сидят олдфаги..

Как бы то ни было, я решил этот момент в три строчки. Буквально.

iframe {

width: 100%;

aspect-ratio: 16 / 9;

height: auto;

}

Первое - даем фрейму ширину его родителя, так как это может быть блок нового поста или комментарий. Второе - устанавливаем правило в соотношение сторон фрейма, ведь 560х315 - это тоже самое соотношение 16 на 9. Третье, даем авто-высоту, благодаря установленным выше двум правилам. Всё.

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

iframe[src^='https://w.soundcloud.com'] {

aspect-ratio: auto;

}

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

Для гифок я сделал поменьше плашку их скачивания, так ИМХО красивше:

Отельный гемор еще раньше, для предыдущей темы вызвала посветка родительского комментария. Это когда наводишь на коммент и подсвечивается он и его родитель. Я долго искал где это в css, но потом вяснил что это реализовано при помощи того же JS. Пришлось инкапсулировать не только css, но и js, в итоге стало темнее:

Ну и в остальном, прошу любить и жаловаться!

https://greasyfork.org/ru/scripts/464142-new-dark-reactor-by-donotblink

Прошу писать в комментах, если что я упустил или что-то написал коряво и надо бы доделать/переделать.

Темная тема работает через расширение для браузеров: Tampermonkey или Greasemonkey:

* greasemonkey (в Firefox'е) https://addons.mozilla.org/ru/firefox/addon/greasemonkey/

* tampermonkey (в Хроме, Опере и для Firefox)

https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/

Ночной режим на реакторе

Несколько предложений по улучшению новой версии m.joyreactor.cc

Как всегда, вероятно, попрошу супер нишевые функции, но все таки попрошу, мало ли :З

1.

Когда нажимаешь по этим кнопкам (а довольно часто есть желание сменить версию), то было бы оооочень удобно, попадать не на главную страницу, а на туже страницу но на другой версии.

2. Очень раздражает, когда чего-то привычного, что было легко сделать, не стало. В обычной версии можно легко открыть пост в новой вкладке, сейчас нужно два клика и это сильно раздражает. Понимаю, все ради лаконичности. Но! Можно же просто сделать эту кнопку ссылкой на пост через <a>, а в обработчике нажатия всего-то добавить e.preventDefault(). Тогда средняя клавиша мыши, контекстное меню, долгое удержание на тачскрине (да и можно запариться и в обработчике учесть и открытие в новой вкладке через зажатый ctrl) будет работать будто ссылка, но при этом и казуальный режим никоим образом не пострадает.

3. Точно такая же история с комментариями. На телефоне жутко раздражает невозможность взять ссылку на комментарий. Мое предложение такое же, сделать эту кнопку и ссылокй. Для того чтобы кинуть кому-то ссылку на понравившийся коммент - идеально.

4. Решил попробовать создавать пост в новом редакторе и тоже есть пожелания. Во-первых, не работает зажатие ctrl (позволяет перемещать каретку не на один символ, а на целое слово влево/вправо), очень неудобно. Точно также не работает ctrl+backspace (удалить слово целиком). Очень не хватает. Во-вторых, почему-то клик на эту кнопку не работает.

5. Пропал пункт "скрыть пост". Это осознанное решение?( Невозможность изменить свой голос тоже? Если нет, было бы здорово реализваоть отмену голоса долгим зажатием, можно еще намутить какую-то анимацию заполнения при зажатии. Очень не хвататет для тех, у кого очень кривые лапы :(

6. Очень не хватает ссылок на псевдогифках. Понимаю, это может быть специально, но если вдруг нет, то очень хотелось бы вернуть.

А в целом, конечно, новый выглядит очень здорово.

P.S.: Для тех, кто видя подобный пост спешит первым вставить "Можно, делай". Все эти предложения прямо супер простые (ну может кроме 5-го), а 2 и 3 пункт делать быстрее раз в 10, чем написать этот пост.

Баги , фиксы , фичи for: JoyReactor