/css-tricks

css tricks

Primary LanguageHTML

css-tricks

#screenshots

  1. File(1.html) : barebone html
    enter image description here

  2. File(2.html,2.css) : css selectors (Type Selectors, ID Selectors, Class Selectors, Descendant Selectors)
    enter image description here

  3. File(3.html,3.css) : Two coloumn layout with links + (background image or linear-gradient)
    enter image description here

3.1 File(3.html,3.css) : Navigation- padding, display as block, border, hover
enter image description here

3.2 File(3.html,3.css) : replace image in place of header and make it as clickable link
enter image description here

  1. File(4.html,4.css) : CSS box model -padding, margin (top, bottom), border
    enter image description here

  2. File(5.html,5.css) : using Float Property, using clearfix to clear unwanted space
    enter image description here
    5.1 File(5.html,5.css) : text shadow, block shadow, rgb color
    enter image description here

  3. File(6.html,6.css) : relative and absolute positions
    enter image description here

  4. File(7.html,7.css) : Understanding Typography(font,size,spacing)
    enter image description here

  5. File(8.html,8.css) : Border radius property
    enter image description here

  6. File(9.html,9.css) : css dropdown navigation
    enter image description here

  7. File(10.html,10.css) : css sprites(on icon hover and click image portion changes)
    enter image description here

  8. File(11.html,11.css) : z-index for div overlaping
    enter image description here

  9. File(12.html,12.css) : display property=inline, block, block-inline, none
    enter image description here

  10. File(13.html,13.css) : flex box part 1
    enter image description here

  11. File(14.html,14.css, 14.scss) : SASS
    enter image description here
    enter image description here

  12. File(15.html) : grid part 1
    enter image description here

  13. File(16.html) : grid part 2(nested grids)
    enter image description here

  14. File(17.html) : grid part 3- alignment,overlap (unlike flexbox- grids are 2d, can overlap other grid)
    enter image description here

  15. File(18.html,18.css) : Responsive(@media (min-width: 700px)) grid & flexbox
    enter image description here
    enter image description here

  16. File(19.html) : Javascript to modify css style
    enter image description here