Film multimedia interface
1 .gg-film,
2 .gg-film::after { 3 display: block;
4 box-sizing: border-box;
5 border-radius: 3px 6 } 7 8 .gg-film { 9 border: 2px solid;
10 position: relative;
11 transform: scale(var(--ggs,1 ));
12 width: 22px ;
13 height: 18px 14 } 15 16 .gg-film::after { 17 content: "";
18 position: absolute;
19 width: 2px ;
20 height: 2px ;
21 background: currentColor;
22 left: 2px ;
23 top: 2px ;
24 box-shadow:
25 0 4px 0 ,
26 0 8px 0 ,
27 12px 0 0 ,
28 12px 4px 0 ,
29 12px 8px 0 30 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path 9 d="M6 7 C5.44772 7 5 7.44772 5 8 C5 8.55228 5.44772 9 6 9 C6.55228 9 7 8.55228 7 8 C7 7.44772 6.55228 7 6 7 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M17 8 C17 7.44772 17.4477 7 18 7 C18.5523 7 19 7.44772 19 8 C19 8.55228 18.5523 9 18 9 C17.4477 9 17 8.55228 17 8 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M6 11 C5.44772 11 5 11.4477 5 12 C5 12.5523 5.44772 13 6 13 C6.55228 13 7 12.5523 7 12 C7 11.4477 6.55228 11 6 11 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M17 12 C17 11.4477 17.4477 11 18 11 C18.5523 11 19 11.4477 19 12 C19 12.5523 18.5523 13 18 13 C17.4477 13 17 12.5523 17 12 Z" 22 fill="currentColor" 23 /> 24 <path 25 d="M6 15 C5.44772 15 5 15.4477 5 16 C5 16.5523 5.44772 17 6 17 C6.55228 17 7 16.5523 7 16 C7 15.4477 6.55228 15 6 15 Z" 26 fill="currentColor" 27 /> 28 <path 29 d="M17 16 C17 15.4477 17.4477 15 18 15 C18.5523 15 19 15.4477 19 16 C19 16.5523 18.5523 17 18 17 C17.4477 17 17 16.5523 17 16 Z" 30 fill="currentColor" 31 /> 32 <path 33 fill-rule="evenodd" 34 clip-rule="evenodd" 35 d="M4 3 C2.34315 3 1 4.34315 1 6 V18 C1 19.6569 2.34315 21 4 21 H20 C21.6569 21 23 19.6569 23 18 V6 C23 4.34315 21.6569 3 20 3 H4 ZM20 5 H4 C3.44772 5 3 5.44772 3 6 V18 C3 18.5523 3.44772 19 4 19 H20 C20.5523 19 21 18.5523 21 18 V6 C21 5.44772 20.5523 5 20 5 Z" 36 fill="currentColor" 37 /> 38 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledFilm = styled.i` 5 &, 6 &::after { 7 display: block;8 box-sizing: border-box;9 border-radius: 3px ;10 } 11 & { 12 border: 2px solid;13 position: relative;14 transform: scale(var(--ggs, 1 ));15 width: 22px ;16 height: 18px ;17 } 18 &::after { 19 content: '';20 position: absolute;21 width: 2px ;22 height: 2px ;23 background: currentColor;24 left: 2px ;25 top: 2px ;26 box-shadow: 0 4px 0 , 0 8px 0 , 12px 0 0 , 12px 4px 0 , 12px 8px 0 ;27 } 28 ` 29 30 export const Film = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 31 (props, ref) => { 32 return ( 33 <> 34 <StyledFilm { ...props} ref={ ref} icon-role="film" /> 35 </> 36 ) 37 } , 38 ) 39
Film turned into an amazing CSS icon built by practicing features like: .gg-film, border-radius, transform, width, height, background, box-shadow,
