AD

정보 나눔 기본 트게더 로고 CSS 만으로 색상 변경하기

봄날의햇살
2021-02-10 19:52:13 2088 7 2


상단의 트게더 기본 로고를 이미지 편집없이 CSS만 이용해서 색상을 변경하는 방법입니다.

41c70417089023ccacac38839659b9e2.png

                 ↓

8a9933c26c220e0ae65a40b723840bd8.png



1. 먼저 설정할 색상 Hex Code를 준비합니다. 예시는 파란색 #127ad8 으로 진행하겠습니다.



2. https://codepen.io/sosuke/pen/Pjoqqp 에 접속하면 아래와 같은 화면이 나옵니다.

482f83097c2268144e02dba3d27608ab.png



3. Target color에 준비한 Hex Code를 넣고 Compute Filters를 클릭하면 filter 값이 나옵니다.

ddf83cdb1a2e4d1db1bdea541ce0556b.png

compute 할때마다 결과가 다른데 Loss가 작은값으로 perfect 나올때까지 해서 정확한 filter값을 찾습니다.


Loss: 19.0. The color is extremely off. Run it again!

Loss: 11.6. The color is somewhat off. Consider running it again. 

Loss: 4.1. The is close enough.

Loss: 0.2. This is a perfect result.  


한번해서 바뀐 색상에서 다시 compute하면 필터값이 이상해지기 때문에 

다시할때는 새로고침 해서 처음 검은색 상태에서 해야 합니다.



4. 위에서 얻은 필터값으로 CSS 적용하면 됩니다.


/* 데스크톱 CSS */

header .row > div:nth-child(1) > a > img {
    filter: invert(49%) sepia(55%) saturate(7442%) hue-rotate(193deg) brightness(93%) contrast(86%);
}


/* 모바일 CSS */

header > #header-area > a > h1 {
    filter: invert(49%) sepia(55%) saturate(7442%) hue-rotate(193deg) brightness(93%) contrast(86%);
}

댓글 2개  
이전 댓글 더 보기
▼아랫글 트게더 pc css 공유합니다. 블루블라
공지사항자유게시판질문 답변튜토리얼정보 나눔TGD 템플릿Twip 템플릿
4
정보 나눔
:root를 활용한 투명도 미세팁 [1]
Million_Air
01-07
»
02-10
1
정보 나눔
트게더 pc css 공유합니다. [1]
블루블라
09-27
5
정보 나눔
트게더 모바일 css 공유합니다. [5]
블루블라
09-26
1
정보 나눔
크게 안꾸며도 이쁘게 보이는법
0114생일챙겨주세요
04-13
3
정보 나눔
FontAwesome [1]
Million_Air
11-19
1
06-12
4
정보 나눔
게시판 랭킹 숨기기
잉게더
06-12
6
06-07
6
정보 나눔
Sketch v0.0.1 [2]
befreeX
03-31
2
정보 나눔
특정 글 숨기기 [6]
잉게더
03-23
16
정보 나눔
언어 배우기 좋은곳 [3]
0114생일챙겨주세요
03-12
4
정보 나눔
상단영역 반짝이는 효과 주기 [1]
0114생일챙겨주세요
03-07
5
정보 나눔
로고 우측에 이미지 추가
Moderator 우연의일치
03-07
11
03-06
26
정보 나눔
이모티콘 커스텀 CSS [10]
왘카
03-06
17
정보 나눔
트게더 상단 배너만들기 [3]
0114생일챙겨주세요
03-05
6
정보 나눔
읽은 글 색상 변경 [1]
Moderator 우연의일치
03-04
3
정보 나눔
공지 배경에 그림 넣는 법
Moderator 우연의일치
03-02
2
정보 나눔
배경에 색이나 이미지 넣을 때 [5]
Moderator 우연의일치
03-02
7
정보 나눔
왼쪽 배너 하단부 라운딩
Moderator 우연의일치
03-02
2
정보 나눔
위로가기 버튼 수정하기 [3]
0114생일챙겨주세요
03-02
7
정보 나눔
CSS 무료소스 사이트
0114생일챙겨주세요
03-02
인기글 글 쓰기