Advertisement
greenmelon

frosted glass flip card

Mar 11th, 2022
3,456
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.05 KB | None | 0 0
  1. <style>
  2. .flip-card {
  3. margin: auto;
  4. width: 250px; /*change the sizing*/
  5. height: 250px; /*change the sizing*/
  6. perspective: 1000px;
  7. border-radius:10px;
  8. }
  9.  
  10. .flip-card-inner {
  11. width: 100%;
  12. height: 100%;
  13. transition: transform 1.5s;
  14. transform-style: preserve-3d;
  15. transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
  16. }
  17.  
  18. .flip-card:hover .flip-card-inner {
  19. transform: rotateY(180deg);
  20. }
  21.  
  22. .flip-card-front, .flip-card-back {
  23. position: absolute;
  24. width: 100%;
  25. height: 100%;
  26. -webkit-backface-visibility: hidden;
  27. backface-visibility: hidden;
  28. }
  29.  
  30. .flip-card-front {
  31. /*change the appearance of the front here*/
  32. background: linear-gradient(-180deg, #FFFFFF40 30%, #b8cef360 100%);
  33. backdrop-filter: blur(5px); /*delete if you don't want the frosted glass effect*/
  34. box-shadow:0px 0px 5px 1px #61616130;
  35. border-radius:10px;
  36. border:1px solid #f5f5f5;
  37. padding: 10px;
  38. color: #000;
  39. font-size: 0.9em;
  40. }
  41.  
  42. .flip-card-back {
  43. /*change the appearance of the back here*/
  44. background: linear-gradient(-180deg, #FFFFFF40 30%, #b8cef360 100%);
  45. backdrop-filter: blur(5px); /*delete if you don't want the frosted glass effect*/
  46. box-shadow:0px 0px 5px 1px #61616130;
  47. transform: rotateY(180deg);
  48. border-radius:10px;
  49. border:1px solid #f5f5f5;
  50. padding: 10px;
  51. color: #000;
  52. font-size: 0.9em;
  53. }
  54.  
  55. h1 {
  56. background: -webkit-linear-gradient(-90deg, #ffffff 0%, #b8cef3 70%);
  57. -webkit-background-clip: text;
  58. -webkit-text-fill-color: transparent;
  59. color: #FFDBF1;
  60. font-size: 2.3em;
  61. font-weight: 900;
  62. line-height: 1.2em;
  63. -webkit-filter: drop-shadow(0px 0px 1px #919191);
  64. }
  65.  
  66. h2 {
  67. background: -webkit-linear-gradient(-90deg, #ffffff 0%, #B8BAF3 70%);
  68. -webkit-background-clip: text;
  69. -webkit-text-fill-color: transparent;
  70. font-size: 1.4em;
  71. font-weight: 600;
  72. line-height: 1.2em;
  73. -webkit-filter: drop-shadow(0px 0px 1px #919191);
  74. }
  75. </style>
  76.  
  77. <body>
  78. <div class="flip-card">
  79. <div class="flip-card-inner">
  80. <div class="flip-card-front">
  81. <h1> FRONT </h1>
  82. <p>hello</p>
  83. </div>
  84.  
  85. <div class="flip-card-back">
  86. <h2> BACK </h2>
  87. <p>hello</p>
  88. </div>
  89.  
  90. </div>
  91. </div>
  92. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement