[CSS] DIV 애니메이션 그라데이션 테두리 효과 (feat. 애드블록 경고 알림 팝업)

안녕하세요. 오늘은 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 태그의 겹친 순서 위치를 정해줘야합니다.