Advertisement
loveberry

transparent circle

Jun 28th, 2023
154
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.80 KB | None | 0 0
  1. <!-- if you do NOT want it to scroll remvoe the "<div class="cirtxt">" div and instead type in the "<div class="circletext">" -->
  2. <style>
  3. .circlehold {
  4. width:100%;
  5. height:155px;
  6. }
  7.  
  8. .cirtxt {
  9. overflow-y:auto;
  10. height:150px;
  11. position:relative;
  12. top:3px;
  13. }
  14.  
  15. /* Hide scrollbar for Chrome, Safari and Opera */
  16. .cirtxt::-webkit-scrollbar {
  17. display: none;
  18. }
  19.  
  20. /* Hide scrollbar for IE, Edge and Firefox */
  21. .cirtxt {
  22. -ms-overflow-style: none; /* IE and Edge */
  23. scrollbar-width: none; /* Firefox */
  24. }
  25.  
  26. .circletext {
  27. text-align:center;
  28. display: flex;
  29. justify-content: center;
  30. align-items: center;
  31. color:black;
  32. padding:2px;
  33. position:relative;
  34. bottom:150px;
  35. width:300px;
  36. height:140px;
  37. margin:0 auto;
  38. z-index:2;
  39. text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75517px 0.958851px 0px, rgb(255, 255, 255) 1.0806px 1.68294px 0px, rgb(255, 255, 255) 0.141474px 1.99499px 0px, rgb(255, 255, 255) -0.832294px 1.81859px 0px, rgb(255, 255, 255) -1.60229px 1.19694px 0px, rgb(255, 255, 255) -1.97999px 0.28224px 0px, rgb(255, 255, 255) -1.87291px -0.701566px 0px, rgb(255, 255, 255) -1.30729px -1.51361px 0px, rgb(255, 255, 255) -0.421592px -1.95506px 0px, rgb(255, 255, 255) 0.567324px -1.91785px 0px, rgb(255, 255, 255) 1.41734px -1.41108px 0px, rgb(255, 255, 255) 1.92034px -0.558831px 0px;
  40. font-weight:bold;
  41. }
  42.  
  43. .circle {
  44. margin:0 auto;
  45. background:#FFC0CB;
  46. opacity:50%;
  47. position:relative;
  48. top:2px;
  49. width:300px;
  50. height:150px;
  51. transform: rotate(-10deg);
  52. border-radius:100%;
  53. }
  54.  
  55. </style>
  56.  
  57. <div class="circlehold">
  58. <div class="circle"></div>
  59. <div class="circletext">
  60.  
  61. <div class="cirtxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla urna vitae massa egestas tincidunt. Nunc vel felis velit. Aliquam varius mauris vel elit consectetur, ut varius nisi dapibus. Etiam at nibh eu nulla fermentum tristique. Mauris ultricies nisi quis odio molestie tempor. Duis a dolor risus. Pellentesque sed quam vel dolor euismod bibendum quis sed augue. Vivamus urna tellus, iaculis a luctus a, dapibus quis nisl. In eget enim ultricies, accumsan tortor vitae, facilisis libero. Donec massa leo, porta sit amet nisl nec, semper ullamcorper elit. Aenean luctus vel purus ut scelerisque. Suspendisse commodo luctus tortor. Fusce mi mi, varius in iaculis non, eleifend et nunc. Phasellus facilisis nibh sodales felis ultrices, sit amet consequat tortor dapibus. Curabitur quis nulla sed est efficitur malesuada. Aliquam facilisis ultricies felis, fermentum consectetur leo mattis sit amet.<br><br>
  62.  
  63. Duis pharetra malesuada fermentum. Donec pellentesque metus id lectus imperdiet tristique. In semper, velit et porta vulputate, ex neque aliquam lacus, nec lacinia magna est sit amet est. Vestibulum sit amet lacinia nisl. Aliquam erat volutpat. Integer pulvinar lectus id turpis pretium, non convallis urna pharetra. Nulla pulvinar quam non risus lobortis, non faucibus orci elementum. Nullam sed justo mi. Cras posuere, velit sed tincidunt placerat, justo ex gravida sem, ut viverra mi tellus sed erat. Proin sollicitudin felis dolor. Phasellus et arcu molestie, blandit diam scelerisque, fermentum elit. Sed et lectus non est dignissim gravida ut sed mauris.<br><br>
  64.  
  65. Phasellus sit amet lacus nulla. Quisque scelerisque lacus vel quam dapibus, scelerisque faucibus nisl auctor. Donec gravida molestie nisl, et aliquam est suscipit id. Maecenas a porta magna. Nulla at condimentum lacus. Vivamus ultricies sem vel dolor imperdiet porttitor. Suspendisse orci odio, molestie in augue sed, bibendum interdum urna. Mauris maximus nisi et sapien pharetra, sed consequat enim convallis. Aenean dictum ligula at auctor laoreet. Donec elementum dui vitae tortor venenatis, sed pretium eros semper. Morbi semper malesuada ipsum sit amet tincidunt. Donec iaculis iaculis pretium. </div>
  66.  
  67. </div>
  68. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement