Pure CSS Drawings

林罡北

Eric Lin

ㄍ

ㄤ

Hello everyone

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

resume

Agenda

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

今天的主角

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;
}