css-objects/colgate-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
<!DOCTYPE html>
<html>
<head>
<style>
div.col-body{
    width: 280px;
    height: 80px;
    background-color: rgba(240,0,0,1);
    border: 1px solid black;
    padding:0;
}

div.col-body{
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
    margin:auto;
    position:relative;
}
h1.colgate
{
font-size:4em;
margin:0;
transform: skewX(20deg);
position:absolute;
top:50%;
font-weight:bold;
left:50%;
color:white;
font-family:arial;
transform:translate(-50%,-50%);
}
div.reg
{
font-family:arial;
font-size:20px;
color:white;
position:absolute;
left:92%;
top:18%
}
</style>
</head>
<body>

<div class="col-body">
<h1 class = "colgate"><em>Colgate</em></h1>
<div class ="reg">&reg;</div>
</div>

</body>
</html>