css-objects/instagram-logo.html at master · vinodselvin/css-objects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
<style>
            *,
        *:before,
        *:after {
        box-sizing: border-box;
        }
        html,
        body {
        width: 100%;
        height: 100%;
        }

        body {
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
        }
        .instagram {
        background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
        border-radius: .2em;
        font-size: 50vmin;
        height: 1em;
        position: relative;
        width: 1em;
        }
        .instagram:before, .instagram:after {
        color: #fff;
        content: '';
        display: block;
        position: absolute;
        border: .075em solid;
        }
        .instagram:before {
        border-radius: inherit;
        height: .75em;
        -webkit-transform: translate(0.125em, 0.125em);
                transform: translate(0.125em, 0.125em);
        width: .75em;
        }
        .instagram:after {
        border-radius: 1em;
        box-shadow: .2em -.2em 0 -.16em;
        height: .4em;
        -webkit-transform: translate(0.3em, 0.3em);
                transform: translate(0.3em, 0.3em);
        width: .4em;
        }
</style>
<body>
    <div class="instagram"/>
</body>
</html>