HTML 없이 CSS 아트를 만듭니다.🤯

18566 단어 tutorialhtmlwebdevcss
좋아, 여기는 함정이 없어.따라서 CSS를 배우고 일부 속성을 꼼꼼히 사용하는 것은 결코 쉬운 일이 아니다.
CSS 예술의 개념은 통상적으로 우리의 CSS 기술을 연습하기 위한 것이다.이 속성을 추가하는 방법, 이런 값을 추가하는 방법, 이 단원을 사용하여 정확한 공정을 하는 방법, 아니면 다른 속성이 아닌 속성을 선택하는 방법.
만약에 이런 문제에 관심이 있거나 왜 CSS로 예술을 만들어야 하는지 알고 싶다면 50일간의 CSS 학습을 마친 후에 그녀가 쓴 다음과 같은 글을 검토해 보세요.

50일 CSS 예술의 5가지 교훈

수잔나 에치슨・ 7월 4일 20일.・ 4분 읽기

#css #codepen #showdev #webdev

좋습니다. 그래서 모든 사람들이 어떤 HTML 태그를 사용하여 CSS 예술의 기본 구조를 가지고 있습니다. 그러나 만약에 자신의 CSS 기술이 대단하다고 생각한다면 태그만 건너뛰고 싶으십니까?우리는 어떤 HTML 코드도 사용하지 않고 CSS 예술을 가능하게 하는 것이 어떻습니까?
물론 당신들 중 대다수는 우리가 사용할 기교를 이미 알고 있을 것입니다. 그러나 만약 당신이 CSS나 CSS 예술의 초보자라면 계속 읽어 주십시오. 왜냐하면 우리는 곧 이모티콘을 만들 것입니다. 이것은🤯 및🤪...

CSS 아트란?🌚


허허, 나는 심지어 너에게 이 단어를 소개하는 것을 잊어버려서 네가 모를 때를 대비해서...

It's the act of using only HTML and (of course) CSS to create any art form.


이것은 위의 허구로 뜻을 간단하게 표현하는 데 쓰인다.예술 형식은 네가 상상할 수 있는 모든 것을 포함할 수 있다. 만화 인물부터 삽화까지 기본적으로 '예술' 범주에 속하는 모든 것이다.
그래서 너는 이 물에서...
...이 모나리자 그림의 세부 사항은 정말 터무니없다.
그래, 네가 방금 본 그 그림은 <img> 라벨이 아니라 위에 그림이 있어. 네가 본 모든 요소는 0에서 시작했어!

우리 뭐 할 거야?👀


물론 다른 모나리자는 아니지만, 우리는 간단한 이모티콘을 만들 수 있다.

...이것이 아니라

빌어먹을!어때요?물론 아름답지는 않지만, 유머 감각이 좀 있을 수도 있죠?

배치 분해🖼


코드를 작성하기 전에 다음 사항을 이해해야 합니다.
  • 원소가 얼마나 필요합니까?
  • 우리는 어떤 부동산을 알고 있습니까?
  • 이러한 CSS 속성은 어떻게 사용합니까?
  • 새로운 속성 또는 CSS 기능에 대해 알아야 할 사항은 무엇입니까?
  • 측정에는 어떤 단위를 사용해야 합니까?em,rem,아니면 단지%?
    • 우리가 필요로 하는 출력을 직관적으로 강화합니다(개발 모드 오픈!):

    그래, 너는 나의 Figma 기교를 감상할 수 있어, 하하😆
    우리는 똑똑히 볼 수 있다(점선 덕분):
  • 이모티콘을 저장할 전체 용기가 있습니다(파란색 배경으로 표시).
  • 그리고 우리는 이모티콘의 주체를 보았다. 이모티콘은 노란색으로 가득 찬 동그라미였다.
  • 이 안에서 우리는 두 눈(초연갈색), 그리고 희미한 넓은 입(짙은 갈색)이 있다.
    • 세 개의 빠른 원소, 우리는 3분의 시간이 있습니다. 준비됐습니까?(3분'이라는 내용을 랜덤으로 추가했으니 가능한 한 많은 시간을 들여 이 개념을 완전히 이해해 주십시오.

    제로 HTML 문자로 CSS 아트 만들기 시작🤪


    값을 올리다🤒


    아이고, 여기는 별거 아니지만 꼭link your CSS file externally or internally,네가 뭘 좋아하든지.

    진정한 거래😎


    너의 스타일시트를 열어라.우리가 필요로 하는 모든 것은 DOM의 <body>에 봉인할 수 있다.그래서 우리는 먼저 body 선택기를 사용한다.Here's a cool CSS Tricks article HTML vs Body, 마음에 드시면.body 선택기에 기록된 모든 속성은 DOM의 <body> 요소를 대상으로 합니다.그것은 기본적으로 네가 볼 수 있는 모든 HTML 내용으로 구성되어 있다.그러나 body를 사용하고 일부 색을 추가하면 전체 색을 전체 페이지에 적용할 수 있다.우리는 그러고 싶지 않다.
    우리가 필요로 하는 것은'수작'이다!바로 body에서 사용pseudo-element!🥳

    A pseudo-element is a keyword that is attached to any selector that lets us style a specific part of that selected element.


    이것으로 우리는 간단하게 하나의 요소를 사용하여 무한히 많은 형상, 벡터를 만들 수 있다. 물론 CSS 예술도 있다.이런 상황에서 우리는 body 부분만 처리하고 다른 것은 아무것도 필요 없다.
    일련의 사용 가능한 위조원소가 있는데 그 중에서 가장 중요한 것은 ::before 위조원소이다.이 옵션은 선택한 요소의 첫 번째 하위 요소를 선택합니다. 보통 생성 값의 강제 content 속성을 사용하여 특수 요소를 추가하는 데 사용됩니다.
    우리의 표정 예술에 있어서 우리는 어떤 특수한 내용도 필요하지 않기 때문에 이 속성의 값을 공백""으로 보존할 수 있다.

    포지셔닝 이모티콘📐


    다음은 이모티콘을 지정해야 합니다.일부 내용을 표시하려면 background-color 또는 orangered를 추가할 수 있습니다. 왜냐하면'보통'red 값은 거의 야간에 인코딩하는 것처럼 조명 테마와 최대 화면 밝기를 가지고 있기 때문입니다.

    우리는 positioning absolute를 원시body 요소로 수정해야 한다.이제 뷰포트에 이모티콘이 표시되는 위치를 설정해야 합니다.이를 위해 다음을 사용합니다.
    .
.
.
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
.
.
.
    이를 통해 전체 웹 페이지에서 CSS 아트가 중앙에 위치할 수 있습니다.다음 단계는 적당한 width와 height 단위만 제시하면 된다.네, 이모티콘의 주체로서 15rem만 추가하면 됩니다.
    지금까지는 이모티콘을 중심에 놓고 고정된 사이즈를 가져야 한다.

    백스테이지에서 일해!🟡


    각자 여기서 바꿔!우리는 눈과 입 같은 얼굴 특징을 만들어야 한다.
    CSS의 border-radius: 50%; (특히 background ) 속성은 멋진 것들을 받아들이고 일반적인 색 값, 즉 점차적인 변화를 받아들인다!
    프레젠테이션에서 우리는 background-color 만 사용할 수 있다. 이것은 CSS 함수로 중심에서 복사하는 점차적인 변화를 만들 수 있다.다음과 같은 구문이 있습니다.
    radial-gradient(circle at center, red 0, blue, green 100%)
    우리는 먼저 원을 그릴 곳을 제공한 다음에 필요한 색깔(수량)을 제공한다.
    포석 분해도에서 보듯이 우리는 두 눈과 한 입을 대표하는 세 개의 동그라미가 있다.따라서 각 상황에 대해 우리는 모두 사용해야 한다radial-gradient().이모티콘 주체의 배경에 대해서는 잠시 후에 변경할 수 있습니다.우리 동네는 이렇다.
    1️⃣ 첫눈이 크다.우선, 우리는 그것을 포지셔닝해야 한다.이를 위해 radial-gradient 이후 우리는 백분율에 따라 수평과 수직 위치를 대략적으로 추정했다.여기서 나는 각각 circle at과30%를 선택했다.
    다음에 우리는 그것40%의 색깔(연한 갈색)과 #b58c1b의 눈금을 주었다.이 비율을 늘릴수록 동그라미는 커진다.
    세 번째 매개 변수는 이모티콘 주체의 색상에 영향을 주지 않도록 20%로만 설정합니다.
    .
.
.
radial-gradient(circle at 30% 40%, #b58c1b 0%, 
#b58c1b 20%, transparent 0%),
.
.
.
    2️⃣ 두 번째 눈은 같지만 여기에는 작은 사이즈가 필요하기 때문에 비율을 transparent로 변경하면 됩니다.
    .
.
.
/* Big eye */
radial-gradient(circle at 30% 40%, #b58c1b 0%, 
#b58c1b 20%, transparent 0%),

/* Small eye */
radial-gradient(circle at 70% 45%, #b58c1b 0%, 
#b58c1b 13%, transparent 0%),
.
.
.
    셋️⃣ 넓은 입도 같은 지름의 사다리꼴로 구성되어 있지만 위치와 색깔을 제외하고는 입의 너비나 길이를 정의해야 한다.각각 13%과80rem의 외부 너비와 높이를 제시함으로써 가벼운 넓은 입 감각을 실현할 수 있다.
    반드시 끝에 5rem를 붙여야 한다. 그렇지 않으면 이 입은 얼굴 전체가 미치게 될 것이다!
    .
.
.
/* Big eye */
radial-gradient(circle at 30% 40%, #b58c1b 0%, 
#b58c1b 20%, transparent 0%),

/* Small eye */
radial-gradient(circle at 70% 45%, #b58c1b 0%, 
#b58c1b 13%, transparent 0%),

/* Wide mouth */
radial-gradient(circle at 50%, #672e00 10%, 
transparent 10%) 50% 100% / 80rem 5rem no-repeat
.
.
.
    마지막으로 이모티콘 배경색 16진수 값을 다음과 같이 끝에 추가할 수 있습니다.
    .
.
.
background:
    radial-gradient(circle at 30% 40%, #b58c1b 0%, 
    #b58c1b 20%, transparent 0%),

    radial-gradient(circle at 70% 45%, #b58c1b 0%, 
    #b58c1b 13%, transparent 0%),

    radial-gradient(circle at 50%, #672e00 10%, 
    transparent 10%) 50% 100% / 80rem 5rem no-repeat

    #ffcf34;
    이제 CSS 이모티콘의 전체 코드는 다음과 같습니다.
    body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background:  
        radial-gradient(circle at 30% 40%, #b58c1b 0%, 
    #b58c1b 20%, transparent 0%),
        radial-gradient(circle at 70% 45%, 
    #b58c1b 0%, #b58c1b 13%, transparent 0%),
        radial-gradient(circle at 50%, 
     #672e00 10%, transparent 10%) 50% 100% / 80rem 5rem no-repeat
        #ffcf34;
}
    이렇게!당신은 HTML 한 줄도 없는 상황에서 CSS 예술을 만들었을 뿐입니다. 그러나 가장 중요한 것은 위조 요소가 무엇인지, 그것이 어떻게 작동하는지, 점차적인 변화를 어떻게 활용하여 예술 형식을 만드는지 등입니다!
    다음은 위 코드의 코드입니다.
    하하, CSS 라벨이 하나밖에 없어요. 이상해 보여요...🌚

    추가 리소스🤩


    새로운 CSS 아트 기술을 계속 배워 다음 리소스에서 더 많은 지식을 얻을 수 있습니다.
  • Pure CSS Art: A Beginner’s Tale by Alison Quaglia
  • PURE CSS A​R​T GALLERY
  • CSS Art Crash Course - By Example! by DesignCourse
    • 읽어줘서 고마워, 고마워!오늘 하루 즐겁게 보내세요.(✿◕‿◕✿)

    Always remember to leave yourself useful comments! 👇 pic.twitter.com/VJsR6YYVSs

    — Microsoft Developer UK (@msdevUK)

    📫 매주 개발자 통신 구독📫



    PS: 올해부터 저는 이곳에서 개발 커뮤니티에 관한 글을 쓰기로 했습니다.전에 나는'중'자를 썼다.만약 누군가가 나의 글을 보고 싶다면 here 이것은 나의 매체 자료이다.
    Direct2D 형상 드로잉 베이스
    앞부분을 미세하게 조정할 때 키토리가 편리해요.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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