Мы знаем какой интернет-магазин Вам нужен
Интернет-магазины для малого бизнеса, предпринимателей и самозанятых
Ваше имя:
Email:
Телефон:



или напишите в Telegram Whatsapp

Заметки:

Задача: Есть общий цвет блока. Нужно с помощью javascript вычислить цвет для заголовка такого же оттенка, но более темный.

Для реализации такой задачи вспомним, что цвет может быть задан не только в форматах HEX и RGB, но и в формате HSL.

Запись одного и того же цвета в разных форматах:

  • HEX: #117fb9
  • RGB: rgb(17, 127, 185)
  • HSL: hsl(201, 91%, 73%)

HSL расшифровывается как hue, saturation, lightness - тон, насыщенность и светлота. Первый параметр - это градусы цветового круга, может принимать значение от 0 до 360. Второй и третий параметры - процент, от 0 до 100. При получении цвета в формате hsl можно легко манипулировать со светлостью цвета, изменяя только последний 3-ий параметр.

Для перевода цвета в формат hsl воспользуемся формулами перевода из wikipedia.org. Обычно цвет хранится в формате HEX. А для перевода на понадобится запись цвета в формате RGB.

HEX формат цвета - это сокращенная запись цвета в формате RGB, но представленная в шестнадцатеричной формате. Каждая пара знаков обозначает по очереди содержание красного (r), зеленого (g) и голубого (b) цветов. В нашем примере цвет #117fb9 соответственно это 11( r ), 7f( g ), и b9 ( b ). При переводи этих трех чисел в десятеричный формат, получается: 17( r ), 127( g ) и 185( b ).


//функция перевода цвета из формата hex в массив hsl
function hexToHsl(color){  

    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color); 
    let r = parseInt(result[1], 16) / 255;
    let g = parseInt(result[2], 16) / 255;
    let b = parseInt(result[3], 16) / 255;

    let cmin = Math.min(r, g, b);
    let cmax = Math.max(r, g, b);
    let delta = cmax - cmin;

    let hue, saturation, lightness;
    if(delta == 0){
        hue = 0;
    }else if(cmax == r && g >= b ){
        hue = (g - b) / delta;
    }else if(cmax == r && g < b ){
        hue = (g - b) / delta + 6;
    }else if(cmax == g) {
        hue = (b - r) / delta + 2;
    } else {
        hue = (r - g) / delta + 4;
    }
    hue = Math.round(hue * 60);

    lightness = ((cmax + cmin) / 2) * 100;
    lightness = Math.round(lightness);

    lightness = noMiddleColor(lightness);

    if(delta == 0 || lightness == 0){
        saturation = 0;
    }else{
        saturation = (delta / (1 - Math.abs(1 - (cmax + cmin)))) * 100;
    }
    if (saturation < 0) {
        saturation += 100;
    }
    saturation = Math.round(saturation);

    return Array(hue, saturation, lightness);
}

//функция для получения более темного или более светлого цвета того же оттенка и насыщенности.
//при положительном значении procent цвет будет светлее, при отрицательном - темнее.
function hslPerc(color, procent){
    let l = color[2];
    l = parseInt(l+l*procent/100);
    if(l > 100){l = 100;}
    return Array(color[0], color[1], l);
}

//функция возвращающая цвет в строчном формате из массива
function hslColor(color){
    return 'hsl('+color[0]+','+color[1]+'%,'+color[2]+'%)';
}
let color='#117fb9';
let darkColor = hslPerc(hexToHsl(color), -30);
element.style.color = hslColor(darkColor);



10.08.2022 13:49 Подробнее

Довольно редко используемое CSS свойство break-inside, но иногда его использование бывает весьма полезным.

Что же такое break-inside?

Это свойство определяет каким образом будет производится разрыв страницы элемента. Естественно, что разрыв страницы чаще всего нужен при печати. Но оказывается, что не только.

Представим пример, что для некоторого блока на странице задан вывод в две или три колонки. И в тексте используется изображение и подпись. Автоматически разрыв колонки может привести к тому, что картинка останется внизу первой колонки, а надпись уплывет в следующую колонку. Висячая такая подпись получится.

Избежать такого случая поможет значение avoid-column свойства break-inside для блока, содержащего изображение + надпись.

Возможные значения свойства break-inside:

  • auto - автоматический разрыв страницы или колоноки перед текущим элементом
  • avoid - отмена разрыва страницы внутри текущего элемента
  • avoid-page - отмена разрыва страницы внутри текущего элемента
  • avoid-column - отмена разрыва колонки внутри текущего элемента

Пример реалиазации, описанный выше:


<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        font-size: 90%;
        padding: 50px;
    }
    p{
        margin-bottom: 1em;
        line-height: 1.3em;
    }
    .twoColumn{
        column-count: 2;
        column-gap: 50px;
    }
    .imgBox{
        text-align: center;
        break-inside: avoid-column;
    }
    img{
        max-width: 100%;
    }
</style>
</head>

<body>
<div class="twoColumn">
    <p>Некий текст, который должен выводится в две колонки, далее идет блок с изображением.</p>
    <div class="imgBox">
        <img src="1.jpg">
        <p>Некая абстракция</p>
    </div>
    <p>Далее идет еще текст текст, который будет выводится уже во второй колонке.</p>
</div>
</body>
</html>


01.08.2022 17:02 Подробнее

Задача: Есть файл svg с набором из нескольких элементов вида, как описано здесь. Нужно увидеть сами картинки в браузере.

Для этого вставим svg на страницу с помощью тега <embed>. И далее, разобрав его на элементы <symbol>, выведем как отдельное svg-изображение, попутно подписав id каждого. Теперь можно увидеть свой svg файл на странице.

<!DOCTYPE html>
<html>
<head>
    <title>Иконки</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<style>
    body{
        font-size: 90%;
    }
    embed{
        display: none;
    }
    .iconsBox{
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-gap: 20px;
        border-bottom: 3px solid #ccc;
        padding-bottom: 20px;
    }
    .iconsBox > div{
        text-align: center;
    }
    .iconsBox > div p{
        margin-bottom: 10px;
    }
    .iconsBox svg{
        width: 32px;
        height: 32px;
    }
</style>

<script>
showSetSvg('icons.svg');
//icons.svg - имя и путь к разбираемому svg-файлу

function showSetSvg(namefile){
    let symbBox = document.createElement('embed');
    symbBox.setAttribute('type', 'image/svg+xml');
    symbBox.setAttribute('src', namefile);
    let body = document.body;
    body.appendChild(symbBox);

    let iconsBox = document.createElement('div');
    iconsBox.classList.add('iconsBox');
    body.appendChild(iconsBox);

    symbBox.onload = function(){
        let svgInner = symbBox.getSVGDocument();
        let symb = svgInner.querySelectorAll('symbol');

        for(let i = 0; i < symb.length; i++){
            let svgBox = document.createElement('div');
            svgBox.innerHTML = '<p>' + symb[i].id + '</p><svg class="svgicons"><use xlink:href="' + symbBox.src + '#' + symb[i].id + '"></use></svg>';
            iconsBox.appendChild(svgBox);
        }
    }

}

</script>

</body>
</html>


01.08.2022 13:56 Подробнее

Задача: Обрезать текст до какой-то длины и вставить ссылку "читать полностью", по нажатию на которую откроется остальной блок.

Рассматривается случай только форматированного текста с тегами. Суть функции: найти конец параграфа </p> или тег <br> после минимальной длины текста. Далее в эту позицию вставить ссылку, после нее все скрыть. По нажатию на ссылку - восстановить изначальный текст.


function cropText(box, minLength){
//box - элемент, с которым работаем,  minLength - минимальная длина текста, которая должна быть видна
    let text = box.innerHTML;

    if(text.length > minLength){
        let pos = text.indexOf('<br>', minLength+1);
        let pos2 = text.indexOf('</p>', minLength+1);

//выбираем ближайший конец строки или параграфа
        if(pos == -1  && pos2 != -1){pos = pos2;}
        if(pos < pos2 && pos2 != -1){pos = pos2;}

//в случае, если такая позиция есть, делаем, что и планировали
        if(pos != -1  &&  ((pos+4) < text.length)){
            box.innerHTML = text.slice(0, pos+4) + '...<br><a class = "swapmoreA">посмотреть полностью</a>';
            let aa = box.querySelector('.swapmoreA');
            aa.setAttribute('href', 'javascript: void(0);');
            aa.addEventListener('click', function(){
                box.innerHTML = text;
            })
        }
    }
}



20.07.2022 18:20 Подробнее

Задача: организовать вставку множества иконок в проект, с возможностью замены цвета через css.

Для такой задачи отлично подходят svg изображения.

В случае, когда изображений много, наиболее предпочтительный способ вставки svg на страницу: вставлять как один из элементов общего файла, в котором описываются все иконки:

<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/icons.svg#edit"></use></svg>

img/icons.svg - путь к файлу;
edit - название элемента-символа.

Вот так выглядит сам файл icons.svg:

<svg>
    <symbol id="goup" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 16c0 8.837 7.163 16 16 16s16-7.163 16-16-7.163-16-16-16-16 7.163-16 16zM29 16c0 7.18-5.82 13-13 13s-13-5.82-13-13 5.82-13 13-13 13 5.82 13 13z"></path>
        <path d="M22.086 20.914l2.829-2.829-8.914-8.914-8.914 8.914 2.828 2.828 6.086-6.086z"></path>
 </symbol>
    <symbol id="down" viewBox="0 0 16 28" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 11c0 0.266-0.109 0.516-0.297 0.703l-7 7c-0.187 0.187-0.438 0.297-0.703 0.297s-0.516-0.109-0.703-0.297l-7-7c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h14c0.547 0 1 0.453 1 1z"></path>
    </symbol>
    ...
</svg>


19.07.2022 18:33 Подробнее

Находясь на нашем сайте, вы принимаете условия использования файлов cookies. Более подробная информация здесь.