RU | CSS сборник

Наша любимые подписчики, если у вас есть какие то ссылки, статьи, руководства, вы всегда можете написать их в комментариях к посту, который можете найти в навигации. Мы будем рады вашей помощи, вашей поддержке, не стесняйтесь присылать информацию или спрашивать её😠

✈️добавлена куча новых готовых профилей. советую посмотреть

🕯Плашки🕯

Многие авторы используют или хотят использовать те самые плашки/блоки/кнопки, их называют по разному. остановимся на "плашках" чтобы объединить оба этих подтипа.

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

<p class="div class name"><span style="color: rgb(130, 130, 130);"><strong><em>TEXT</em></strong></span><img src="LINKS"><span style="color: rgb(140, 135, 135);"><strong><em>TEXT</em></strong></span></p>

выглядит сложно, как будто пытаешься разобраться в управлении самолётом, поэтому существует упрощенный вариант:

<p class="div class name">text</p>

сюда мы и будем подставлять всё для оформления.

Этот вариант подойдёт под любой класс, где присутствует текст. Но при желании между <p></p> можно вставить как текст, так и ссылки на изображения – <img src="LINKS">.

📖все названия классов для JanitorAI, вы можете найти у этого бота

📖Сайт Puppy для создания био

Код вставляется в описании бота, нажав на кнопку </>, в конце списка. код вставляется в поле "Edit source code".

код нельзя вставлять в Bio напрямую, поскольку он не будет работать.

дополнительный пост со штуками для био

#База #Руководство #Ссылки @DilletaCSS_Bot

Добавила руководство на создание переключения темы

🕯Музыка в Janitor🕯

Полезный и простой гайд.
Делать это нужно с ПК. можно с телефона, но ПК версией!

Изображение 1: Найдите нужную песню на SoundCloud, послушайте её и нажмите кнопку «Поделиться».

Изображение 2: Перейдите в раздел Embed и скопируйте Код.

Изображение 3: После нажатия на большую кнопку Добавить тег Music Mania откроется это окно. Скопируйте/вставьте свой код в рамку внизу и нажмите Извлечь трек.
Когда это будет сделано, песня будет добавлена.

Картинки в комментариях!!

Гайд в Дискорде на сервере Potato : Тык

#База #Руководство #Ссылки @DilletaCSS_Bot

Напоминаю что найдеными или собственными кодами или гайдами вы можете поделиться под соответствующими постами, найдя их в навигации!💪

какие гайды хотите? коды?🤓
@DilletaCSS_Bot

🕯Clip-Paths🕯

Подвезла вам новый гайд, созданный MantaRae, который она поделилась в Дискорде!
💚Ссылка на Rentry гайд: Тык
Я лишь перевожу вам этот гайд

Это руководство расскажет о процессе превращения SVG/изображений в пригодные CSS-контуры для вырезания.

Clip-path — свойство в CSS, которое определяет область отображения элемента, обрезая его по заданной форме.

💡Важное напоминание:
Пожалуйста, убедитесь, что вы соблюдаете политику CSS при настройке профилей. Это руководство предназначено для обучения и декоративных целей — не для обхода ограничений или нарушения работы сайта.

— Часть 1: Получение SVG-контура

1. Найдите хорошее исходное изображение
- Используйте чёткий, высококонтрастный SVG или PNG
- Избегайте градиентов, контуров или тонких линий
- лучше всего подходят смелые силуэты.

Важно:
Не загружайте SVG!!!
💚Загрузите его на:
https://picsvg.com/

В правом верхнем углу вы увидите несколько символов. Нажмите на "Код" и скопируйте всё в приложение для заметок.

2. Разделываем SVG до контура

Вы увидите что-то вроде этого:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="178.000000pt" height="178.000000pt"
viewBox="0 0 178.000000 178.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,178.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M23.36 172.32c-3.04-1.6-5.52-4.8-5...

Удалите всё, кроме того, что находится внутри d="..."

Вам нужно только это:
M23.36 172.32c-3.04-1.6-5.52-4.8-5...
Это и есть фактическая форма.

— Часть 2: Масштабирование и редактирование контура

3. Вставьте контур в редактор SVG-контуров

Перейдите на:
💚https://yqnn.github.io/svg-path-editor/
Вставьте свой контур в редактор.
дальше используйте его в коде.

4. Уменьшите масштаб

Уменьшите как X (ширина), так и Y (высота) до 0,1

0,1 ≈ ~100px (приблизительная оценка)

Увеличьте масштаб до тех пор, пока не сможете четко видеть координаты

Советы:
- Всегда перемещайте фигуру ближе к левому верхнему углу
- Это предотвращает странные проблемы с смещением в CSS
- Ожидайте, что придется это корректировать несколько раз

Предупреждение:
Получить все правильно с первого раза - редкость. Эксперименты - норма. Не сдавайтесь! <3

— Часть 3: Использование в CSS

5. Примените clip-path к псевдо-элементу

Не применяйте clip-path: path() напрямую к <img> - поддержка браузеров может быть непоследовательной.

Вместо этого используйте псевдо-элемент на контейнере.

.container {
position: relative;
}
.container::before {
content: "";
position: absolute;
width: 180px; /* должно быть явно указано */
height: 180px; /* должно быть явно указано */
background: #8b5cf6;
z-index: 1;
clip-path: path(
"M23.36 172.32c-3.04-1.6-5.52-4.8-5..."
);
}

– Позиционирование и настройки

Вы можете переместить или отрегулировать его с помощью:

top: 0;
left: 0;

/* и */

bottom: 10px;
right: 20px;

Если оно немного смещено, и вы не хотите снова открывать редактор:

transform: scale(1.2);

(Да, это ленивый, но действенный подход.)

Общие проблемы и исправления
- Фигура невидима
- Отсутствуют ширина/высота
- Путь слишком маленький
- Отсутствует цвет фона
- Фигура обрезана
- Путь не находится рядом с левым верхним углом в редакторе
- Контейнер слишком маленький
- Выглядит искаженно
- X и Y смасштабированы неравномерно
- SVG имел трансформации, которые вы не полностью нейтрализовали

💙Если у вас есть вопросы вы можете обратить к MantaRae, или вступить в дискорд сервер где вам помогут

#База #Руководство #Ссылки @DilletaCSS_Bot

думаю скоро выложу пару гайдов, что думаете?🤨

🔫Появился новый сервер для css!

🕯Заказы и Комиссионные🕯

Через этот пост вы можете найти актуальных креаторов, которые берут заказы на создание CSS профилей.

Есть как бесплатные, так и платные.
обязательно посмотрите статус креатора, информацию о нём и расценки.

💚Посмотреть список

#Info #Ссылки @DilletaCSS_Bot

🗽о чём бы хотели увидеть посты? может какие то полезные коды? вопросы?

🕯Ссылки🕯

Я совсем забыла что есть не только руководства но и прочие ссылки которые не подходят под остальные блоки...
но я исправляюсь и деюсь с вами ссылками...🥂

🗽не забывайте что вы можете делиться своими ссылками и гайдами

#Ссылки @DilletaCSS_Bot

Channel photo updated

🕯Сокровище🕯

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

Создатели Puppy, MantaRae и другие

Сайт активно пополняется, что может не радовать!

🔫 я думаю он реально хороший, потому что:
· Есть готовые коды
· Руководства
· Шаблоны
· сборники и другие вещи
💚📖https://jai-css-guide-resources.ju.mp/#otherresources

чтож, из этого чудесного сайта, я буду постенно выгребать всё сюда!

В конце сайта можно смотреть за тем когда сайт обновлялся в последний раз)

#Info #База #Руководство #Ссылки @DilletaCSS_Bot

🕯Коды🕯

Под этим постом я собираюсь делиться с вами кодами которые буду находить в ДС серверах.

я не знаю как много их будет, но я буду стараться искать чтото полезное.

🌳Это коды можно будет просто вставить и они будут работать)

Если у вас есть коды которыми вы бы хотели поделиться с другими можете делиться ими в комментариях!

#Коды #Дискорд @DilletaCSS_Bot

🗽Здесь можно наблюдать за обновлением постов, я довольно часто пополняю готовые коды которые можно использовать.
Если вы хотите вы так же можете делиться своими!😳

— Напоминаю что об интересующих вас вещах, можно спросить в чате или написать в нашего бота!

– Так же вы можете поделиться своими кодами и советами в тейки!🤗

🗽Буду очень рада вашим предложениям для постов!

@DilletaCSS_Bot