Ответы пользователя по тегу HTML
  • Почему содержимое таблицы отображается вне таблицы?

    @forspamonly2
    вы вложенность перепутали. tr снаружи, td/th внутри
    Ответ написан
    Комментировать
  • Как в codepen загрузить свои файлы, чтобы показать проэкт другим разработчиком? Например у меня ...?

    @forspamonly2
    у кодпена кроме pens есть ещё projects
    Ответ написан
    Комментировать
  • Как сделать верстку как на картине?

    @forspamonly2
    если хочется "только на цсс", то простейший вариант изготовления аккордеона вручную - это выбор развёрнутого в данный момент блока на радиокнопках.

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

    заголовки блоков - это лейблы для спрятанных радиокнопок с одинаковым name. видимость блока определяется селектором следующих элементов, вроде такого: input[checked] ~ div.block { display: block; }

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

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

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

    самый реальный способ получить настоящий скриншот - это какой-нить puppeteer на сервере. вашем собственном сервере, или каком-нибудь стороннем, который такое апи предоставляет.
    Ответ написан
    Комментировать
  • Как адекватно сверстать подобный фон?

    @forspamonly2
    Ответ написан
    Комментировать
  • Как можно сверстать такой блок?

    @forspamonly2
    Ответ написан
    Комментировать
  • Как правильней сверстать такую фигуру?

    @forspamonly2
    не знаю какая там адаптивность ожидается, но если при уменьшении ширины буква должна налезать на боковуху тёмным цветом, то это можно сделать svg-шными масками или клипом. две копии буквы, белая поверх тёмной, на верхней clip-path.
    Ответ написан
    Комментировать
  • Как удалить селектор через JS?

    @forspamonly2
    читайте про CSSOM. https://developer.mozilla.org/en-US/docs/Web/API/C...

    если знаете какая по счёту таблица стилей и правило в ней (судя по селектору, вас какой-нибудь reset беспокоит, который всегда первый), то всё просто:
    document.styleSheets[0].deleteRule(0);

    если не знаете, придётся перебирать и искать:
    let i = [...document.styleSheets[0].cssRules].findIndex(r => r.selectorText==="*")
    document.styleSheets[0].deleteRule(i);
    Ответ написан
    Комментировать
  • Как создать мультиградиент с помощью CSS?

    @forspamonly2
    именно такую конфигурацию, как у вас, градиентами на одном элементе сделать не получится.

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

    с другой стороны, если конкретный рисунок не догма (а он, прямо скажем, не шедевр), можно сделать похожий с горизонтальным градиентом в одну сторону и вертикальным поверх. примерно так:

    https://codepen.io/anon/pen/bMxvmV

    если постараетесь подобрать цвета, вполне может получиться довольно похоже на ваш рисунок.
    Ответ написан
    1 комментарий
  • Как реализовать кривые элементы?

    @forspamonly2
    линейными градиентами с резкими переходами.

    часто про это спрашивают, я за месяц с небольшим уже четвёртый раз этот пример показываю

    https://codepen.io/anon/pen/qovPYj
    Ответ написан
    Комментировать
  • Что быстрее градиент или изображение?

    @forspamonly2
    градиенты и тени тормозят неиллюзорно. как-то раз магическим образом убрал тормоза из гламурной таблички, которая уже при полусотне строк заметно подлагивала, особенно при изменении ширины, заменив еле-заметный одинаковый градиент внутри каждой ячейки на гифку. у выделенной строки оставил градиент - в умеренных дозах оно вполне подъёмно.
    Ответ написан
    Комментировать
  • Как убрать рамку сзади элемента (CSS)?

    @forspamonly2
    задать тексту фоном ту же самую картинку с background-attachment
    Ответ написан
    Комментировать
  • Как сделать скошенные углы с тенью?

    @forspamonly2
    впритык два блока одинаковой высоты, один с transform:skew, второй без. у каждого блока родитель с overflow:hidden, который обрезает первому блоку правую тень, а второму левую. путём наличия зазора под тень со всех сторон, кроме той ,которая обрезается.
    Ответ написан
    Комментировать
  • Как стилями настроить тень фигуре из двух блоков?

    @forspamonly2
    нижний блок обернуть контейнером с overflow:hidden и обрезать верхнюю часть тени путём высовывания её за край контейнера. пристроить этот бутерброд к краю верхнего блока с большим z-index
    Ответ написан
  • Как задать стиль абзацу при наличии после него изображения?

    @forspamonly2
    пока никак. когда-нибудь, во времена всеобщего благоденствия и css4 селекторов, это будет делаться так: p:has(+ img)
    Ответ написан
    Комментировать
  • Как сверстать два соседних скошенных блока, если у них есть бекграунды?

    @forspamonly2
    а тут вроде бы чистых градиентов и нету. даже на голубой части есть куски фотографий. если делать эти куски в пнг и класть поверх градиента, то вполне может оказаться что весит он больше, чем если в одном джипеге пожать до упора градиентный фон. получается, что смысла разделять любые два скошенных блока просто нет, раз они оба картинками.
    поэтому, вполне приемлемый вариант - оставить всё несколькими сплошными битмапами по границам горизонтальных блоков. к тому же, это будет справедливо: лохотронщики должны страдать.

    но если говорить именно о технической возможности, то можно попробовать делать свг-шные фоны с одной скошенной стороной, прибитой к краю у каждой секции.
    Ответ написан
    Комментировать
  • Почему мой код на less не компилируется в CSS?

    @forspamonly2
    вы пытаетесь писать лесс императивно, будто это сасс. а он декларативный, на нём надо писать примерно как на функциональных языках.

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

    в общем, код как у вас может быть написан примерно так:

    .y(@y) when (@y < 10) {
    	.x(@x) when (@x < 10) {
    		@squareI: @y * 10 + @x + 1;
    		@delayI: @y + @x;
    		@output: round(0.2 * @delayI, 1);
    		#square-@{squareI} {
    			animation-delay: ~"@{output}s";
    		}
    		.x(@x + 1);
    	}
    	.x(0);
    	.y(@y + 1);
    }
    .y(0);


    но то же самое делается и проще:
    .delay(@i: 0) when(@i < 100)
    {
    	@squareI: @i + 1;
    	@x: mod(@i, 10);
    	@y: floor(@i / 10);
    	@delay: @x + @y;
    	#square-@{squareI} { animation-delay: ~"@{delay}s"; }
    	.delay(@i + 1);
    }
    .delay();
    Ответ написан
    Комментировать
  • Как сделать такой background?

    @forspamonly2
    раскрасить в цсс, тремя радиальными градиентами. один из них эллиптический придётся ещё наклонить.
    Ответ написан
    Комментировать
  • Как svg fill не растягивать по ширине?

    @forspamonly2
    у вас фигура сначала раскрашивается, потом растягивается целиком.

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

    как вариант, можно отвязать фигуру от экрана путём вывода в экранных координатах прямоугольника без трансформации, которому нужная фигура задана как clipPath с указанной привязкой к системе координат прямоугольника (clipPathUnits="objectBoundingBox").

    https://codepen.io/anon/pen/PRMjKR

    но в вашем конкретном случае куда проще не пытаться хитро растягивать сам svg, а сделать его метровой ширины и зацикленным, после чего показывать от него сколько влезет фоном у вашего футера. несколько десятков лишних точек в фигуре веса файлу добавит совсем немного.
    Ответ написан
  • Как защитить картинки от копирования?

    @forspamonly2
    сделайте себе из дерева большой и красивый фигурный логотип с адресом своего сайта на подставке и ставьте его на свою мебель перед тем, как фотографировать. ретушировать фотографии, чтобы убрать физический объект со всеми тенями - это долго и муторно, никто этого делать не станет.

    способов борьбы с копированием картинок придумано множество, но реально рабочих и при этом не мешающих жить нормальному пользователю попросту нет.

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

    со скриншотами народ пытался бороться, выводя с большой скоростью несколько кадров с наложенным в противофазе мусором, который остаётся на скриншоте, но не виден глазу из-за инерции зрения. но это тормозит, греет устройство, ест батарейку, от этого устают глаза.
    Ответ написан
    1 комментарий