Рубрика: CSS
ColinEspinas/lyt – гибкая и легко настраиваемая библиотека макетов CSS
<div class="row gap">
<div class="column sm-10 md-2">
<p class="padding-m box"></p>
</div>
<div class="column sm-2 md-10">
<p class="padding-m box"></p>
</div>
</div>Поддерживает Flex grid, Display, Float, Margin, Padding, Width
Google Fonts Async Snippet
Оптимальный фрагмент, который нужно использовать для быстрой загрузки Google Fonts:
<!--
- 1. Preemptively warm up the fonts’ origin.
-
- 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
- most modern browsers.
-
- 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
- only after it’s arrived. Works in all browsers with JavaScript enabled.
-
- 4. In the unlikely event that a visitor has intentionally disabled
- JavaScript, fall back to the original method. The good news is that,
- although this is a render-blocking request, it can still make use of the
- preconnect which makes it marginally faster than the default.
-->
<!-- [1] -->
<link rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin />
<!-- [2] -->
<link rel="preload"
as="style"
href="$CSS&display=swap" />
<!-- [3] -->
<link rel="stylesheet"
href="$CSS&display=swap"
media="print" onload="this.media='all'" />
<!-- [4] -->
<noscript>
<link rel="stylesheet"
href="$CSS&display=swap" />
</noscript>More Toggles.css – набор переключателей на чистом css
<div class="mt-ios">
<input id="5" type="checkbox" />
<label for="5"></label>
</div>
<script>
const toggle = document.getElementById('5');
toggle.addEventListener('change', (event) => {
if (event.target.checked) {
alert('checked');
} else {
alert('not checked');
}
});
</script>- Чистый CSS
- 13 различных стилей
- идеальное масштабирование
miniMAC/magic – набор CSS3 анимаций
Magic effects, bling, static effects, static effects out, perspective, rotate, slide, math, tin, bomb, boing, on the space
function myFunction() {
const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')
}
setTimeout(myFunction, 5000);