LINUX.ORG.RU
Форум — Web-development  

Нужна помощь с CSS

 ,


0

1

Есть один классный сайт -> https://www.dpsoftware.org/fpc.php Верхняя панель у него выполнена через какую-то растянутую, дублирующуюся, двухцветную гифку на фоне, размером 17x26 пикселей. Примерно такая же штука распространяется на кнопки. А потом кнопки, явно через CSS, при наведении мыши желтеют. Фон у кнопок остаётся тем же. Решил повторить. Сделал кнопки, скачал с сайта эту фоновую гифку, сделал так:


        .newmenubutton {
            flex-direction: column;
            text-align: center;
            background-image: url(bgheader_nero_chiaro.gif);
            color: white;
            margin-right: 1px;
            transition-duration: 0.5s;
        }

Получилась хрень - чтобы покрыть кнопки полностью, браузер дублирует задний фон по вертикали. Добавлением background-repeat: no-repeat; это не лечится(и явно не должно). Как правильно растягивать вот такие фоны?

Перемещено Dimez из general

★
← Скрипт на PHP
Поменять текст внутри <label><input..> →
Ответ на: комментарий от dyb4hzvo

Вот, когда я тоже пробую repeat-x, моя кнопка покрывается примерно наполовину. На нижнюю её часть это не распространяется. Для таких случаев можно как-то указать height="auto"; или типа того?

Tyse_EX ★
() автор топика
Ответ на: комментарий от Tyse_EX

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

Для таких случаев можно как-то указать height=«auto»; или типа того?

По идее background-size должно помочь растянуть картинку по высоте

dyb4hzvo ★
()
Ответ на: комментарий от dyb4hzvo

По идее background-size должно помочь растянуть картинку по высоте

Попробовал background-size: cover;. По высоте кнопка покрылась полностью, но её цветовой переход тупо перестал видеться(из-за растянутости). Подумал пересохранить гифку в Aseprite, но увеличил в два раза. Чтобы всё выглядело по задумке, пришлось вообще убрать модификатор. Возможно тут есть какая-то магия CSS, которую я не понял, но мне кажется, что с предыдущим разрешением я мало что сделаю хорошего. Спасибо вам за помощь!

Tyse_EX ★
() автор топика

Я понимаю, что вы старше меня, но в последнее время (лет 20 уже) применяется блочная, а не табличная верстка. У вас она табличная.

Можете в ИИ промпт задать: поменять в вашем HTML на везде где можно и создать/переделать CSS под это.

VasyOK_ZP ★
()

Ты внутри кнопки добавляешь фон, он его и вставляет внутрь, насколько может. т.е. у тебя 2 фона будет - общий и внутри кнопки. Так как у него есть размер минимальный - получается коряво. То, что ты хочешь нужно делать через координаты картинки, что уже не css будет, т.к. нужно в файл передать координаты кнопки… Решенеие такое: Убери эту строчку и добавь транспарент и погугли как сделать кнопку прозрачной - там есть еще теги что бы сделать ее прозрачной, т.к. транспарент не везде работает. Можно сделать кнопку не видимой вообще, а на её координаты прилипить css в виде фигуры-рамки(бордер) - квадрата, дальше его скругляешь, размываешь, делаешь переходы цвета, ставишь фон вложенным дивом и делаешь на фон отдельно транспарент или другой тег.

П.С. Вообще, ты сразу не правильно делаешь - копируешь теги с сайта из кода, потому, что это записывается не сайтом, а другим способом? Проще напечатать из библиотеки css, если тебе её дадут для твоих целей, Т.к. на w3.org теги css не расписаны… Таким образом лучше сразу идти на бейсик, c++ если собираешься делать более-менее рабочие сайты, и там ты упрешься в тупняк: «запрещено декомпилировать, реинжинирить код», т.е. тебе запрещено будет думать… Т.е. ты обнаружишь, что только если тебе их дали в руки(библиотеки), то тогда ты кодишь… Единственное что можно кодить - почту(сначала сервак поднять, потом писать веб-аську, т.к. в этом случае ты сразу пиратишь для независимости от серваков типа гугл и можешь копировать готовые css-библиотеки).

repchick
()
← Скрипт на PHP
Web-development
Поменять текст внутри <label><input..> →