오류, 성공, 예, 메모 및 팁에 대한 스타일 상자 만들기 | 1일차 | 중급 HTML + CSS 프로젝트 50일

성공, 오류, 메모, 경고, 예 및 팁에 대한 스타일 상자 만들기

👉🏻 상자를 만들고 싶다-

이것은 GitHub의 상자입니다.


🎯 목표
만들기-


👉🏻 배경을 주는 클래스div의 부모outside와 콘텐츠를 가진 클래스div의 자식inside을 만들겠습니다.
👉🏻 매력적인 상자를 얻기 위해 CSS로 스타일을 지정합니다.

🎯 과정 1

HTML

<div class="outside outside-tip">
   <div class="inside inside-tip">
      <div id="head">&#128161; Tip : </div>
         <ul>
             <li>Try this on your own.</li>
             <li>Try playing with the CSS.</li>
         </ul>
    </div>
</div>

CSS

body
{
    color: #000000;
    font-size: 19px;
    font-family: 'Nunito Sans', sans-serif;
}
#head
{
    font-weight: 700;
    font-family: 'Chivo', sans-serif;
    font-size: 20px;
    color: #987a00;
}
.outside-tip
{
    border: solid 2px #ffd500;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    line-height: 25px;
    overflow: hidden;
    padding: 15px 60px;
    background-color: rgb(255, 249, 208);
    margin: 60px;
}

다음과 같이 나오게 됩니다...

🎯 과정 2

HTML

    <div class="outside outside-warning">
        <div class="inside inside-warning">
            <div id="head">&#128683; Warning : </div>
               Stay away from frauds..
        </div>
    </div>

CSS

body
{
    color: #ff4444;
    font-size: 19px;
    font-family: 'Nunito Sans', sans-serif;
}
#head
{
    font-weight: 700;
    font-family: 'Chivo', sans-serif;
    font-size: 20px;
    color: #ff0a0a;
}
.outside-warning
{
    border: solid 2px #ff4444;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    line-height: 28px;
    overflow: hidden;
    padding: 10px 60px;
    background-color: rgb(255, 235, 235);
    margin: 60px;
}
.inside-warning
{
    border-left: solid 3px #ff4444;
    padding-left: 20px;
}

다음과 같이 나오게 됩니다...

🎯 프로세스 3

HTML

    <div class="outside outside-note">
        <div class="inside inside-note">
            <div id="head">Note : </div>
            <ul>
                <li>This is HTML code.</li>
                <li>It is styled by CSS.</li>
            </ul>
        </div>
    </div>

CSS

body
{
    color: #000000;
    font-size: 19px;
    font-family: 'Nunito Sans', sans-serif;
}
#head
{
    font-weight: 700;
    font-family: 'Chivo', sans-serif;
    font-size: 20px;
    color: #0078c2;
}
.outside-note
{
    background-color: #f0f7fb;
    border-left: solid 4px #3498db;
    line-height: 25px;
    overflow: hidden;
    padding: 12px;
    margin: 60px;
}

다음과 같이 나오게 됩니다...

그림자 효과 주기 💡

상자 주변에 그림자 효과를 주어 3D 느낌을 줍니다. CSS를 상위에 사용div -

CSS

{
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

색상 및 시각적 기호 💡

색상을 선택할 때 접근성을 염두에 두십시오.

빨간색은 경고 및 위험 표시에 사용됩니다.

주황색은 주의 사항에도 사용할 수 있습니다

.

메모는 파란색일 수 있습니다.

예는 녹색일 수 있습니다.

팁은 노란색일 수 있습니다.

🎯 직접 사용해 보세요 --

1.

2.

삼.

📢 오늘의 팁 💡

다음 프로젝트를 위한 무료 이미지와 로고를 원하십니까?

사용-

Doodleipsum

Logoipsum

전체 시리즈를 확인하세요!
혜택을 받을 수 있는 사람과 공유하세요💚
❤️ 해피 코딩!
더 많은 것을 위해 따르십시오!