- 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
css's Issues
2주차 display
2주차 display
display.pdf
4주차 Circle
9, 10주차
CSS Background
13주차
1주차 position
5주차 transform
6주차 sally
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 - 실습 여러가지
7, 8주차 sally 2,3
- sally 몸통
- sally 날개
- sally 다리
sally2.pdf
sally3.pdf
11,12주차
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
3주차 수직정렬
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
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.