홈페이지 헤더에 css 그라데이션으로 바꾸기

Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

홈페이지 헤더에 css 그라데이션으로 바꾸기

7 주퍼 7 331 2 0

이래저래 찾다가 소스를 올려봅니다.


네이버접속하면은여 상단 바(2020/04/26일 기준) 보시면 녹색 부분의 그라데이션이 보이는데요..

이부분을 헤더에 배경컬로로 지정해주시면 됩니다.


-------------------------------------- 사진은 블루베이직테마를 적용한 사진입니다. 헤더부분을 찾으신후 "배경색상만"을 아래의 코드로 바꿔주세요. 색상은 사용하시는분들의 색에 맞춰주세요.."#ff04a3"  그리고 "120deg"이부분은 시계의 다이얼수치로 보시면서 각도를 정해보세요.. 0도에서180도 값으로요. 저는 120도로 적용했습니다. 그리고  "로그인쪽"도 박스를 적용해서 바꿔보니 심심치 않습니다.ㅎㅎ 스마트폰에 적용해 보니 색다르네요. 아미나의 홍보를위해서! 바꿔보세요. -----------


예시) 적용 파일 : /thema/Blue_Basic/colorset/"본인의컬러셋파일" 적용함.


하지만.. 컬러셋말고도 적용하고자하시는 배경에 넣으셔도 될듯합니다. 외부로그인에 임의의 박스를 만들어서 해봐도 잘됩니다. 


---------------------------------- 소스적용 ------------------------------

.pc-header {

        background: yellow;
        background: -webkit-repeating-linear-gradient(120deg, #ff04a3, #f7ab27 100%, #ff3366 100%);
        background: -moz-repeating-linear-gradient(120deg, #ff04a3, #f7ab27 100%, #ff3366 100%);
        background: -o-repeating-linear-gradient(120deg, #ff04a3, #f7ab27 100%, #ff3366 100%);
        background: repeating-linear-gradient(120deg, #ff04a3, #f7ab27 100%, #ff3366 100%);
}


-----------------------------------------------------------------------------


결론 : 단색으로 공간차지할때보다는 은근히 단순하지 않아서 좋아보입니다.

아시는분들께서는 넘어가시구요.. 모르시는분들 적용해서 마음에 드시면 추천 부탁합니다.

글적는데 1시간 걸렸습니다. 저도 아미나를 배우는 입장이라서요!



 

7 Comments
7 주퍼 04.26 01:50  
참고로요 : 로고는 이미지 파일중 png 파일 또는 아이콘으로 만들어서 적용해 보세요. 스마트폰에서는 이미지파일보다는 아이콘을 넣는게 더 실용적입니다. 이미지를 넣었더니.. 뿌해지는데요.. 이것을 svg파일로 만든다음 아이콘으로 바꿔서 나만의 fa-.. 이걸 적용하니 보기가 깔끔하게 나옵니다.  나만의 아이콘을 쉽게 만들수 있는 방법은 추후 다시 올리겠습니다. 여기 활용팁에도 있습니다만.. 세월이 흘러서 조금 바뀐듯합니다. 폰트어썸을 가지고 오는것보다는 나만의 폰트어썸을 만들어서 사용해보는것도 좋지않을까 해서요.. 아미나보드 회원님들께 알리고자..
우와 감사합니다!
19 하늘새는 04.26 09:04  
잘 활용하겠습니다. 감사합니다.
25 dawn 04.26 13:36  
오 감사합니다.
5 에비시 05.12 10:19  
아미나빌더말고~~

나리야 빌더에서도 가능할까요?
7 주퍼 05.14 14:35  
네. 스타일 시트부분이라 상관없습니다.
1 맥북에어 07.16 02:47  
인스타그램 느낌 나네요
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand