.final__clip-image-1 {
     -webkit-clip-path: circle(50% at 50% 50%);
             clip-path: circle(50% at 50% 50%);
   }


   .final__clip-image-2 {
     -webkit-clip-path: polygon(0% 0%,
                                100% 0%,
                                100% 75%,
                                75% 75%,
                                75% 100%,
                                50% 75%,
                                0% 75%);
             clip-path: polygon(0% 0%,
                                100% 0%,
                                100% 75%,
                                75% 75%,
                                75% 100%,
                                50% 75%,
                                0% 75%);
   }


   .final__clip-image-3 {
     -webkit-clip-path: polygon(20% 0%,
                                0% 20%,
                                30% 50%,
                                0% 80%,
                                20% 100%,
                                50% 70%,
                                80% 100%,
                                100% 80%,
                                70% 50%,
                                100% 20%,
                                80% 0%,
                                50% 30%);
             clip-path: polygon(20% 0%,
                                0% 20%,
                                30% 50%,
                                0% 80%,
                                20% 100%,
                                50% 70%,
                                80% 100%,
                                100% 80%,
                                70% 50%,
                                100% 20%,
                                80% 0%,
                                50% 30%);
   }


   .final__clip-image-4 {
     -webkit-clip-path: polygon(0% 20%,
                                40% 20%,
                                40% 0%,
                                100% 50%,
                                40% 100%,
                                40% 80%,
                                0% 80%);
             clip-path: polygon(0% 20%,
                                40% 20%,
                                40% 0%,
                                100% 50%,
                                40% 100%,
                                40% 80%,
                                0% 80%);
   }

.shadow-typo {
        position: relative;
        display: inline-block;
        font-size: 4em;
        text-transform: uppercase;
        color: #00b3b4;
        text-shadow: 3px 3px 0px #e7eef1, 8px 8px 0px rgba(0, 0, 0, 0.1);
   }

   .threedee-typo {
        font-size: 4em;
        text-transform: uppercase;
        color: #f2395a;
        -webkit-transform: skew(-5deg, -5deg) rotate(5deg);
                transform: skew(-5deg, -5deg) rotate(5deg);
        -webkit-transform-origin: center center;
                transform-origin: center center;
        text-shadow: 1px 1px #d10e31,
                    2px 2px #d10e31,
                    3px 3px #d10e31,
                    4px 4px #d10e31,
                    5px 5px #d10e31,
                    6px 6px #d10e31,
                    7px 7px #d10e31,
                    8px 8px #890920,
                    9px 9px #890920,
                    10px 10px #890920,
                    11px 11px 15px rgba(0,0,0,0.5);
  }

Day2

Sexy Typograping

 

'스터디 > WEB' 카테고리의 다른 글

Clipping CSS - Day3  (0) 2019.05.22
Css next grid 클론 ( 1 ~ 5 )  (0) 2018.11.17
PostCSS 스터디 정리 ( 2주차 )  (0) 2018.11.12
Web 디자인시 유의 할 점 정리  (0) 2018.11.09
CSS Next 정리 ( 부산 1주차 HTML + CSS 스터디 )  (0) 2018.11.07

+ Recent posts