-
Notifications
You must be signed in to change notification settings - Fork 0
/
html5_css3.html
126 lines (126 loc) · 5.24 KB
/
html5_css3.html
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
HTML5 CSS3
</title>
<style>
* (margin: 0px; padding: 0px;)
header, nav, article, footer {display: block;}
h1#h1-id {color: blue;}
h1.h1-class {color: green;}
h1[h1-attribute] {color: red;}
h1[h1-attribute*="xyz"] {color: orange;}
p:nth-child(odd) {font-weight: bold; font-style: italic;}
h2.h2-class-negation {color: pink;}
h2:not(.h2-class-negation) {color: pink; text-decoration: line-through;}
body {text-align: center; font-family: Tahoma;}
#wrapper {border: 0px; width: 600px; margin: 40px auto; text-align: left;}
#header {background: yellow; border: 5px solid black; padding: 20px;}
#nav-inline {text-align: center;}
#nav-inline ul {padding: 0px;}
#nav-inline li {display: inline-block; list-style: none; padding: 15px;}
#article-odds {background: orange; padding: 10px; float: left; width: 40%; height: 250px; margin: 0px 0px 15px 0px;}
#article-negation {background: grey; padding: 10px; float: right; width: 40%; height: 250px; margin: 0px 0px 15px 0px;}
#footer {clear: both; text-align: center; padding: 5px; border-top: 5px dashed black;}
article footer {font-weight: bold; color: white; text-align: right;}
#wrapper-webkit {border: 0px; padding: 0px; margin: 5px; width: 80%; margin: 20px auto; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-flex: 1;}
#article-webkit {border: 2px solid black; padding: 5px; margin: 5px; -webkit-box-flex: 1; text-align: center; background: lightgrey;}
#wrapper-box-order {display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-box-pack: center;}
#box {border: 2px dashed red; padding: 5px; margin: 5px;}
#flex-yes {border: 2px solid black; padding: 5px; margin: 5px; -webkit-box-flex: 1; text-align: center; background: lightgrey; -webkit-box-flex: 1; width: 100px; height: 50px;}
#flex-no {border: 2px solid black; padding: 5px; margin: 5px; -webkit-box-flex: 1; text-align: center; background: lightgrey; -webkit-box-flex: 0; width: 100px; height: 50px;}
#round-box-shadow {display: block; width: 600px; margin: 20px auto; padding: 20px; border: 2px solid red; background: yellow; border-radius: 50px; color: red; font-weight: bold; box-shadow: 5px 5px 5px;}
#box-gradient {display: block; width: 600px; margin: 20px auto; padding: 20px; border: 0px; background-image: radial-gradient(black 0%, grey 75%); color: white; font-weight: bold;}
#box-outline {display: block; width: 100px; margin: 20px auto; padding: 10px; border: 10px solid lightgrey; background: white; color: black; font-weight: bold; outline: 10px solid grey;}
#box-scale {display: block; width: 200px; margin: 20px auto; padding: 10px; border: 0px; background: orange; color: black; font-weight: bold; transform: scale(-1, 1);}
#box-skew {display: block; width: 200px; margin: 20px auto; padding: 10px; border: 0px; background: orange; color: black; font-weight: bold; transform: skew(20deg);}
#box-rotate {display: block; width: 200px; margin: 50px auto; padding: 10px; border: 0px; background: orange; color: black; font-weight: bold; transform: rotate(15deg);}
#box-hover {display: block; width: 200px; margin: 100px auto; padding: 10px; border: 0px; background: orange; color: black; font-weight: bold; transition: transform 2s;}
#box-hover:hover {transform: rotate(360deg);}
</style>
</head>
<body>
<div id="wrapper">
<header id="header">
<h1 id="h1-id">h1 style by id</h1>
<h1 class="h1-class">h1 style by class</h1>
<h1 h1-attribute="abc">h1 style by attribute</h1>
<h1 h1-attribute="xyz">h1 style by attribute regex</h1>
</header>
<nav id="nav-inline">
<ul>
<li>inline list1</li>
<li>inline list2</li>
<li>inline list3</li>
</ul>
</nav>
<article id="article-odds">
<p>p style odds only</p>
<p>p style odds only</p>
<p>p style odds only</p>
<p>p style odds only</p>
<p>p style odds only</p>
<footer>
article footer
</footer>
</article>
<article id="article-negation">
<h2 class="h2-class-negation">h2 style negation</h2>
<h2 class="any-other-class">h2 style negation</h2>
<h2 class="h2-class-negation">h2 style negation</h2>
<h2 class="any-other-class">h2 style negation</h2>
<footer>
article footer
</footer>
</article>
<footer id="footer">
<h3>footer</h3>
</footer>
</div>
<div id="wrapper-webkit">
<article id="article-webkit">
box flex
</article>
<article id="article-webkit">
box flex
</article>
<article id="article-webkit">
box flex
</article>
</div>
<div id="wrapper-box-order">
<div id="box">box1 order</div>
<div id="box">box2 order</div>
<div id="box">box3 order</div>
<div id="box">box4 order</div>
</div>
<div id="wrapper-webkit">
<div id="flex-no">no flex</div>
<div id="flex-yes">flex!</div>
<div id="flex-no">no flex</div>
</div>
<div id="round-box-shadow">
border radius and box shadow
</div>
<div id="box-gradient">
gradient
</div>
<div id="box-outline">
outline
</div>
<div id="box-scale">
scale
</div>
<div id="box-skew">
skew
</div>
<div id="box-rotate">
rotate
</div>
<div id="box-hover">
hover
</div>
</body>
</html>