This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body * { | |
/************************************** | |
Управляй обводкой шестью параметрами: | |
**************************************/ | |
/* 1) Тон цвета по цветовому кругу обводки первого потомка body */ | |
--hue-offset: 30deg; | |
/* возможны отрицательные значения */ | |
/* 2) Угол поворота по цветовому кругу для более глубокой вложенности */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul class="colors"> | |
<li class="colors__item">1</li> | |
<li class="colors__item">2</li> | |
<li class="colors__item">3</li> | |
<li class="colors__item">4</li> | |
<li class="colors__item">5</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="contacts__map" id="map"> | |
<div class="contacts__map-image no-js"> | |
<picture> | |
<source type="image/webp" media="(max-width: 767px)" | |
srcset="img/map/map-mobile.webp 1x, img/map/map-mobile@2x.webp 2x"> | |
<source type="image/webp" media="(max-width: 1023px)" | |
srcset="img/map/map-tablet.webp 1x, img/map/map-tablet@2x.webp 2x"> | |
<source type="image/webp" srcset="img/map/map-desktop.webp 1x, img/map/map-desktop@2x.webp 2x"> | |
<source media="(max-width: 767px)" srcset="img/map/map-mobile.jpg 1x, img/map/map-mobile@2x.jpg 2x"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function checkWebP(callback){ | |
let webP = new Image(); | |
webP.onload = webP.onerror = function(){ | |
callback(webP.height == 2); | |
}; | |
webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'; | |
}; | |
checkWebP(function(support){ | |
if(support) document.body.classList.add("webp"); | |
else document.body.classList.add("no-webp"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const equalHeight = (selector) => { | |
const blocks = document.querySelectorAll(selector); | |
let maxHeight = 0; | |
let blockHight; | |
blocks.forEach(block => { | |
block.style.setProperty('height', 'unset'); | |
}) | |
blocks.forEach(block => { | |
blockHight = block.clientHeight; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const colorBlocks = (block) => { | |
const items = document.querySelectorAll(block); | |
items.forEach(item => { | |
let color = (Math.random().toString(16) + '000000').substring(2, 8).toUpperCase(); | |
item.style.setProperty('--bg-color', '#' + color); | |
}) | |
} | |
colorBlocks('.random'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
--out-width: 2px; | |
outline: var(--out-width) solid red; | |
outline-offset: calc(0px - var(--out-width)); | |
} | |
*::before, *::after { | |
outline: var(--out-width) solid lime; | |
outline-offset: calc(0px - var(--out-width)); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p> | |
<input id="file" class="visually-hidden" type="file"> | |
<label for="file">Загрузить файл</label> | |
</p> | |
<p> | |
<input id="file2" class="visually-hidden" type="file"> | |
<label for="file2">Загрузить файл</label> | |
</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="tooltip"> | |
<button class="tooltip__btn" type="button" aria-label="Подробности"></button> | |
<div class="tooltip__text"> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, deserunt, distinctio dolorum eaque eius eveniet ipsam mollitia nostrum pariatur quibusdam quisquam quo quod reprehenderit velit voluptas? Magnam sequi totam voluptate! | |
</div> | |
</div> |
NewerOlder