웹솔루션개발 25년 노하우! 해피CGI의 모든것

빛의 방향 조절이 가능합니다. 모앙이 평평한 형태 모양이 오목한 형태 모양이 볼록한 형태 모양이 음각이 형태 위와 같이 다른 형태의 소스도 생성이 가능합니다.

마우스로 꼭지점을 이동해서 원하는 모양으로 변경하고 하단에서 소스를 복사하여 사용이 가능합니다. style="width:300px; height:300px; background: #FF0099; background-image: linear-gradient(45deg,#3023AE 0%,#FF0099 100%); border-radius:30% 70% 70% 30% / 58% 80% 20% 42%;"

클릭하시면 아래와 같은 css가 복사되어 쉽고 빠르게 응용이 가능합니다.

다양한 사이트의 느낌의 박스그림자 CSS 예제가 있습니다. 클릭시 해당 css 소스가 바로 복사가 됩니다. 디자이너가 아니더라도 원하는 느낌을 찾아서 클릭해서 아래와 같이 복사된 css를 확인할 수 있습니다.

클릭하면 별점주기가 가능합니다. 라디오버튼으로 구현되어 있습니다. css로 디자인 변경이 가능합니다.

배경이미지를 사용하지 않고 간단하게 기울어진 배경색상을 적용할 수 있습니다. transform(skew(0deg, -10deg)); 부분을 수정해서 기울기를 조절할 수 있습니다. .content{ @include transform(skew(0deg, 20deg)); 텍스트 부분의 기울기는 위의 소스에서 조절이 가능합니다.

L o a d i n g . css로만 구현된 텍스트형 로딩중 표시입니다. html 소스입니다. css 소스입니다. 글자별로 에니메이션에 딜레이를 줘서 작동하고 있습니다.

흔하게 쓰는 메인슬라이드 반응형사이트에서 작게나오거나 반응형이 작동안하실경우 모바일 이미지를 따로 올리거나 css를 따로 작성해야하는 번거로움이 있습니다. 다음소스는 반응형 슬라이드 소스입니다.

스크롤시 별다른 스크립트없이 css만으로 최상단으로 이동이되는 효과입니다. scroll-snap-type와 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type scroll-snap-align을 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align 이용하여 스냅을 이용하여 스크롤시 지정한 포인트로 바로 이동할 수 있습니다. 아래의 링크에서 예제를 확인하실 수 있습니다. https://codepen.io/serranoarevalo/pen/xxdYBxZ 네이버 또는 구글에서 Css Scrollsnap으로 검색해보시면 다양한 자료를 확인하실 수 있습니다 ^^

클릭시 아래처럼 선택된 카드가 확장됩니다. css로 쉽게 가로사이즈 변경이 가능합니다. 마우스 드래그 또는 클릭으로 슽라이드 이동이 가능합니다.