Topic outline

  • W3.CSS: Interactivity

    Prev Next

    • Interactivity in web designs is often implemented using additional coding languages such as jQuery, although there are several interactive elements that can be employed using W3.CSS. As we have already explored W3.CSS, this is a great place for us to begin to implement interactive elements into our web designs. 

      Tooltips 

      Tooltips reveal text, images or any other content when your visitor hovers over an existing element, For example: 

      The following text is present on a page:

      screenshot of tooltips

      When the visitor hovers over the underlined text, the following tooltip is revealed:

      tooltip hover screenshot

      This reveals additional information to the visitor when they hover over the link. For example in this situation, the visitor is made aware that clicking on the link will launch an external website. To utilise a tooltip, we use the W3.CSS tag “w3-tooltip” as demonstrated in the jsfiddle below:


      For more examples and demonstrations on using tooltips, check out the W3 Schools Tooltips page:
      https://www.w3schools.com/w3css/w3css_tooltips.asp

      Dropdowns

      Dropdowns are similar to tooltips in that they reveal information when they are hovered over, however a dropdown will appear underneath the hovered content and does not ‘push’ other information out of the way. The hoverable element and the element that is revealed can be any HTML element, such as links, images or <p> text. This is useful for creating items such as drop down menus or allowing users to select options, such as the colour or size of a specific item. 

      In this example, additional options are revealed when the visitor hovers over the textual element. 

      The textual element demonstrated on a page. Here we have used the w3-button class to make a simple button design:

      dropdown hover example

      When this item is hovered over, additional options are revealed to the visitor:

      on hover example dropdown

      To utilise a dropdown, we use the W3.CSS tag “w3-dropdown-hover” as demonstrated in the jsfiddle below:


      For more examples and demonstrations on using dropdowns, check out the W3 Schools Dropdowns page: https://www.w3schools.com/w3css/w3css_dropdowns.asp


      Animations 

       W3-CSS allows us to easily implement animations that allow our elements to move in a particular sequence or method. This is useful to add polish to your design, such as allowing you to fade in images as a page loads, or to create a spinning loading icon. 

      There are several types of animations that can be implemented using W3.CSS and these are listed below:

      W3.CSS Class Description
       w3-animate-top  slides in an element from the top
       w3-animate-bottom  slides in an element from the bottom
       w3-animate-left  slides in an element from the left
       w3-animate-right  slides in an element from the right
       w3-animate-opacity      animates an element's opacity from 0-1 in 1.5 seconds
       w3-animate-zoom  animates an element from 0-100% in size
       w3-animate-fading  animates an element's opacity from 0-1 and then again from 1-0 in and out   
       w3-spin  spins an element 360 degrees.

      Source: Table adapted from W3 Schools nd

      For more examples and demonstrations on using animations, check out the W3 Schools Animation page: https://www.w3schools.com/w3css/w3css_animate.asp


      W3.CSS and JQuery 

      JQuery is a light version of Javascript that we can use to enhance our HTML and CSS Web designs. It is very powerful and allows us to create some interactive elements that would be impossible to create with HTML and CSS alone.

      jQuery is quite easy to use if we are utilising pre-existing scripts and putting these into our web designs ourselves. jQuery is not a requirement of this course, but if you are interested in giving jQuery a go, the following W3.CSS elements utilise a small amount of jQuery to create their interactivity. Detailed discussions on how to implement these as well as the relevant scripts can be found on each of the W3 Schools Pages.

      W3.CSS Modal

      Easy (very minimal jQuery)

      Allows for elements to pop up in a dialogue box on the screen. For example, to create an effect where clicking on an image will open it larger on the screen in a lightbox effect. For example:

      modal example

      Examples and Scripts: https://www.w3schools.com/w3css/w3css_modal.asp


      W3.CSS Slideshow

      Medium (an average amount of jQuery)

      Allows for you to create a slideshow that allows your site visitor to easily click through several different elements such as images. For Example:

      slideshow image example

      Image source: W3 Schools: Slideshows n.d

      Examples and Scripts: https://www.w3schools.com/w3css/w3css_slideshow.asp


      W3.CSS Accordions

      Medium (an average amount of jQuery)

      Allows for elements to be expanded downwards, like a dropdown menu, but unlike a dropdown menu, the accordion will push the rest of the page’s content down, rather than a dropdown which would cover up the page content. For example:

      accordion screenshot example

      Image source: W3 Schools: Accordions n.d

      Examples and Scripts: https://www.w3schools.com/w3css/w3css_accordions.asp


    Prev Next