IT - WS

• W3.CSS Buttons

  • w3-btn
  • w3-button
  • w3-block
  • w3-circle
• w3-btn - a rectangular button with a shadow hover effect
• w3-button - a rectangular button with a grey hover effect
• w3-block - class that can be used to define a full width button
• w3-circle - can be used to define a circular button
• W3.CSS Inputs

  • w3-input
  • w3-check
  • w3-radio
  • w3-select
• w3-input - for input fields
• w3-check - for check boxes
• w3-radio - for radio buttons
• w3-select - for dropdown list boxes
• Navigation with Dropdown

  • w3-dropdown-hover
  • w3-dropdown-content
• W3.CSS Navigation Bar Classes

  • w3-bar
  • w3-bar-block
  • w3-bar-items
  • w3-sidebar
  • w3-mobile
  • w3-dropdown-hover
• w3-bar - horizontal container for HTML elements
• w3-bar-block - vertical container for HTML elements
• w3-bar-items - container bar elements
• w3-sidebar - vertical sidebar for HTML elements
• w3-mobile - makes any bar element mobile-first responsive
• w3-dropdown-hover - hoverable dropdown element
• Progress bar - can be used to show how far along a user is in a process.
• W3.CSS Responsive Layouts

  • w3-half
  • w3-third
  • w3-twothird
  • w3-quarter
  • w3-threequarter
  • w3-rest
• w3-half - occupies 1/2 of the window
• w3-third - occupies 1/3 of the window
• w3-twothird - occupies 2/3 of the window
• w3-quarter - occupies 1/4 of the window
• w3-threequarter - occupies 3/4 of the window
• w3-rest - occupies rest of the column width
• W3.CSS Tables

  • w3-table
  • w3-striped
  • w3-border
  • w3-bordered
  • w3-centered
  • w3-hoverable
  • w3-table-all
• w3-table - container for an HTML table
• w3-striped - striped table
• w3-border - bordered table
• W3-bordered - bordered lines
• w3-centered - centered table content
• w3-hoverable - hoverable table
• w3-table-all - all properties set
• w3-opacity - classes make images transparent.
• w3-grayscale - classes add a grayscale effect to an image.
• w3-sepia - classes add a sepia effect to an image.
• min and max - can be added at the end of the effect to reduce or add the

  effect in an image
• w3-round class - adds rounded corners to an image.
• w3-circle class - shapes an image to a circle.