# Web Design
## VS Code extensions
- Live Server
## HTML
Object = Attributes + Methods(behavior)
All tags are object.
### Skeleton(Boilerplate)
- head: meta charset, meta name, title
- body: h1-h6, p, anchor, img, ul/ol
Chinese (Traditional): lang=zh-Hant
```htmlembedded=
<!-- .html -->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Title</title>
</head>
<body></body>
</html>
```
common tags:
```htmlembedded=
<!-- .html -->
<head lang="en">
<meta name="robots" content="index, sollow" />
<meta name="description" content="welcome" />
<meta name="author" content="Me" />
</head>
```
### Common tag
- h1-h6 and p
```htmlembedded=
<!-- .html -->
<body>
<h1
class="heading"
style="color: blueviolet"
onclick="alert('You click.')"
>
heading
</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
<p>
paragraph
</p>
</body>
```
- anchor
The <base> tag specifies the base URL and/or target for all relative URLs in a document.
The <base> tag must have either an href or a target attribute present, or both.
- _self: the current browsing context. (Default)
- _blank: usually a new tab, but users can configure browsers to open a new window instead.
```htmlembedded=
<!-- .html -->
<head lang="en">
<base target="_blank">
</head>
<body>
<h1>link</h1>
<a target="_self" href="https://hackmd.io/TP3JyjJaR5e6GVbpIaWMHw">ref</a>
<a href="https://www.google.com.tw/?hl=zh_TW">Google</a>
</body>
```
- img
```htmlembedded=
<!-- .html -->
<body>
<h1>picture</h1>
<img width="600" heught="440" src="./images/001.jpg" alt="cute">
</body>
```
- List
```htmlembedded=
<!-- .html -->
<body>
<h2>list</h2>
<ol>
<li>1: one</li>
<li>2: two</li>
</ol>
<ul>
<li>frist: one</li>
<li>second: two</li>
</ul>
</body>
```
- Table
```htmlembedded
<!-- .html -->
<head lang="en">
<style>
table,
th,
td {
border-collapse: collapse;
border: 1px solid black;
}
th,
td {
padding: 0.25rem;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">Title of table</th>
</tr>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
<tr>
<td rowspan="4">row-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!-- <td>3-1</td> -->
<td>3-2</td>
<td>3-3</td>
</tr>
<tr>
<!-- <td>4-1</td> -->
<td>4-2</td>
<td>4-3</td>
</tr>
<tr>
<!-- <td>5-1</td> -->
<td>5-2</td>
<td>5-3</td>
</tr>
</table>
</body>
```
- Form
```htmlembedded=
<!-- .html -->
<body>
<h1>Form</h1>
<form action="" method="">
<label for="myname">Name</label>
<input id="myname" type="text" name="InputName" />
<br/>
<label for="telephone">Telephone Number</label>
<input id="telephone" type="text" name="TelephoneNumber" value="ex" />
<br/>
<button type="submit">Submit</button>
<br/>
</form>
<form action="" method="POST">
<label for="account">Account</label>
<input id="account" type="text" name="Account" value="ex" />
<br/>
<label for="password">Password</label>
<input id="password" type="text" name="Password" />
<br/>
<button type="submit">Submit</button>
<br/>
</form>
</body>
```
common input types: checkbox, email, file, number, password, radio, range
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
common input attributes: checked, max, min, maxlength, minlength, placeholder, required, value
```htmlembedded=
<!-- .html -->
<body>
<form action="" method="GET">
<label for="myname">Name</label>
<input
id="myname"
type="text"
name="InputName"
placeholder="Please input real name." />
<br/>
<input id="male" type="checkbox" name="Wgender" value="male" />
<label for="male">Male</label>
<input id="female" type="checkbox" name="Wgender" value="female" />
<label for="female">Female</label>
<input id="other" type="checkbox" name="Wgender" value="other" />
<label for="other">Other</label>
<br/>
<input id="male" type="radio" name="gender" value="male" required />
<label for="male">Male</label>
<input id="female" type="radio" name="gender" value="female" />
<label for="female">Female</label>
<input id="other" type="radio" name="gender" value="other" />
<!-- <input id="other" type="radio" name="gender" value="other" checked /> -->
<label for="other">Other</label>
<br/>
<label for="profile">Profile picture</label>
<input id="profile" type="file" name="profile" />
<br/>
<label for="age">Age</label>
<input
id="age"
type="number"
name="age"
value="18"
min="0"
max="130"
required
step="0.1"
/>
<br/>
<label for="email">Email</label>
<input
id="email"
type="email"
name="email"
value="example@gmail.com"
required />
<br/>
<input id="checkbox" type="checkbox" name="news" value="newspaper" />
<label for="checkbox">Subscribe to the newsletter</label>
<br/>
<input
id="checkbox"
type="checkbox"
name="sentnews"
value="sent"
checked
/>
<label for="checkbox">Sent news to the email</label>
<br/>
<label for="security">Security code</label>
<input
id="security"
type="password"
name="scode"
minlength="8"
maxlength="16" />
<br/>
0
<input
type="range"
min="0"
max="100"
step="5"
/>
100
<br/>
<button type="submit">Submit</button>
<br/>
</form>
</body>
```
select option, datalist, textarea
```htmlembedded=
<!-- .html -->
<body>
<form>
<label for="gender">Gender</label>
<select name="gender" id="gender" required>
<option></option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<br/>
<label for="area">Area</label>
<input list="areaList" type="text" name="area" id="area" />
<datalist id="areaList">
<option value="Keelung">Keelung</option>
<option value="Taipei">Taipei</option>
<option value="NewTaipei">NewTaipei</option>
</datalist>
<br/>
<label for="suggestion">Suggestion</label>
<br/>
<textarea
name="suggestion"
id="suggestion"
cols="30"
rows="10"
placeholder="Thanks for your suggestion."
></textarea>
<br/>
<button type="submit">Submit</button>
<br/>
</form>
</body>
```
### Other HTML ideas
- Comment
```htmlembedded=
<!-- .html -->
<!-- comment -->
```
- Block and Inline Elements
Every HTML element has a default display value, depending on what type of element it is. There are two display values: block and inline.
[HTML Block and Inline Elements](https://www.w3schools.com/html/html_blocks.aspv)
- div, br, hr
- entity codes
[HTML Symbols](https://www.htmlsymbols.xyz/)
- index.html
- icon
```htmlembedded=
<!-- .html -->
<head>
<!-- Page icon goes here -->
<link rel="shortcut icon" href="./images/003.png">
<link rel="bookmark" href="./images/003.png">
</head>
```
- self closing tag
### lorem
```htmlmixed=
<!-- .html -->
<body>
<p>lorem20</p>
</body>
```
## CSS
### Position of CSS
inline styling, internal styling, external styling
```htmlmixed=
<!-- .html -->
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Title</title>
<!-- Internal Styling -->
<style>
h1 {
color: green;
}
h2 {
color: coral;
}
</style>
<link rel="stylesheet" href="./CSS_basic.css" />
</head>
<body>
<h1>h1 1</h1>
<h1>h1 2</h1>
<h1>h1 3</h1>
<h1 style="color: red;">Inline Styling</h1>
<h2>Internal Styling</h2>
<h3>External Styling</h3>
<p>paragraph</p>
<h4>h4 1</h4>
<h4>h4 2</h4>
<h4>h4 3</h4>
<h5>h5 1</h5>
<h5>h5 2</h5>
<h5>h5 3</h5>
<h6>Element selector</h6>
</body>
```
```css=
/* .css */
/* external Styling */
h3 {
color: darkorchid;
}
p {
color: rgb(0, 255, 255);
}
h4 {
color: rgba(255, 0, 255, 0.75);
}
h5 {
color: #74eb34;
}
<h6>Element selector</h6>
<h6>h6 2</h6>
<h6>h6 3</h6>
<h6 id="idselector">id selector</h6>
<h6>h6 5</h6>
<h6>h6 6</h6>
<h6 class="Classselector largerText">Class selector</h6>
<h6 class="Classselector">h6 8</h6>
<h6>h6 9</h6>
<h6>h6 10</h6>
<h6 class="mix">h6 11</h6>
<h6>h6 12</h6>
```
### Color Styling in CSS
reserved color, rgb, rgba, hex, hsl
[hex Coloors](https://coloors86.netlify.app/)
### CSS Comment
```css=
/* .css */
/* comment */
```
### CSS Selectors
- Universal selector
```css=
/* .css */
* {
color: plum;
}
```
- Element selector, id selector, Class selector
```css=
/* .css */
/* Element selector */
h6 {
color: crimson;
}
/* id selector */
#idselector {
color: darkkhaki;
}
/* Class selector */
.Classselector {
color: dodgerblue;
}
.largerText {
font-size: 3rem;
}
/* Mix selector */
h6.mix {
color: olive;
}
```
- Grouping selector
```css=
/* .css */
/* Grouping selector */
h5,
h6 {
color: orange;
}
```
- Descendant selector
```html=
<!-- .html -->
<body>
<div class="link1">
<a href="https://www.google.com">Google</a>
</div>
<div class="link2">
<a href="https://www.youtube.com">YouTube</a>
</div>
</body>
```
```css=
/* .css */
/* Descendant selector */
div.link1 a {
color: red;
}
div.link2 a {
color: aqua;
}
```
- Attribute selector
```html=
<!-- .html -->
<body>
<form action="" method="">
<label for="myname">Name</label>
<input id="myname" type="text" name="InputName" />
<br/>
<label for="telephone">Telephone Number</label>
<input id="telephone" type="text" name="TelephoneNumber" value="ex" />
<br/>
<button type="submit">Submit</button>
<br/>
</form>
</body>
```
```css=
/* .css */
/* Attribute selector */
input[type="text"] {
color: red;
}
```
- Pseudo class
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.
common item: hover, active, focus, nth-child()
```html=
<!-- .html -->
<body>
<form>
<label for="suggestion">Suggestion</label>
<br/>
<textarea
name="suggestion"
id="suggestion"
cols="30"
rows="10"
placeholder="Thanks for your suggestion."
></textarea>
<br/>
<button type="submit">Submit</button>
<br/>
</form>
<h2>Table</h2>
<table>
<tr>
<th colspan="3">Title of table</th>
</tr>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
<tr>
<td rowspan="4">row-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!-- <td>3-1</td> -->
<td>3-2</td>
<td>3-3</td>
</tr>
<tr>
<!-- <td>4-1</td> -->
<td>4-2</td>
<td>4-3</td>
</tr>
<tr>
<!-- <td>5-1</td> -->
<td>5-2</td>
<td>5-3</td>
</tr>
</table>
</body>
```
```css=
/* .css */
/* Pseudo class */
textarea:hover {
background-color: yellow;
}
/* input[type="text"]:active {
color: chartreuse;
} */
input[type="text"]:focus {
color: cornflowerblue;
}
tr:nth-child(2) {
color: khaki;
}
tr:nth-child(4) {
color: orangered;
}
```
- Pseudo element
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
common item: before, after, first-letter, selection
```html=
<!-- .html -->
<body>
</body>
```
```css=
/* .css */
/* Pseudo element */
h1::before {
content: ">>";
color: rosybrown;
}
h1::after {
content: "⇊";
color: teal;
}
p::first-letter {
font-size: 2.5rem;
}
::selection {
background-color: turquoise;
}
```
### CSS Rules
1) Cascade
2) Specificity
In general, CSS selectors have different specificities. For example, id is more specific than a class, so when a tag has two CSS selectors, it will take the more specific one and put the style on it.
- id - specificity (1, 0, 0)
- class - specificity (0, 1, 0)
- tag - specificity (0, 0, 1)
(0, 1, 1) > (0, 0, 1)
(1, 0, 0) > (0, 1, 1)
3) Inheritance
In CSS, inheritance controls what happens when no value is specified for a property on an element.
inline styling > id > class > element selector > inheritance
### Text styling
- font size (units in CSS, relative and absolute: px, rem)
Default value is 16px or 1rem.
```css=
/* .css */
p {
/* default */
/* font-size: 16px; */
font-size: 1rem;
}
```
- text-align
```css=
/* .css */
p {
/* default */
text-align: left;
}
```
- text-decoration (underline, none, line-through)
```css=
/* .css */
p {
text-decoration: line-through;
/* text-decoration: underline; */
}
a {
text-decoration: none;
color: chocolate;
}
```
- line-height, letter spacing
- font-family (it's safer to use a font stack, which is an order of fonts.)
```html=
<!-- .html -->
<body>
<p>loerm20</p>
</body>
```
```css=
/* .css */
p {
font-family: 'Times New Roman', Times, serif;
}
```
Google Fonts example
```html=
<!-- .html -->
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Title</title>
<!-- Internal Styling -->
<style>
h1 {
color: green;
}
h2 {
color: coral;
}
</style>
<link
href="https://fonts.googleapis.com/css2?family=Island+Moments&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./CSS_basic.css" />
</head>
```
```css=
/* .css */
p {
font-family: 'Island Moments', cursive;
}
```
[CSS Font Stack](https://www.cssfontstack.com/)
[CSS Web Safe Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.php)
[Google Fonts](https://fonts.google.com/)
- font-weight
Default value is 400.
```css=
/* .css */
/* default */
p {
font-weight: 400;
}
```
- text-indent
```css=
/* .css */
p {
text-indent: 32px;
}
```
### Background
- background-color
```css=
/* .css */
h1 {
/* background: crimson; */
background-color: crimson;
}
```
- background-image, background-size, background-position
```css=
/* .css */
body {
/* background: url("./images/006.jpg"); */
background-image: url("./images/006.jpg");
background-size: cover;
background-position: center;
}
```
background can be used instead of background-color and background-image.
### CSS Box Model
All html elements are boxes. (with width and height)
All boxes contain six attribute: width, height, content, padding, border, margin
- padding
```html=
<!-- .html -->
<body>
<button class="test">test</button>
</body>
```
```css=
/* .css */
button.test {
/* pading */
/* method 1 */
/* padding-top: 1rem;
padding-right: 3rem;
padding-bottom: 2rem;
padding-left: 5rem; */
/* method 2 */
/* padding: 1rem 3rem 2rem 5rem; */
/* method 3 */
/* padding: 1rem 2rem; */
/* method 4 */
padding: 2rem;
}
```
- margin, border, width, height
```html=
<!-- .html -->
<body>
<h1 class="pic">Lorem, ipsum.</h1>
</body>
```
```css=
/* .css */
h1.pic {
/* width, height, border, margin */
background-color: brown;
color: white;
margin: 3rem 6rem;
padding: 1rem 2rem;
border: 10px solid rgb(0, 255, 255);
/* width: 350px;
height: 20px; */
width: 20vw;
height: 5vh
}
```
Margin properties inclode: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'.
Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.
ref:
[W3C box model](https://www.w3.org/TR/CSS2/box.html)
```html=
<!-- .html -->
<body>
<a class="survey_2" href="https://www.google.com">Google</a>
</body>
```
```css=
/* .css */
a.survey_2 {
background-color: burlywood;
margin: 150px 30px;
}
```
#### Relative units(%, vw, vh)
```html=
<!-- .html -->
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
```
```css=
/* .css */
div.box1 {
width: 500px;
height: 500px;
background-color: black;
}
div.box2 {
width: 50%;
height: 50%;
background-color: aqua;
}
div.box3 {
width: 50vw;
height: 50vh;
background-color: yellow;
}
```
#### Display (block, inline, inline-block)
1) block element's width by default is 100%.
2) inline element can't set width and height. It's width by default is decided by content.
```html=
<!-- .html -->
<body>
<a class="survey" href="https://www.google.com">Google</a>
</body>
```
```css=
/* .css */
a.survey {
background-color: burlywood;
/* width: 10vw;
height: 10vh; */
display: block;
width: 5vw;
height: 80px;
}
```
3) inline-block: web typography match inline and width, hright match block. This type only five elements: img, inpuut, button, select, textarea.
```html=
<!-- .html -->
<body>
<h1>picture</h1>
<img class="picture_2" src="./images/001.jpg" alt="cute">
</body>
```
```css=
/* .css */
.picture_2 {
width: 600px;
height: 440px;
}
```
### CSS Position
- static
- The element is positioned according to the normal flow of the document.
- No Stacking context.
```html=
<!-- .html -->
<body>
<div class="static">
<div class="box_2 box_2_1"></div>
<div class="box_2 box_2_2"></div>
<div class="box_2 box_2_3"></div>
</div>
</body>
```
```css=
/* .css */
.box_2 {
width: 200px;
height: 200px;
}
.box_2_1 {
background-color: rgb(250, 162, 130);
}
.box_2_2 {
background-color: rgb(110, 253, 110);
}
.box_2_3 {
background-color: rgb(116, 97, 240);
}
```
- relative
- relative to itself based on the values of top, right, bottom, and left
- Stacking context
```html=
<!-- .html -->
<body>
<div class="relative">
<div class="box_3 box_3_1"></div>
<div class="box_3 box_3_2"></div>
<div class="box_3 box_3_3"></div>
<div class="box_3 box_3_4"></div>
</div>
</body>
```
```css=
/* .css */
div.relative {
width: 400px;
height: 800px;
background-color: black;
}
.box_3 {
width: 200px;
height: 200px;
}
.box_3_1 {
background-color: rgb(250, 162, 130);
z-index: 4;
}
.box_3_2 {
background-color: rgb(110, 253, 110);
/* bottom, top, right, left */
position: relative;
top: 100px;
left: 100px;
z-index: 2;
}
.box_3_3 {
background-color: rgb(116, 97, 240);
/* bottom, top, right, left */
position: relative;
top: 50px;
left: 50px;
z-index: 1;
}
.box_3_4 {
background-color: rgb(157, 245, 42);
position: relative;
bottom: 500px;
left: 50px;
z-index: 3;
}
```
- absolute
- The element is removed from the normal document flow, and no space is created for the element in the page layout.
- It is positioned relative to its closest positioned ancestor.
- It is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
- Stacking context.
```html=
<!-- .html -->
<body>
<div class="absolute">
<div class="box_4 box_4_1"></div>
<div class="box_4 box_4_2"></div>
<div class="box_4 box_4_3"></div>
</div>
<div class="absolute_2">
<div class="box_5 box_5_1"></div>
<div class="box_5 box_5_2"></div>
<div class="box_5 box_5_3"></div>
</div>
</body>
```
```css=
/* .css */
div.absolute {
width: 400px;
height: 800px;
background-color: black;
}
.box_4 {
width: 200px;
height: 200px;
}
.box_4_1 {
background-color: rgb(250, 162, 130);
}
.box_4_2 {
background-color: rgb(110, 253, 110);
position: absolute;
bottom: 0;
right: 0;
}
.box_4_3 {
background-color: rgb(116, 97, 240);
}
div.absolute_2 {
width: 400px;
height: 800px;
background-color: white;
position: relative;
}
.box_5 {
width: 200px;
height: 200px;
}
.box_5_1 {
background-color: rgb(250, 162, 130);
}
.box_5_2 {
background-color: rgb(110, 253, 110);
position: absolute;
bottom: 0;
right: 0;
}
.box_5_3 {
background-color: rgb(116, 97, 240);
}
```
- fixed
- The element is removed from the normal document flow, and no space is created for the element in the page layout.
- It is positioned relative to the initial containing block established by the viewport.
- Stacking context.
```html=
<!-- .html -->
<body>
<div class="fixed">
<div class="box_6 box_6_1"></div>
<div class="box_6 box_6_2"></div>
<div class="box_6 box_6_3"></div>
<div class="box_6 box_6_4"></div>
</div>
</body>
```
```css=
/* .css */
div.fixed {
width: 400px;
height: 800px;
background-color: black;
}
.box_6 {
width: 200px;
height: 200px;
}
.box_6_1 {
background-color: rgb(250, 162, 130);
}
.box_6_2 {
background-color: rgb(110, 253, 110);
position: fixed;
top: 200px;
left: 200px;
}
.box_6_3 {
background-color: rgb(116, 97, 240);
}
.box_6_4 {
background-color: rgb(252, 34, 223);
position: fixed;
top: 0;
left: 0;
width: 100%;
}
```
- sticky
- The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left.
- Stacking context.
```html=
<!-- .html -->
<body>
<div class="sticky">
<div class="box_7 box_7_1"></div>
<div class="box_7 box_7_2"></div>
<div class="box_7 box_7_3"></div>
</div>
</body>
```
```css=
/* .css */
div.sticky {
width: 400px;
height: 800px;
background-color: white;
}
.box_7 {
width: 200px;
height: 200px;
}
.box_7_1 {
background-color: rgb(250, 162, 130);
}
.box_7_2 {
background-color: rgb(110, 253, 110);
position: sticky;
top: 0;
width: 100%;
}
.box_7_3 {
background-color: rgb(116, 97, 240);
}
```
### CSS default styling
list, table
```html=
<!-- .html -->
<body>
<ul>
<li>frist: one</li>
<li>second: two</li>
</ul>
<ol>
<li>1: one</li>
<li>2: two</li>
</ol>
<table>
<tr>
<th colspan="3">Title of table</th>
</tr>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
<tr>
<td rowspan="4">row-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!-- <td>3-1</td> -->
<td>3-2</td>
<td>3-3</td>
</tr>
<tr>
<!-- <td>4-1</td> -->
<td>4-2</td>
<td>4-3</td>
</tr>
<tr>
<!-- <td>5-1</td> -->
<td>5-2</td>
<td>5-3</td>
</tr>
</table>
</body>
```
```css=
/* .css */
ul {
/* list-style-type: circle; */
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}
table {
width: 500px;
height: 300px;
}
table, th, td {
/* border: 1px solid black; */
border-bottom: 3px solid rgb(74, 216, 235);
border-collapse: collapse;
}
th, td {
padding: 0.5rem 0.75rem;
}
th {
background-color: #74eb34;
color: white;
font-size: 1.5rem;
}
td:hover {
background-color: gray;
color: teal;
}
```
opacity, cursor
```html=
<!-- .html -->
<body>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing.</h1>
<img class="picture_3" src="./images/001.jpg" alt="cute">
</body>
```
```css=
/* .css */
h1 {
opacity: 0.2;
}
.picture_3 {
width: 550px;
cursor: pointer;
}
```
### Transition
CSS transitions provide a way to control animation speed when changing CSS properties.
property name, duration, timing function
```html=
<!-- .html -->
<body>
<h1>Lorem, ipsum dolor.</h1>
</body>
```
```css=
/* .css */
h1 {
/* transition: background-color 2s; */
transition: all 2s ease-in;
}
h1:hover {
background-color: white;
color: blue;
}
```
#### 2D transform
- translate()
```html=
<!-- .html -->
<body>
<div class="container">
<div class="box_8"></div>
</div>
<div class="container_2">
<div class="box_9"></div>
</div>
</body>
```
```css=
/* .css */
div.container {
width: 500px;
height: 500px;
background-color: white;
}
div.box_8 {
width: 100px;
height: 100px;
background-color: black;
transition: all 1s;
}
div.box_8:hover {
transform: translate(100px, 200px);
}
div.container_2 {
width: 500px;
height: 500px;
background-color: yellow;
position: relative;
}
div.box_9 {
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
- rotate()
```html=
<!-- .html -->
<body>
<div class="container_3">
<div class="box_10"></div>
</div>
</body>
```
```css=
/* .css */
div.container_3 {
width: 500px;
height: 500px;
background-color: white;
}
div.box_10 {
width: 100px;
height: 100px;
background-color: black;
transition: all 1s;
}
div.box_10:hover {
transform: rotate(-90deg);
}
```
- scale()
```html=
<!-- .html -->
<body>
<div class="container_4">
<div class="box_11"></div>
</div>
</body>
```
```css=
/* .css */
div.container_4 {
width: 500px;
height: 500px;
background-color: tomato;
}
div.box_11 {
width: 100px;
height: 100px;
background-color: black;
transition: all 1s;
position: relative;
top: 200px;
left: 200px;
}
div.box_11:hover {
/* transform: scale(1.5); */
transform: scale(2, 3);
/* width: 200px;
height:300px; */
}
```
#### 3D transform
rotateX(), rotateY(), rotateZ()
```html=
<!-- .html -->
<body>
<div class="container_5">
<div class="box_12"></div>
</div>
</body>
```
```css=
/* .css */
div.container_5 {
width: 500px;
height: 500px;
background-color: white;
}
div.box_12 {
width: 100px;
height: 100px;
background-color: black;
transition: all 1s;
position: relative;
top: 200px;
left: 200px;
}
div.box_12:hover {
transform: rotateX(60deg);
}
```
#### Animation
@keyframes, animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-timing-function, animation-fill-mode
animation: name duration timing-function delay iteration-count direction
```html=
<!-- .html -->
<body>
<div class="container_6">
<div class="box_13"></div>
</div>
</body>
```
```css=
/* .css */
div.container_6 {
width: 500px;
height: 500px;
background-color: black;
}
div.box_13 {
width: 100px;
height: 100px;
background-color: khaki;
animation-name: cross;
animation-duration: 2s;
position: relative;
/* animation-delay: 3s; */
/* animation-iteration-count: infinite; */
/* animation-iteration-count: 3; */
/* animation-direction: alternate; */
/* animation-timing-function: ease-in; */
/* animation-fill-mode: forwards; */
animation: cross 1s ease-in forwards;
}
@keyframes cross {
from {
background-color: khaki;
top: 0;
left: 0;
}
to {
background-color: red;
top: 400px;
left: 400px;
}
}
```
### Other topics in CSS
border-radius, overflow
```html=
<!-- .html -->
<body>
<div class="container_7">
<div class="box_14"></div>
</div>
</body>
```
```css=
/* .css */
div.container_7 {
width: 500px;
height: 500px;
background-color: white;
overflow: scroll;
}
div.box_14 {
width: 100px;
height: 100px;
background-color: khaki;
position: relative;
animation: cross_2 1s ease-in forwards;
border-radius: 50%;
}
@keyframes cross_2 {
from {
background-color: khaki;
top: 0;
left: 0;
}
to {
background-color: red;
top: 800px;
left: 400px;
}
}
```
-------------------------
```html=
<!-- .html -->
<body>
</body>
```
```css=
/* .css */
```
[3W scool HTML Tutorial](https://www.w3schools.com/html/default.asp)
[A simple guide to HTML <head> elements](https://htmlhead.dev/)
[MDN](https://developer.mozilla.org/en-US/)
[Unsplash](https://unsplash.com/)
[HTML Symbols](https://www.htmlsymbols.xyz/)
[hex Coloors](https://coloors86.netlify.app/)
[CSS Font Stack](https://www.cssfontstack.com/)
[Google Fonts](https://fonts.google.com/)
[W3C]()
Google Drive
Gist
Clipboard
Sign in with Wallet
