Учебное пособие по дизайну и алгоритмам 2025, Январь

Граничные треугольники - CSS-хитрости

Граничные треугольники - CSS-хитрости

Есть треугольные символы Юникода. Вы можете нарисовать треугольник в SVG. Но есть еще один способ нарисовать треугольник в сети, не использующий ничего, кроме свойства границы и небольшого трюка с CSS ".

Прокрутка анимации - CSS-хитрости

Прокрутка анимации - CSS-хитрости

Есть некоторые анимации прокрутки, которые возможны в CSS вообще без JavaScript. Достаточно взглянуть на главу об индикаторе прокрутки, который явно является магией CSS. Но мы можем выполнять большую часть работы с анимацией прокрутки непосредственно в CSS, используя лишь один небольшой кусочек информации, предоставляемой JavaScript: насколько далеко прокручена страница ».

Простые пуговицы - CSS-хитрости

Простые пуговицы - CSS-хитрости

Свойство box-shadow, очевидно, полезно для светлых теней за элементами, обеспечивая ощущение размерности и разделения. Но у box-shadow были некоторые хитрости в рукаве, в частности, в том, что box-shadow не обязательно должен быть мягким, его можно складывать друг на друга и даже не обязательно быть рядом ».

Полосатый парикмахерская. Анимация - CSS-хитрости

Полосатый парикмахерская. Анимация - CSS-хитрости

Вы можете создавать полосы фона в CSS с помощью linear-gradient. Мы часто думаем о градиенте как о переходе от одного цвета к другому, но уловка с полосами заключается в том, чтобы не иметь никакого исчезновения. Вместо этого мы можем указать «остановки цвета» в том же месте, чтобы цвет мгновенно изменился с одного (…) »

Гибкие сетки - CSS-хитрости

Гибкие сетки - CSS-хитрости

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

Перетаскиваемые элементы - CSS-хитрости

Перетаскиваемые элементы - CSS-хитрости

Перетаскивание элемента по экрану - это то, что находится на территории JavaScript. Вам понадобится доступ к событиям DOM, таким как щелчки и движение мыши. Но мы здесь, чтобы поговорить о хитростях CSS, так что давайте сделаем это только на HTML и CSS! "

Триггер Нажмите «Ввод» при нажатии на ярлык - CSS-хитрости

Триггер Нажмите «Ввод» при нажатии на ярлык - CSS-хитрости

Ярлыки должны иметь атрибуты «для», соответствующие идентификатору ввода, который они маркируют. Это означает, что мы можем выделить этот атрибут и использовать его в селекторе для "