본문으로 바로가기

안녕하세요. 오늘은 CSS 코드작업을 통해 움직이는 그라데이션 효과를 줄까 합니다.

제가적용할 위치는 바로 애드블록 경고창 부분에 작업을 진행 하려고 합니다. 'ㅡ'


저는 애드블록을 사용하는 유저가 제 블로그 방문시 상단에 경고 알림이 뜨도록 설정을 해두었는데요. 

이번 코드로 조금 더 눈에 띄게 만들어 볼까 합니다.


애드센스 광고차단에 사용되는 애드블록을 사용시 알림팝업 설정하는 방법은 아래 링크를 참조하시면 됩니다.

https://cocosoft.kr/403 - 애드센스 광고차단(Adblock)시 알림창 만들기


참고할 소스 code

저는 주로 codepen.io 이 사이트에서 유용한 소스코드를 참고합니다. 오늘은 아래 코드로 적용해보겠습니다.

See the Pen Animated CSS Gradient Border by Mike Schultz (@mike-schultz) on CodePen.



.gradient-border {
  --borderWidth: 5px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(1.5 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 2s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}



이 소스를 그대로 가져다 쓰면됩니다. 어때유 간단하쥬? 'ㅡ'


[티스토리] → [꾸미기] → [스킨편집] → [Html/Css편집] → [CSS] 부분에 위 소스를 붙여넣기 해주시고


[Html] 부분에서 적용하고 싶은 <div> 박스를 찾아서 이렇게 <div class="gradient-border"> 클래스만 적용을 해주면됩니다.


몇가지 속성은 변경할 수 있습니다. 

--borderWidth: 5px; 이건 테두리의 두께.

border-radius: calc(1.5 * var(--borderWidth)); 이부분은 테두리 모서리 곡율

animation: animatedgradient 2s ease alternate infinite; 이건 애니메이션 속도를 조절 할 수 있습니다.

바로 붙여넣기 하셔도 되고 저는 클래스 명만 변경해서 붙여넣기 하겠습니다.


적용이 안되는시는 분들은 z-index 값을 추가해서 div 태그의 겹친 순서 위치를 정해줘야합니다.