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

모서리가 라운드가 아닌 경우모서리를 처리하는 방식Scooped BorderNotched BorderSquare-Cut Border

clip-path: polygon()은 요소의 보이는 영역을 좌표로 잘라내는 방식입니다.기본 사각형은 네 꼭짓점 (0 0, 100% 0, 100% 100%, 0 100%)으로 이루어집니다.이 중 모서리 좌표 하나를 두 개의 좌표로 바꾸면, 그 사이가 직선으로 연결되면서 대각선 컷 모서리가 만들어집니다. clip-path: polygon( 24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); clip-path: polygon( 24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);

그리드 레이아웃 코드를 생성해 줍니다.우측 패널에서 원하는 행과 열을 입력하고 간격을 입력하면 좌측에 레이아웃을 미리보기로 확인할 수 있습니다.코드보기 버튼을 클릭하면 그리드 레이아웃 CSS 와 HTML 소스를 볼 수 있고 복사가 가능합니다.

css 소스입니다.해당사이트에서 또는 첨부파일을 다운로드 하시면 html 소스도 확인 할 수 있습니다.

css 속성인 filter를 이용해서 이미지를 블러처리하는 방법입니다. HTML 구조          Live CSS Blur    Go ahead, resize me.   CSS 소스body {  background: url("https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=")    no-repeat center center fixed;  background-size: cover;} .blur {  background: url("https://images.unsplash.com/photo-1486723312829-f32b4..

원본 부분에 HTML, CSS, JS 코딩한 부분을 입력해줍니다.입력 후 변환 버튼을 클릭해줍니다.변환 버튼을 클릭하면 압축한 코드들이 나옵니다.압축된 코드를 복사하여 교체해주시면 되겠습니다.CSS, JS 도 동일한 방법으로 코드를 압축할 수 있습니다.[CSS][JS]html, js, css 코드를 압축된 코드로 변환하면 웹페이지의 로딩 거리를 줄이고, 서버의 부하를 감소시키며, 웹사이트의 전체적인 효율성을 높일 수 있습니다.

16진수 색상코드나 RGB 색상코드가 아닌 CSS에 지정된 색상명을 확인하고 조합 사용이 가능한 handy colors 정리된 정보입니다. 색상 편집기를 실행할 필요없이, css로 지정된 색상명을 바로 입력하여 사용이 가능하며, 본연의 색상을 조합하여 사용이 가능하네요. 또한 여러 테마별 색상 팔레트도 제공하여, 컨셉에 따른 색상 조합을 선택해서 CSS에 지정된 색상명으로 사용이 가능하네요. 색상명으로 구성하는걸 선호하면 좋은 자료네요.^^

순수 css로 만든 로딩 아이콘 애니메이션 효과입니다. css로 만든 로딩바 애니메이션으로 다양한 효과를 선택해서 쓰면 됩니다.

다음 슬라이드로 넘기게 되면 차트로 되어있는 다음 이미지가 확대 되면서 배경이 바뀌게됩니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. HTML "Lossless Youths" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim. Read More "Estrange Bond" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesen..

스프라이트 시트를 css로사용하여 움직이는 이미지 제작입니다. 소스다운로드 또는 데모페이지를 통해 확인해 보실 수 있습니다. HTML CSS .hi { width: 50px; height: 72px; background-image: url("http://s.cdpn.io/79/sprite-steps.png"); -webkit-animation: play .8s steps(10) infinite; -moz-animation: play .8s steps(10) infinite; -ms-animation: play .8s steps(10) infinite; -o-animation: play .8s steps(10) infinite; animation: play .8s steps(10) infinite; } @..