Merge pull request #59 from programmurr/feature/programmurr-animation-exercises
Add css-exercises for the new HTML/CSS Update transition/keyframe lessons
This commit is contained in:
Cody Loyd
GitHub
commit
8e92a0956b
|
|
@ -0,0 +1,12 @@
|
||||||
|
# Button Hover
|
||||||
|
|
||||||
|
Use a transition to increase the font-size property of the button when you hover your mouse over it.
|
||||||
|
|
||||||
|
## Desired Outcome
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Self Check
|
||||||
|
- Does the font-size property change to increase the size?
|
||||||
|
- Do other properties of the button remain unchanged?
|
||||||
|
- Does the `:hover` pseudo-class trigger the transition?
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Button Hover</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="transition-container">
|
||||||
|
<button>Transition!</button>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
#transition-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 158px;
|
||||||
|
height: 55px;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
font-size: small;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SOLUTION */
|
||||||
|
|
||||||
|
/* disclaimer: duplicating the `button` element here isn't best practice.
|
||||||
|
In your solution you probably put it right inside the existing `button`,
|
||||||
|
which _is_ the best practice.
|
||||||
|
We separated it out here to make it extra clear what has changed. */
|
||||||
|
|
||||||
|
button {
|
||||||
|
transition: font-size 1s ease-out 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
font-size: x-large;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Button Hover</title>
|
||||||
|
<link rel="stylesheet" href="solution.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="transition-container">
|
||||||
|
<button>Transition!</button>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
#transition-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 158px;
|
||||||
|
height: 55px;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
font-size: small;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
# Dropdown
|
||||||
|
|
||||||
|
Here you'll make your very own dropdown menu using pure CSS.
|
||||||
|
|
||||||
|
Animate the appearance of a list so that it slides down when you hover your mouse over the button. This exercise will need multiple CSS selectors to get it working properly.
|
||||||
|
|
||||||
|
## Desired Outcome
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Self Check
|
||||||
|
- Does the button's background color change when you hover on it?
|
||||||
|
- Does the list smoothly slide down underneath the button when the button is hovered over?
|
||||||
|
- Does the list smoothly slide back up to hiding when the mouse is moved away from the button or a list element?
|
||||||
|
- Does the list appear and disappear when it is supposed to i.e. only when the mouse is over the button or a list element?
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Dropdown</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="dropdown-container">
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<button>Dropdown</button>
|
||||||
|
<ul>
|
||||||
|
<li>Item 1</a>
|
||||||
|
<li>Item 2</a>
|
||||||
|
<li>Item 3</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: rgb(108, 238, 255);
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
position: absolute;
|
||||||
|
left: -25%;
|
||||||
|
background-color: rgb(189, 188, 188);
|
||||||
|
width: 160px;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SOLUTION */
|
||||||
|
|
||||||
|
/* disclaimer: duplicating the `ul` element here isn't best practice.
|
||||||
|
In your solution you probably put it right inside the existing `ul`,
|
||||||
|
which _is_ the best practice.
|
||||||
|
We separated it out here to make it extra clear what has changed. */
|
||||||
|
|
||||||
|
ul {
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 0;
|
||||||
|
transition: max-height 0.25s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu:hover ul {
|
||||||
|
max-height: 500px;
|
||||||
|
transition: max-height 0.5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: rgb(59, 232, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Dropdown</title>
|
||||||
|
<link rel="stylesheet" href="solution.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="dropdown-container">
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<button>Dropdown</button>
|
||||||
|
<ul>
|
||||||
|
<li>Item 1</a>
|
||||||
|
<li>Item 2</a>
|
||||||
|
<li>Item 3</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: rgb(108, 238, 255);
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
position: absolute;
|
||||||
|
left: -25%;
|
||||||
|
background-color: rgb(189, 188, 188);
|
||||||
|
width: 160px;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
# Popup
|
||||||
|
|
||||||
|
Popup modals are great for replacing the standard window popups that we often fall back on when we want our users to confirm something, or log in, etc.
|
||||||
|
|
||||||
|
In this exercise, activate a popup modal that will appear when the user clicks on the 'Open Modal' button and disappears when they click on the 'Close Modal' button inside the popup.
|
||||||
|
|
||||||
|
The modal should smoothly fade in and slide up to cover the Open button. The background should darken a little to create a clear distinction between foreground and background, and a little shadow should appear on the buttons when you hover over them.
|
||||||
|
|
||||||
|
When you're done, keep this repo handy! Being able to build a custom modal is a great show-off for your future projects.
|
||||||
|
|
||||||
|
### Hints
|
||||||
|
- There's a little Javascript here. Don't worry about it. It's been set up to add/remove the `show` class to the relevant elements when clicked
|
||||||
|
- Multiple transitions will be required
|
||||||
|
- Pay close attention to the elements being altered with classes being added or removed
|
||||||
|
|
||||||
|
## Desired Outcome
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Self Check
|
||||||
|
|
||||||
|
- The mouse cursor changes to a pointer over the buttons
|
||||||
|
- A drop shadow gets added to the buttons when the mouse hovers over them
|
||||||
|
- The popup modal appears when the Open button is clicked
|
||||||
|
- The background fades to black with 40% opacity when the popup is opened
|
||||||
|
- The popup smoothly slides up to cover the existing Open button
|
||||||
|
- When the Close button is clicked the popup modal slides back down and gradually disappears
|
||||||
|
- When the popup modal is hidden your mouse should not change to the pointer if hovered over an invisible Close button
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Popup</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="button-container">
|
||||||
|
<button id="trigger-modal">Open Modal</button>
|
||||||
|
</div>
|
||||||
|
<div class="popup-modal">
|
||||||
|
<button id="close-modal">Close Modal</button>
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
const openButton = document.getElementById('trigger-modal');
|
||||||
|
const closeButton = document.getElementById('close-modal');
|
||||||
|
|
||||||
|
function toggleModal() {
|
||||||
|
const container = document.querySelector('.button-container');
|
||||||
|
const modalDiv = document.querySelector('.popup-modal');
|
||||||
|
modalDiv.classList.toggle('show');
|
||||||
|
container.classList.toggle('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
openButton.addEventListener('click', toggleModal);
|
||||||
|
closeButton.addEventListener('click', toggleModal);
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #ffffff;
|
||||||
|
opacity: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#trigger-modal,
|
||||||
|
.popup-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#trigger-modal {
|
||||||
|
padding: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #0e79dd;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-modal {
|
||||||
|
width: 30%;
|
||||||
|
height: 15%;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#close-modal {
|
||||||
|
padding: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #0e79dd;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SOLUTION */
|
||||||
|
|
||||||
|
/*
|
||||||
|
Disclaimer: duplicating selectors here isn't best practice.
|
||||||
|
We separated it out here to make it extra clear what has changed.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container.show {
|
||||||
|
background-color: #000000;
|
||||||
|
opacity: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#trigger-modal:hover,
|
||||||
|
#close-modal:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 1px 1px 2px #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Keep this '.popup-modal' selector separate from the main
|
||||||
|
.popup-modal selector, for the reasons outlined above
|
||||||
|
.pop-up-modal.show
|
||||||
|
*/
|
||||||
|
.popup-modal {
|
||||||
|
visibility: hidden;
|
||||||
|
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
|
||||||
|
visibility 0.5s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
The common properties between .popup-modal and .popup-modal.show
|
||||||
|
can easily be added by just adding this selector to the main
|
||||||
|
.popup-modal selector
|
||||||
|
*/
|
||||||
|
.popup-modal.show {
|
||||||
|
width: 30%;
|
||||||
|
height: 15%;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Keep this selector separate from the main '.popup-modal.show'
|
||||||
|
selector.
|
||||||
|
*/
|
||||||
|
.popup-modal.show {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
margin-top: 0;
|
||||||
|
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
|
||||||
|
visibility 0.5s linear;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Popup</title>
|
||||||
|
<link rel="stylesheet" href="solution.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="button-container">
|
||||||
|
<button id="trigger-modal">Open Modal</button>
|
||||||
|
</div>
|
||||||
|
<div class="popup-modal">
|
||||||
|
<button id="close-modal">Close Modal</button>
|
||||||
|
</div>
|
||||||
|
<script src="solution.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
const openButton = document.getElementById('trigger-modal');
|
||||||
|
const closeButton = document.getElementById('close-modal');
|
||||||
|
|
||||||
|
function toggleModal() {
|
||||||
|
const container = document.querySelector('.button-container');
|
||||||
|
const modalDiv = document.querySelector('.popup-modal');
|
||||||
|
modalDiv.classList.toggle('show');
|
||||||
|
container.classList.toggle('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
openButton.addEventListener('click', toggleModal);
|
||||||
|
closeButton.addEventListener('click', toggleModal);
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #ffffff;
|
||||||
|
opacity: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#trigger-modal,
|
||||||
|
.popup-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#trigger-modal {
|
||||||
|
padding: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #0e79dd;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-modal {
|
||||||
|
width: 30%;
|
||||||
|
height: 15%;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#close-modal {
|
||||||
|
padding: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #0e79dd;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue