Skip to content

Commit 369e968

Browse files
LintangWisesaLintangWisesa
committed
position
1 parent 62b67cc commit 369e968

10 files changed

+266
-0
lines changed

‎4_transform.css

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.area {
2+
height: 100px;
3+
width: 100px;
4+
background-color: blue;
5+
margin: 20px;
6+
}
7+
8+
#boxTranslasi {
9+
transform:
10+
translate(100px, 100px);
11+
}
12+
13+
#boxRotasi {
14+
transform:
15+
rotate(45deg);
16+
}
17+
18+
#boxScale {
19+
transform:
20+
scale(0.5,0.5);
21+
}
22+
23+
#boxSkew {
24+
transform:
25+
skew(10deg, 10deg);
26+
}
27+
28+
#boxMulti {
29+
transform:
30+
translate(0px, 100px)
31+
rotate(60deg)
32+
scale(0.75, 0.5)
33+
skew(20deg, 20deg)
34+
}

‎4_transform.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Test CSS</title>
8+
<link rel="stylesheet"
9+
type="text/css"
10+
href="4_transform.css">
11+
</head>
12+
<body>
13+
<!-- box original -->
14+
<div class="area">
15+
</div>
16+
17+
<!-- translasi -->
18+
<p>Translasi(100px, 100px)</p>
19+
<div class="area" id="boxTranslasi">
20+
</div>
21+
22+
<!-- rotasi -->
23+
<p>Rotasi(45deg)</p>
24+
<div class="area" id="boxRotasi">
25+
</div>
26+
27+
<!-- scale -->
28+
<p>Scale</p>
29+
<div class="area" id="boxScale">
30+
</div>
31+
32+
<!-- skew -->
33+
<p>Skew</p>
34+
<div class="area" id="boxSkew">
35+
</div>
36+
37+
<!-- multiple transform -->
38+
<p>Multiple transform</p>
39+
<div class="area" id="boxMulti">
40+
</div>
41+
42+
<br><br><br><br><br><br>
43+
</body>
44+
</html>

‎5_3dtransform.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.box {
2+
height: 100px;
3+
width: 100px;
4+
margin: 10px;
5+
background-color: lightcoral;
6+
}
7+
8+
#translasi3d {
9+
transform:
10+
perspective(700px)
11+
translateX(100px)
12+
translateY(100px)
13+
translateZ(-2000px)
14+
}
15+
16+
#rotasi3d {
17+
transform:
18+
perspective(700px)
19+
rotateX(45deg)
20+
rotateY(60deg)
21+
rotateZ(45deg)
22+
}

‎5_3dtransform.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Test CSS</title>
8+
<link type="text/css"
9+
rel="stylesheet"
10+
href="5_3dtransform.css">
11+
</head>
12+
<body>
13+
<div class="box"></div>
14+
15+
<p>Translasi 3d</p>
16+
<div class="box" id="translasi3d">
17+
</div>
18+
19+
<p>Rotasi 3d</p>
20+
<div class="box" id="rotasi3d">
21+
</div>
22+
</body>
23+
</html>

‎6_transisi.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.box{
2+
width: 100px;
3+
height: 100px;
4+
background-color: lightseagreen;
5+
transition: 1s 1s;
6+
}
7+
8+
.box:hover {
9+
background-color: goldenrod;
10+
height: 200px;
11+
transform:
12+
rotate(45deg);
13+
}

‎6_transisi.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Test CSS</title>
8+
<link rel="stylesheet"
9+
type="text/css"
10+
href="6_transisi.css">
11+
</head>
12+
<body>
13+
<div class="box"></div>
14+
</body>
15+
</html>

‎7_posisi.css

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.boxA {
2+
background-color: lightskyblue;
3+
padding: 10px;
4+
color: blue;
5+
margin-bottom: 30px;
6+
}
7+
8+
.boxB {
9+
background-color: lightpink;
10+
padding: 10px;
11+
color: red;
12+
}
13+
14+
#box2b {
15+
position: relative;
16+
top: 20px;
17+
left: 20px;
18+
}
19+
20+
#box3b {
21+
position: absolute;
22+
top: 20px;
23+
left: 20px;
24+
}
25+
26+
#box4b {
27+
position: fixed;
28+
top: 50px;
29+
left: 50px;
30+
}

‎7_posisi.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Test CSS</title>
8+
<link rel="stylesheet"
9+
type="text/css"
10+
href="7_posisi.css">
11+
</head>
12+
<body>
13+
<h1>
14+
Test positioning
15+
</h1>
16+
17+
<div class="boxA">
18+
Box 1A
19+
<div class="boxB">
20+
Box 1B
21+
</div>
22+
</div>
23+
24+
<p>Relative Position</p>
25+
<small>Relative terhadap parent tag</small>
26+
<div class="boxA">
27+
Box 2A
28+
<div class="boxB" id="box2b">
29+
Box 2B
30+
</div>
31+
</div>
32+
33+
<p>Absolute Position</p>
34+
<small>Absolute terhadap body tag</small>
35+
<div class="boxA">
36+
Box 3A
37+
<div class="boxB" id="box3b">
38+
Box 3B
39+
</div>
40+
</div>
41+
42+
<p>Fixed Position</p>
43+
<!-- <small>Absolute terhadap body tag</small> -->
44+
<div class="boxA">
45+
Box 4A
46+
<div class="boxB" id="box4b">
47+
Box 4B
48+
</div>
49+
</div>
50+
51+
52+
</body>
53+
</html>

‎8_col.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.kolom {
2+
column-count: 3;
3+
column-gap: 100px;
4+
column-rule: 10px double blue;
5+
}

‎8_col.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Test CSS</title>
8+
<link rel="stylesheet"
9+
type="text/css"
10+
href="8_col.css">
11+
</head>
12+
<body>
13+
<h1>Test columns</h1>
14+
15+
<article class="kolom">
16+
<main>
17+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti quasi temporibus et aperiam quae sit quisquam dignissimos assumenda doloribus porro? Dolor, eveniet dolores porro consectetur praesentium reprehenderit aspernatur expedita eum!</p>
18+
</main>
19+
<main>
20+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae iste eius eum, reprehenderit, excepturi unde laborum quod iusto voluptate recusandae culpa, quo praesentium! Illo, quaerat libero. At vero ratione quos.</p>
21+
</main>
22+
<main>
23+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem vitae deserunt praesentium suscipit quibusdam tempora, repellat officiis eveniet dolores, nostrum maiores itaque fuga sunt, cum inventore. Sunt sed at voluptate.</p>
24+
</main>
25+
</article>
26+
</body>
27+
</html>

0 commit comments

Comments
 (0)