Advertisement
Daric

Coding stuff.

Sep 18th, 2015
83
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.07 KB | None | 0 0
  1. Fade in code:
  2.  
  3. <style>
  4. #testone {position: fixed; top: 50px; left: 240px;}
  5. .testing {position: fixed; top: 200px; left: 440px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 0;}
  6. .testing:target {top: 50px; opacity: 1;}
  7. #firsttest {position: absolute; top: 0px; left: 0px; height: 200px; width: 150px; background: #ccc; border: solid 1px;}
  8. #secondtest {position: absolute; top: 0px; left: 190px; height: 200px; width: 150px; background: #ccc; border: solid 1px;}
  9. #thirdtest {position: absolute; top: 240px; left: 0; height: 200px; width: 340px; background: #ccc; border: solid 1px;}
  10. </style>
  11.  
  12. Navigation:
  13. <div id="testone">
  14. <a href="#one">one</a>
  15. <a href="#two">two</a>
  16. <a href="#three">three</a>
  17. <a href="#">return</a>
  18. </div>
  19.  
  20. Boxes:
  21. <div id="one" class="testing">
  22. <div id="firsttest">testing text.</div>
  23. <div id="secondtest">testing text.</div>
  24. <div id="thirdtest">testing text.</div>
  25. </div>
  26.  
  27. <div id="two" class="testing">
  28. <div id="firsttest">testing text.</div>
  29. <div id="secondtest">testing text.</div>
  30. <div id="thirdtest">testing text.</div>
  31. </div>
  32.  
  33. <div id="three" class="testing">
  34. <div id="firsttest">testing text.</div>
  35. <div id="secondtest">testing text.</div>
  36. <div id="thirdtest">testing text.</div>
  37. </div>
  38. The only problem there seems to be with this, is that you have to know the space that you're going to use, to which is set on the width of the :target
  39.  
  40.  
  41.  
  42.  
  43. <style>
  44. #onetest {position: fixed; top: 50px; left: 150px; height: 300px; width: 150px; border: solid 1px; opacity: 0;}
  45. body:hover #onetest {opacity: 1;}
  46. </style>
  47. <div id="onetest"></div>
  48.  
  49. You can have less or more than three in a thing, as well!
  50.  
  51.  
  52. [6:59:20 PM] elizabeth.: You place it inside of the tab without adding many properties to the :target.
  53. [6:59:26 PM] elizabeth.: With each div, there is a box set to it.
  54. [7:00:15 PM] elizabeth.: While inside of another div that moves, 'position: absolute;' is mandatory, to keep it in place where it should be moving to.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement