HTML Academy
Toggle switches, step 4
Smooth transitions22/29
Back to the list of tasks
  • 1. The transition-duration property
  • 2. Transition duration, step 2
  • 3. The transition-property: which properties can be changed smoothly?
  • 4. The transition-delay property
  • 5. The “form” of the transition, transition-timing-function
  • 6. transition-timing-function, step 2
  • 7. transition-timing-function, step 3
  • 8. transition-timing-function, step 4
  • 9. Paper buttons, step 1
  • 10. Paper buttons, step 2
  • 11. Paper buttons, step 3
  • 12. Checkboxes, step 1
  • 13. Checkboxes, step 2
  • 14. Checkboxes, step 3
  • 15. Radio buttons, step 1
  • 16. Radio buttons, step 2
  • 17. Radio buttons, step 3
  • 18. Toggle switches, step 1
  • 19. Toggle switches, step 2
  • 20. Toggle switches, step 3
  • 21. Toggle switches, step 4
  • 22. The transformer icon, step 1
  • 23. The transformer icon, step 2
  • 24. The transformer icon, step 3
  • 25. The transformer icon, step 4
  • 26. Text input field, step 1
  • 27. Text input field, step 2
  • 28. Text input field, step 3
  • 29. Text input field, step 4
The transformer icon, step 2
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The transformer icon, step 1

Let’s take a little break from form elements and create a transformer icon.

A hamburger icon is a glyph that will be familiar to anyone who has used mobile apps and websites. It is used to denote a menu. Usually, when the user clicks on it, a menu appears or the current screen display changes. If we want to return to the previous display, we need to click on the icon again.

We can use transforms and transitions to make this icon interactive: we want its appearance to suggest to the user that they can return to the previous display by clicking on it again.

So, let’s get started! Let’s use the .menu-icon span::before and .menu-icon span::after pseudo-elements to create a hamburger icon.

CSS transforms are used in this and the following examples, which are covered in detail in the “2D transforms” chapter.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>The transformer icon, step 1</title> <meta charset="utf-8"> <link rel="stylesheet" href="material.css"> <link rel="stylesheet" href="style.css"> </head> <body class="blue-theme"> <section class="card card-bordered"> <div class="menu-icon"> <span></span> </div> </section> </body> </html>
CSS
.menu-icon span { display: block; width: 100%; } .menu-icon span::before, .menu-icon span::after { display: block; width: 100%; content: ""; } .menu-icon span::before { } .menu-icon span::after { }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Assign a height of 12px and a background color of #40d47e for .menu-icon span.
    2. Then set the same height and background color for span::before and span::after.
    3. Then assign the translate(0, -24px) transform only to span::before,
    4. and then assign the translate(0, 12px) transform to span::after.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2024

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.