이미지 배경에 따라 적응형 카드 색상을 만드는 방법

15333 단어 htmljavascriptcsswebdev
안녕하세요, 이번에는 배경 이미지에 따라 색상을 변경할 수 있는 간단한 UI 구성 요소를 만들어 실험해 보겠습니다.

내 휴대폰의 음악 플레이어 알림에서 영감을 받았습니다.



그리고 실험 결과:



멋져보이죠? 이제 만들기 시작합니다🚀

준비



먼저 html, css 및 js 파일을 만들어야 합니다.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Adaptive Card Color</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <script src="script.js"></script>
</body>

</html>


스타일.css

*,
*::before,
*::after {
    padding: 0; margin: 0;
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


script.js

console.log("hello world");


카드 구성 요소 만들기



이와 같이 카드의 html 구조를 만듭니다.

<div class="card">
    <img class="card-image" src="">
    <div class="card-text">
        <span>Lorem Ipsum</span>
        <span>Is simply dummy text of the printing and typesetting industry.</span>
    </div>
 </div>


스타일을 잊지 마세요

.card {
    position: relative;
    overflow: hidden;
    width: 90%;
    max-width: 400px;
    margin-bottom: 30px;
    padding: 30px;
}

.card-image {
    position: absolute;
    top: 0; right: 0;
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
            mask-image: linear-gradient(90deg, transparent, #000);
}

.card-text {
    position: relative;
    z-index: 2;
    max-width: 75%;
    display: flex;
    flex-direction: column;
}

.card-text span:first-child {
    font-weight: 500;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.card-text span:last-child {
    opacity: 0.7;
}


For image source you can get it from unsplash or use a local file.



이미지에서 색상 추출



예, 이미지에서 색상을 추출해야 하며 이는 상당히 복잡한 작업입니다. 운 좋게도 우리에게 도움이 될 멋진 라이브러리를 찾았습니다https://github.com/lokesh/color-thief.

프로젝트에 라이브러리 추가

<script src="https://unpkg.com/[email protected]/dist/color-thief.umd.js"></script>


자바스크립트 시간




// get all card elements.
const cards = document.querySelectorAll(".card");

// create colorthief instance
const colorThief = new ColorThief();

cards.forEach(async (card) => {
    const image = card.children[0];
    const text = card.children[1];

    // get palette color from image
    const palette = await extractColor(image);

    const primary = palette[0].join(",");
    const secondary = palette[1].join(",");

    // change color
    card.style.background = `rgb(${primary})`;
    text.style.color = `rgb(${secondary})`;
});

// async function wrapper
function extractColor(image) {
    return new Promise((resolve) => {
        const getPalette = () => {
            return colorThief.getPalette(image, 4);
        };

        // as said in the colorthief documentation, 
        // we have to wait until the image is fully loaded.

        if (image.complete) {
            return resolve(getPalette());
        }

        image.onload = () => {
            resolve(getPalette());
        };
    });
}


If you get an error and you use image from internet, you can add crossorigin="anonymous" attribute on the img tag.



다음 작업에서는 텍스트의 색상을 올바르게 선택할 수 있도록 기본 색상이 어둡거나 밝은지 확인합니다. 행복한 실험 :D

읽어주셔서 대단히 감사합니다. 주저하지 마시고 의견, 비판 또는 제안을 남겨주세요. 정말 감사하겠습니다 ☺️

Hasmik Ghazaryan Olson에 Unsplash의 이미지 표지
Java에서 Android KnowMyBoard 앱[탐색 구성 요소]에서 Huawei 사이트 키트 및 지도 키트를 사용하여 매우 쉽게 검색
AWS S3에 Angular 프로젝트 배포 및 게시(초보자용)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage