This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Заказчики и дизайнеры пищат от кнопок, ссылок и прочих виджетов, направление эффекта по наведению мыши на которых зависит от, собственно, направления движения курсора.
Чаще всего это решается скриптом, но вот теперь есть вариант на чистом CSS: https://codepen.io/jh3y/pen/XWMobqx
В данном примере JS нужен лишь для того, чтобы сразу показать React-компонент.
Но вот от имплементации аж разит чем-то со времён Internet Explorer 6 🤪
Те, кто делал скруглённые уголки, поймут. Вот только технологии сильно вперёд ушли и теперь перед нами пользовательские свойства.
История точно движется по спирали.
#css #component #directional
Заказчики и дизайнеры пищат от кнопок, ссылок и прочих виджетов, направление эффекта по наведению мыши на которых зависит от, собственно, направления движения курсора.
Чаще всего это решается скриптом, но вот теперь есть вариант на чистом CSS: https://codepen.io/jh3y/pen/XWMobqx
В данном примере JS нужен лишь для того, чтобы сразу показать React-компонент.
Но вот от имплементации аж разит чем-то со времён Internet Explorer 6 🤪
Те, кто делал скруглённые уголки, поймут. Вот только технологии сильно вперёд ушли и теперь перед нами пользовательские свойства.
История точно движется по спирали.
#css #component #directional
👍1
#библиотека дня
Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.
Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей.
Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.
Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип 👌
Вообще, я где-то видел адаптированный из вскода компонент, но не могу найти. Там хороший пример адаптации чистого дом-компонента на классах был...
#react #component
Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.
Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей.
Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.
Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип 👌
Вообще, я где-то видел адаптированный из вскода компонент, но не могу найти. Там хороший пример адаптации чистого дом-компонента на классах был...
#react #component
🔥5❤1
#библиотека дня
Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.
Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей. И хотелось бы их использовать в своем корпоративном корыте.
Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.
Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип 👌
Вообще, я где-то видел адаптированный из вскода компонент, но не могу найти. Там хороший пример адаптации чистого дом-компонента на классах был...
#react #component #бородач
Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.
Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей. И хотелось бы их использовать в своем корпоративном корыте.
Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.
Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип 👌
Вообще, я где-то видел адаптированный из вскода компонент, но не могу найти. Там хороший пример адаптации чистого дом-компонента на классах был...
#react #component #бородач
🤩5
#инструмент дня
Итак, потребовалось тебе написать статью. В статье что должно быть? Правильно, примеры. Где у нас лежат одни из лучших примеров?
Правильно, на CodePen.
Но как вставить кодпен на страницу, да ещё так, чтобы это все удобно хранить в гите и даже редактировать?
Ответ: использовать web-компонент
Вот этот вот: https://darn.es/code-pen-web-component/
<script type="module" src="code-pen.js"></script>
<code-pen>
<pre>
<code><p>Hello world</p></code>
</pre>
</code-pen>
Красота.
#component #codepen
Итак, потребовалось тебе написать статью. В статье что должно быть? Правильно, примеры. Где у нас лежат одни из лучших примеров?
Правильно, на CodePen.
Но как вставить кодпен на страницу, да ещё так, чтобы это все удобно хранить в гите и даже редактировать?
Ответ: использовать web-компонент
<code-pen>
!Вот этот вот: https://darn.es/code-pen-web-component/
<script type="module" src="code-pen.js"></script>
<code-pen>
<pre>
<code><p>Hello world</p></code>
</pre>
</code-pen>
Красота.
#component #codepen
👍18🤩3
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Не так давно мы с вами использовали 3D-преобразования в CSS для эффектного выбора персонажа: https://t.me/htmlshit/2969
Тогда получилось неожиданно хорошо. Но пришло время для настоящих 3D-моделей!
Сходу демо: https://codepen.io/RAFA3L/pen/raBJjgO
Тут используется веб-компонент <model-viewer>: https://modelviewer.dev/
Атрибуты компонента схожи с тегом video, а JS API максимально простой, да и чаще всего нужна работа с «орбитальной» камерой, как в кодпене выше.
Есть поддержка VR и XR, но я, если честно, от этого совсем далёк :) Поддерживается смена текстур, освещения и теней, установка сцены.
Норм? По-моему, норм :)
#3d #component #webgl
Не так давно мы с вами использовали 3D-преобразования в CSS для эффектного выбора персонажа: https://t.me/htmlshit/2969
Тогда получилось неожиданно хорошо. Но пришло время для настоящих 3D-моделей!
Сходу демо: https://codepen.io/RAFA3L/pen/raBJjgO
Тут используется веб-компонент <model-viewer>: https://modelviewer.dev/
Атрибуты компонента схожи с тегом video, а JS API максимально простой, да и чаще всего нужна работа с «орбитальной» камерой, как в кодпене выше.
Есть поддержка VR и XR, но я, если честно, от этого совсем далёк :) Поддерживается смена текстур, освещения и теней, установка сцены.
Норм? По-моему, норм :)
#3d #component #webgl
👍12❤3🤩1