ICT MT

• Content


  The content of the box, where text and images appear
• Padding


  Clears an area around the content. The padding is transparent
• Border


  A border that goes around the padding and content
• Margin


  Clears an area outside the border. The margin is transparent
• CSS Border


  • The CSS border properties allow you to specify the style, width, and color of an element's border

  
• CSS Border


  The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border)

  
• CSS Border Width Property


  The border-width property specifies the width of the four borders. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick

  
• CSS Border Color Property


  The border-color property is used to set the color of the four borders. The color can be set by name, HEX, or RGB

  
• CSS Border - Individual Sides


  There are properties for specifying the border for each side of an element (top, right, bottom, and left)

  
• CSS Rounded Borders


  The border-radius property is used to add rounded borders to an element

  
• CSS Margins


  The CSS margin properties are used to create space around elements, outside of any defined borders

  
• CSS Margins


  There are properties for setting the margin for each side of an element (top, right, bottom, and left)

  
• CSS Padding


  The CSS padding properties are used to generate space around an element's content, inside of any defined borders

  
• CSS Padding


  There are properties for specifying the padding for each side of an element (top, right, bottom, and left)
• CSS Animation


  A way to animate elements on a webpage using CSS

  
• CSS Animation Properties


  • Keyframes
  • Animation-delay
  • Animation-iteration-count
  • Animation-direction
  • Animation-timing-function

  
• Keyframes


  1. Change the background-color of the <div> element when the animation is 25% complete

  2. Change the background-color of the <div> element when the animation is 50% complete

  3. Change the background-color of the <div> element when the animation is 100% complete

  
• CSS Animation-delay property


  Specifies a delay for the start of a CSS animation

  
• The webpage starts with 0px left and top margins
• Webpage animation


  1. Left margin changes from 0px to 100px

  2. Top margin changes from 0px to 100px

  
• CSS Animation-iteration-count property


  Specifies the number of times an animation should be played

  
• CSS Animation-direction property


  Specifies whether an animation should be played forwards, backwards, or in alternate cycles

  
• CSS Animation-timing-function property


  Specifies the speed curve of the animation

  
• CSS Opacity


  Property used to set the opacity level for an element
• Hover Effect


  Change in appearance of an element when the mouse pointer hovers over it
• Transparent Hover Effect


  Change in opacity level of an element when the mouse pointer hovers over it
• Transparencey Hover Effect (0.5 - 1.0)


  Opacity level changes from 0.5 to 1.0 on hover
• Transparencey Hover Effect (1.0 - 0.5)


  Opacity level changes from 1.0 to 0.5 on hover
• The opacity property is often used together with the :hover selector to change the opacity on mouse-over