[ RESPONSIVE ] 08 헤더 아이콘

[ RESPONSIVE ] 

 

 

See the Pen [ RESPONSIVE ] 08 헤더 아이콘 by larmong (@larmong) on CodePen.

 

 

 

 

GitHub에서 보기 Click!

 

 

---

* transition - 정리필요

transition: all 0.3s ease;

 

 

* transform (가운데정렬) - 정리필요

    left: 50%; top: -40px;
    transform: translateX(-50%);

 

 

* 도형만들기 (아래로 세모/화살표) - 정리필요

.header .header_icon li a span::before {
    content: '';
    position: absolute;
    left: 50%; bottom: -5px;
    margin-left: -5px;
    border-top: 5px solid #3292bf;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

 

 

* opacity (안보이다가 보이면서 움직이는 효과)

.header .header_icon li a span {
    position: absolute;
    left: 50%; top: -40px;
    transform: translateX(-50%);
    font-size: 12px;
    line-height: 1.6;
    background: #3192bf;
    padding: 3px 9px;
    border-radius: 6px 0;
    opacity: 0;
    transition: all 0.3s ease;
}


.header .header_icon li a:hover span {
    opacity: 1;
    top: -33px;
}

 

 

* box-shadow ( 안으로 그림자 / border 효과 )

.header .header_icon li a:hover {
    box-shadow:
        0 0 0 3px rgba(75,154,191,0.9) inset,
        0 0 0 100px rgba(0,0,0,0.1) inset;
}

 

---

 

* 반응형 사이트 강의 보는곳(WEBSTORYBOY) click!

* Font awesome click