transform : rotate(-10deg);
transform : skewX(-10deg);
transform : skewY(-10deg);
border-radius: 0px;
border-radius: 50%; //circular object
box-shadow: x-offset, y-offset, radius-blur, spread-radius, color;
box-shadow: 25px 10px 10px 10px green;
Pseudo elements
::before and ::aftercontent is required ; it can be blank for symbols,images,
Example how we get heart
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
/*animation-name : beat; defined below animation*/
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content:"" ;
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class = "heart"></div>
Animation and keyframe
- animation-name : name;
- animation-duration :3s;
- animation-timing-function
- animation-delay
- animation-iteration-count : 3; //count or infinite
- animation-direction
- animation-fill-mode
- animation-play-state
//animation-timing-function: cubic-bezier(x1, y1, x2, y2);
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
> heartbeat animation
put animation-name : beat; in heart class
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
> clean and appropriate Html tag format
<html>
<head>
<title</title>
</head>
<body>
<header><nav></nav></header>
<main>
<section>
<div><p>For audio tag</p>
<audio controls>
<source type="audio/mpeg" src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" />
</audio>
</div>
<div>
<p>For image</p>
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
</div>
</section>
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
</fieldset>
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer></footer>
</body>
</html>
The simplest way to make your images appear "retina" (and optimize them for retina displays) is to define their
widthand heightvalues as only half of what the original file is.