Pure CSS Drawings

林罡北

Eric Lin

Hello everyone

• NTOU 資工系
• 除了前後端，也開發android app
• 立志成為優秀的全端工程師
• 目前的肝還算新鮮...

resume

Agenda

• 主角介紹
• 常用CSS屬性
• 基本幾何
• Demo1 - Facebook icon
• Demo2 - Rocket

今天的主角

link

link

usually used CSS property

div{
      transform: rotate()  or  translate() or skew();
      border-radius: 10% 20% 20% 10% / 40% 50% 50% 40%;
      border-top/left/right/bottom: 2px solid #444;
    
      box-shadow:8px -8px 0 10px #f19b2c;
    
      background: linear-gradient();
      background-image: linear-gradient();
    
      overflow:hidden;
    
      position:relative or absolute;
      z-index: 1;
}

CSS基本幾何

Rectangle

Circle

Rectangular Triangle

Triangle

Trapezoid

Oval

2步驟畫出圖形

• 形狀
• 顏色

Facebook icon

Reference

• the shape of css
• CSS三角形生產器
• Ultimate CSS Gradient Generator
• CSS clip-path maker

THE END

thanks for your attention