본문 바로가기

분류 전체보기

 (226)
Google Material icon - 가끔 디자이너가 시안에 넣지 않은 아이콘을 퍼블리싱 하다가 추가해야 하는 경우가 있다. 대부분의 경우 디자이너에게 요청 하지만, 간단한 기능 버튼에 들어가는 아이콘들은 하나의 백터 기반 아이콘 라이브러리(?)를 포함시켜 두고 퍼블리셔가 넣기도 한다. - 우리 회사는 xeicon을 주로 쓰는데, 폰트파일을 다 합해도 1mb 정도의 가벼운 폰트다. 사용 방법도 진짜 간단함. 그래서 아마 쓰기 시작한듯? - 많이 쓰이는 goolgle marerial icon은 종류가 굉장히 다양하고 (900개 넘음) 세련됬으며, 보기 편하고 customize도 미리 해볼수 있는 라이브러리도 있다. - 근데 폰트 크기가 너무크다................... cdn으로 쓸거 아니면 잘 안쓸듯. 1.라이브러리 : http..
간단한 box shadow css 생성 사이트 https://www.cssmatic.com/box-shadow Box Shadow CSS Generator | CSSmatic CSSmatic is a non-profit project, made by developers for developers Are you a web developer? Would you like to collaborate on CSSMatic? www.cssmatic.com
간단한 말풍선 css 생성 사이트 https://cssarrowplease.com/ CSS Arrow Please - By Simon Hoejberg - @shojberg Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. Fork me on Github cssarrowplease.com
mouse over시 설명 텍스트가 따라다니는 갤러리 https://codepen.io/kathykato/pen/KRQOKY 직접 링크 들어가서 확인 필요 See the Pen Gallery by Katherine Kato (@kathykato) on CodePen.
마우스커서 따라다니는 도형 + overlay 효과 https://codepen.io/ig_design/pen/VgaXaY 이건 직접 링크로 들어가서 봐야 커서가 제대로 작동함. See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.
센스있는 go 버튼 https://codepen.io/kathykato/pen/rZRaNe 사람들이 많이 좋아요 누른 펜은 이유가 있다! See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.
hover slide https://codepen.io/ig_design/pen/MRbJWW See the Pen Hover slider (dark/light) - ver 3 by Ivan Grozdic (@ig_design) on CodePen.
감각적인 card hover https://codepen.io/hexagoncircle/pen/XWbWKwL See the Pen Card Hover Interactions by Ryan Mulligan (@hexagoncircle) on CodePen.
클릭한 카드만 띄우기 + detail 보이기 https://codepen.io/candroo/pen/wKEwRL See the Pen 3D Fold out reveal by Andrew Canham (@candroo) on CodePen.
gradient buttons https://codepen.io/pirrera/pen/bqVeGx See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.
css hover effects https://codepen.io/honglio/pen/kWXXvj See the Pen CSS3 Hover Effects by honglio (@honglio) on CodePen.
기본적인 responsive table https://codepen.io/geoffyuen/pen/DZxEKy See the Pen Responsive Table by Geoff Yuen (@geoffyuen) on CodePen.
텍스트 나타나는 효과 https://codepen.io/Sonick/details/AwXJdM See the Pen CSS3 Text Animation Effect by Nick Mkrtchyan (@Sonick) on CodePen.
label이 있는 gauage차트 highchart guage chart with label See the Pen highchart guage chart with label by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '90%'], size:..
5단계 gauage chart highchart 5steps guage chart See the Pen highchart 5steps guage chart by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '90%'], size: '15..
series 팁 (차트 hover액션 false / legend와 차트 영역에서 숨기기) series: [{ name: '데이터1', data: [100, 70], enableMouseTracking: false, // 차트에 mouseover 액션 false }, { name: '데이터2', data: [50, 20], // 데이터 값 설정 visible: false, // 초기에 차트영역에서 숨김 "showInLegend": false, // legend에서 보이지 않게 숨김 }]
간단한 multi yAxis 차트 highchart dual + multi yAxis chart See the Pen highchart simple dual chart by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { xAxis: { categories: ['카테고리1', '카테고리2', '카테고리3'], }, yAxis: [{ title: { text: '시리즈1 y축' }, labels: { format: '{value}개' // y축 format 설정 }, }, { title: { text: '시리즈2 y축' }, labels: { format: '{value}원' // y축 format..
비교 차트 highchart compare chart See the Pen highchart compare chart by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) , jquery 필요 //chart Highcharts.chart('chart', { chart: { type: 'column', marginTop: 30, marginBottom: 80, }, title: null, subtitle: null, xAxis: { categories: ['before', 'after', ], plotBands: [{ from: 0, // Start of the plot band to: 1, // End ..
일주일간 15분 단위로 데이터 넣기 highchart 1week data (every 15 minutes) 챗지피티랑 스무번은 넘게 대화하면서 겨우 겨우 만든 소스 See the Pen highchart 1week data (evety 15 minutes) by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) // x축 카테고리, 데이터 생성 var data = []; var dayLabels = ["월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"]; for (var day = 0; day < 7; day++) { for (var hour = 0; hour < 24; hour++) { for (var minute = 0;..
legend에서 특정 item의 click이 안되게 할때 옵션 series: [{ name: '시리즈1', data: [1,2,3] }, { name: '시리즈2 (legend클릭안됨)', data: [1,2,3], events: { legendItemClick: function() { return false; } } }]
맨위로
Total : Today :
728x90

티스토리툴바