:before로 적용된 배경이 100%로 채워지지 않습니다 ㅜㅜ
323
작성한 질문수 1
인스타그램 로고 부분에 그라데이션 효과를 주고 싶어서 배경(.sns a:nth-child부분)에 컬러를 주고 :before부분(.sns a:nth-child:before)에 화이트를 주어서 작업해보았는데요.
작동은 잘되는데 hover하기전 before부분의 height가 100%일때 사진처럼 상하좌우에 배경색이 조금씩 표시가 됩니다 ㅜㅜ
before부분의 width랑 height를 100%이상으로 더 늘려봐도 똑같네요.. 어떻게 해야 깔끔하게 올화이트로 보이게 할수 있을까요??
답변 3
2
a태그 보더 안쪽에 색상이 보이는건 아래 코드로 잘못 처리해서 그렇습니다.
.sns a:nth-child(1) {
background-color: #3b5999;
}
이렇게 되어야 합니다. 기본적으로 a태그의 배경은 흰색으로 지정되어 있고 마우스가 올라갔을 때 a의 before의 색상을 보여주는건데 위의 코드로 되어 있으면 처음부터 a의 배경색이 나와 있으면 안되요. 그래서 미세하게 보이는거에요.
완성본 다운로드해서 보시면 이것말고 코드가 잘 안된 부분이 있으니 영상을 다시 보시면서 만들어보세요.
.sns a:nth-child(1):before {
background-color: #3b5999;
}
0
이렇게 적용했습니다~
<style type="text/css">
/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {
font-family: 'Raleway', sans-serif;
line-height: 1.5em;
margin: 0;
font-weight: 300;
color: #222;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
a {
text-decoration: none;
color: #222;
}
.sns {
background-color: #eee;
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0, 0.13);
margin-top: 25px;
}
.sns a {
border: 5px solid white;
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
background-color: #fff;
margin: 10px;
overflow: hidden;
}
.sns a:before {
content :"";
position: absolute;
width : 100%;
height: 100%;
background-color: white;
transition : 0.5s;
}
.sns a:hover:before {
height: 0px;
}
.sns a:nth-child(1) {
background-color: #3b5999;
}
.sns a:nth-child(2) {
background-color: #55acee;
}
.sns a:nth-child(3) {
background-color: #dd4b39;
}
.sns a:nth-child(4) {
background-color: #0077b5;
}
.sns a:nth-child(5) {
background: linear-gradient(#744999,#e22484,#e8442f,#f0c441);
}
.sns a .fa {
position: relative;
top : 50%;
left : 50%;
transform: translate(-50%,-50%);
font-size: 33px;
color: black;
transition : 0.5s;
}
.sns a:hover .fa {
color: white;
}
</style>
</head>
<body>
<div class="sns">
<a href="#"><i class="fa fa-facebook-f"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
</div>
</body>
class 값 한 번에 부여하는법
2
95
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
79
1
div#css-checker-widget의 해결방
1
71
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
95
2
강의듣는법
1
86
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
77
2
input checked 질문합니다.
0
81
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
152
2
Part 1 영상 안나옵니다
1
97
1
제이쿼리 작동이 안됩니다
1
212
3
강의 내용 질문있습니다.
1
129
2
일정 부분만 주석하는 방법
1
223
2
폰트어썸
1
144
2
인접선택자에 대한 질문드립니다!
1
135
2
delay 적용 안됨
1
137
1
rotateY(360deg)가 적용이 안됩니다!
1
190
2
세로이동할때 height값
1
142
2
폰트어썸이 안되요..
1
505
2
화면 정중앙에 오게끔 할수있나요?
1
175
1
어코디언 네비게이션 중
1
127
1
라이브서버 문제
1
241
2
넷플릭스 어코디언 예제 질문
1
107
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
163
1
active 관련 질문
1
150
2