목록전체 글 (50)
공부하자
기하학적인 무늬나 눈송이, 하늘에 떠있는 별 같은 효과를 배경으로 넣고 싶을 때 사용 사이트 내에서 이것저것 조절도 가능하다. vincentgarreau.com/particles.js/ particles.js - A lightweight JavaScript library for creating particles A lightweight JavaScript library for creating particles. vincentgarreau.com 사용법 github.com/VincentGarreau/particles.js/ VincentGarreau/particles.js A lightweight JavaScript library for creating particles - VincentGarreau/pa..
css를 이용하여 이미지에 filter 효과를 줄 수 있다. 대표적으로 투명도, 블러(blur)나 흑백 효과 같은 것을 줄 수 있으며 수치는 0부터 점차 커질수록 효과를 많이 줄 수 있다. none 기본 값, 효과 없음 blur(px) 이미지에 흐림 효과를 적용 값이 클수록 더 흐릿해지며 값을 지정하지 않으면 0으로 인식합니다. brightness(%) 이미지의 밝기를 조정 0%는 이미지를 완전히 검은색으로 만듭니다. 100%(1)는 기본값이며 원본 이미지를 나타냅니다. 100%를 초과하는 값은 더 밝은 결과를 제공합니다. contrast(%) 이미지의 대비를 조정합니다. 0%는 이미지를 완전히 검은색으로 만듭니다. 100%(1)는 기본값이며 원본 이미지를 나타냅니다. 100%를 초과하는 값은 더 많은 ..
fullpage, slider 외에 다양한 제이쿼리 레퍼런스를 볼 수 있는 사이트 작업시 참고하기 좋을 듯 codejss.tistory.com/ 제이쿼리 레퍼런스 사이트 제이쿼리 플러그인 소개 사이트입니다. codejss.tistory.com
CSS로 타이핑 효과 내기. html 기본 구조 Hello, World CSS .txt_box { position:relative; display: inline-block; overflow-y: hidden; margin:28vh 0; // 원하는 위치가 있다면 margin 값 조절 } .section.con_01 p { //txt style font-size:28px; font-weight:bold; color:#9fd0ca; // 타이핑 효과 border-right:4px solid #fff; // 커서 overflow:hidden; white-space:nowrap; animation: typing 10s steps(27) forwards, // 타이핑 속도 조절 blink-caret .8s ste..
항상 이미지를 잘라서 'background:url(img.png) 0 0 no-repeat;'의 방법으로 사용하곤 했는데 css로 표현이 가능해졌다. CSS로 삼각형 표현하기 css-tricks.com/snippets/css/css-triangle/ CSS Triangle | CSS-Tricks HTML You can make them with a single div. It's nice to have classes for each direction possibility. CSS The idea is a box with zero width and height. The css-tricks.com 색상 등을 수정하여 좀 더 다양한 형태의 삼각형을 만들 수 있다. 말풍선의 꼬리부분이나 목록의 포인트 부분 등에 ..