- Scena: Animation Editor (Main Project)
- Moveable: Move tool for Drag & Resize & Rotate.
- Scene.js: JavaScript & CSS timeline-based animation library
- Selecto: Select elements in the drag area using the mouse or touch.
- Infinite Viewer: Document Viewer Component with infinite scrolling
- Guides: Draw ruler and manage guidelines.
- Scene.js Timeline: Represents the timeline of Scene.js. You can control time, properties, and items.
- Ruler: Draw grids and scroll infinitely
- Gesto: drag or pinch in any browser.
css's Introduction
css's People
Contributors
Stargazers
Watchers
css's Issues
CSS 80% JS 20%
- 비중이 CSS가 80%이고 JS 20%인 CSS 스터디입니다.
- CSS의 변화가 JS에 어떤 영향을 끼치는가? 정도의 JS가 포함되어있습니다.
- 평상시 CSS 사용하면서 알고 있는 것과 입사하고 InfiniteGrid를 만들면서 알게 된 것과 CSS 관련 질문받으면서 새로 알게 된 것들을 공유하는 스터디입니다.
- position
- static
- relative
- absolute
- fixed
sticky
- doctype과 변화
- height: 100%;
- scrollTop
- clientSize, offsetSize
- boder
- border, padding, margin, box-sizing
- cssSize, clientSize, offsetSize, getBoundingClientRect
- padding: %
- display (inline, inline-block, block)과 float
- inline
- inline-block
- block
- inline-block과 float의 차이
- inline-block과 font-size 조합
- float:left와 overflow, clear의 조합
- white-space와 display: inline의 조합
- transform, transform-origin
- 수직 정렬
- transform
- vertical-align: middle;
- button
- margin: auto;
- left와 margin의 조합
flex
- clip
- overflow
- z-index
- transition과 will-change
- force layout과 requestAnimFrame
- border를 이용한 도형 만들기
- border-radius를 이용한 원, 타원 만들기
- horizontal / vertical
- box-shadow
19 appearance - 실습 여러가지
CSS 알고 싶은 것
기본 CSS 속성
- position
- static
- relative
- absolute
- fixed
- sticky
- left, right, top, bottom
- opacity
- filter
- display
- none
- block
- inline-block
- inline
- table
- table-cell
- table-row
- flex
- .....
- border-radius
- clip
reset.css
세로 가운데 정렬
CUSTOM UI
- appearance
- checkbox, radiobox
- progressbar
- input
Transform
- transform-origin
matrix- 2D transform
- 3D transform
Transition & Animation & Keyframes
CSS Shape
CSS Shape
Quadrangle
- Square
- Rectangle
- line
- Rounded Rectangle
Circle
- Circle
- fixed boder-radius
- variable(%) border-radius
- seperate border-radius
- half circle
- 1/4 circle
- Oval
- Lukby
Trinagle(border)
- Triangle
- Top
- Left
- Right
- Bottom
- Top-Left
- Top-Right
- Bottom-Left
- Bottom-Right
- Trapezoid
Examples
- Star (5-points)
- Star (N-points)
box-shadow
- a crescent moon
CSS Background
4주차 Circle
9, 10주차
3주차 수직정렬
6주차 sally
7, 8주차 sally 2,3
- sally 몸통
- sally 날개
- sally 다리
sally2.pdf
sally3.pdf
5주차 transform
2주차 display
2주차 display
display.pdf
13주차
11,12주차
1주차 position
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.