├── README.md ├── assets ├── css │ └── styles.css ├── img │ ├── img-1.png │ ├── img-2.png │ ├── img-3.png │ └── img-bg.png └── scss │ ├── base │ └── _base.scss │ ├── components │ ├── _breakpoints.scss │ └── _card.scss │ ├── config │ └── _variables.scss │ ├── layout │ └── _layout.scss │ └── styles.scss ├── index.html └── preview.png /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Clip Path Card 2 | ## [Watch it on youtube](https://youtu.be/M5Q5hBlQO1A) 3 | ### Responsive Clip Path Card 4 | 5 | - Responsive Clip Path Card HTML CSS 6 | - Contains clipping path effects on hover over the card. 7 | - Developed first with the Mobile First methodology, then for desktop. 8 | - Compatible with all mobile devices and with a beautiful and pleasant user interface. 9 | 10 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode) 11 | 12 | ![preview img](/preview.png) 13 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;600;700&display=swap"); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root { 6 | /*========== Colors ==========*/ 7 | /*Color mode HSL(hue, saturation, lightness)*/ 8 | /* 9 | For more colors visit: https://htmlcolorcodes.com/ 10 | -> Choose any color 11 | -> Copy the color mode (HSL) 12 | */ 13 | --yellow-color: 52; 14 | --green-color: 116; 15 | --pink-color: 300; 16 | --white-color: hsl(0, 0%, 100%); 17 | --black-color: hsl(0, 0%, 0%); 18 | 19 | /*========== Font and typography ==========*/ 20 | /*.5rem = 8px | 1rem = 16px ...*/ 21 | --body-font: "Montserrat Alternates", serif; 22 | --biggest-font-size: 2rem; 23 | --big-font-size: 1.5rem; 24 | --normal-font-size: .938rem; 25 | --small-font-size: .813rem; 26 | 27 | /*========== Font weight ==========*/ 28 | --font-regular: 400; 29 | --font-semi-bold: 600; 30 | --font-bold: 700; 31 | } 32 | 33 | /*========== Responsive typography ==========*/ 34 | @media screen and (min-width: 1150px) { 35 | :root { 36 | --biggest-font-size: 3rem; 37 | --big-font-size: 2.5rem; 38 | --normal-font-size: 1rem; 39 | --small-font-size: .875rem; 40 | } 41 | } 42 | 43 | /*=============== BASE ===============*/ 44 | * { 45 | box-sizing: border-box; 46 | padding: 0; 47 | margin: 0; 48 | } 49 | 50 | body { 51 | font-family: var(--body-font); 52 | } 53 | 54 | a { 55 | text-decoration: none; 56 | } 57 | 58 | img { 59 | display: block; 60 | max-width: 100%; 61 | height: auto; 62 | } 63 | 64 | /*=============== REUSABLE CSS CLASSES ===============*/ 65 | .container { 66 | max-width: 1120px; 67 | margin-inline: 1.5rem; 68 | } 69 | 70 | .card-yellow { 71 | --hue: var(--yellow-color); 72 | } 73 | 74 | .card-green { 75 | --hue: var(--green-color) ; 76 | } 77 | 78 | .card-pink { 79 | --hue: var(--pink-color); 80 | } 81 | 82 | /*=============== CARD ===============*/ 83 | .card { 84 | position: relative; 85 | padding-block: 5rem; 86 | } 87 | 88 | .card__bg, 89 | .card__blur { 90 | position: absolute; 91 | top: 0; 92 | left: 0; 93 | width: 100%; 94 | height: 100%; 95 | } 96 | 97 | .card__bg { 98 | object-fit: cover; 99 | object-position: center; 100 | } 101 | 102 | .card__blur { 103 | backdrop-filter: blur(24px); 104 | } 105 | 106 | .card__container { 107 | position: relative; 108 | display: grid; 109 | grid-template-columns: 260px; 110 | justify-content: center; 111 | gap: 2rem; 112 | } 113 | 114 | .card__article { 115 | position: relative; 116 | border-radius: 2rem; 117 | overflow: hidden; 118 | } 119 | 120 | .card__img { 121 | border-radius: 2rem; 122 | transition: transform .4s; 123 | } 124 | 125 | .card__shadow { 126 | position: absolute; 127 | top: 0; 128 | left: 0; 129 | width: 100%; 130 | height: 100%; 131 | background: linear-gradient(180deg, 132 | hsla(0, 0%, 0%, 0) 70%, 133 | hsl(0, 0%, 0%) 100%); 134 | } 135 | 136 | .card__data { 137 | color: var(--white-color); 138 | position: absolute; 139 | left: 1.5rem; 140 | bottom: 2rem; 141 | } 142 | 143 | .card__name { 144 | font-size: var(--big-font-size); 145 | margin-bottom: .25rem; 146 | } 147 | 148 | .card__profession { 149 | display: block; 150 | font-size: var(--small-font-size); 151 | } 152 | 153 | .card__clip { 154 | position: absolute; 155 | top: 1rem; 156 | right: 1rem; 157 | background-color: hsl(var(--hue), 90%, 50%); 158 | box-shadow: 0 0 16px 4px hsl(var(--hue), 90%, 50%); 159 | width: 2rem; 160 | height: 2rem; 161 | border-radius: 50%; 162 | display: grid; 163 | place-items: center; 164 | font-size: 1.5rem; 165 | color: var(--black-color); 166 | z-index: 5; 167 | cursor: pointer; 168 | transition: transform .4s; 169 | } 170 | 171 | .card__article:hover .card__img { 172 | transform: scale(1.1); 173 | } 174 | 175 | /*=============== CARD INFO ===============*/ 176 | .info { 177 | position: absolute; 178 | top: 0; 179 | left: 0; 180 | width: 100%; 181 | height: 100%; 182 | background-color: hsla(0, 0%, 0%, .1); 183 | backdrop-filter: blur(12px); 184 | padding: 3rem 1.5rem 1.5rem; 185 | color: var(--white-color); 186 | clip-path: circle(8px at 88% 9%); 187 | transition: clip-path .5s ease-in-out; 188 | } 189 | 190 | .info__name { 191 | font-size: var(--biggest-font-size); 192 | margin-bottom: .5rem; 193 | } 194 | 195 | .info__description { 196 | font-size: var(--small-font-size); 197 | margin-bottom: 1rem; 198 | } 199 | 200 | .info__button { 201 | display: inline-flex; 202 | background-color: hsl(var(--hue), 90%, 50%); 203 | box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%); 204 | padding: .5rem .75rem; 205 | border-radius: .5rem; 206 | color: var(--black-color); 207 | font-size: var(--small-font-size); 208 | font-weight: var(--font-semi-bold); 209 | transition: box-shadow .4s; 210 | } 211 | 212 | .info__button:hover { 213 | box-shadow: 0 0 20px hsl(var(--hue), 90%, 50%); 214 | } 215 | 216 | .info__social { 217 | position: absolute; 218 | left: 1.5rem; 219 | bottom: 1.5rem; 220 | display: flex; 221 | column-gap: .5rem; 222 | } 223 | 224 | .info__link { 225 | background-color: hsl(var(--hue), 90%, 50%); 226 | box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%); 227 | width: 2rem; 228 | height: 2rem; 229 | border-radius: .75rem; 230 | display: grid; 231 | place-items: center; 232 | font-size: 1.5rem; 233 | color: var(--black-color); 234 | transition: transform .4s; 235 | } 236 | 237 | .info__link:hover { 238 | transform: translateY(-.25rem); 239 | } 240 | 241 | /* Rotate icon */ 242 | .card__article:hover .card__clip { 243 | transform: rotate(-45deg); 244 | } 245 | 246 | /* Clip path animation */ 247 | .info:hover, 248 | .card__clip:hover ~ .info { 249 | clip-path: circle(100%); 250 | } 251 | 252 | /*=============== BREAKPOINTS ===============*/ 253 | /* For small devices */ 254 | @media screen and (max-width: 320px) { 255 | .container { 256 | margin-inline: 1rem; 257 | } 258 | 259 | .card__container { 260 | grid-template-columns: 1fr; 261 | } 262 | 263 | .info { 264 | padding: 1.5rem 1rem; 265 | } 266 | } 267 | 268 | /* For medium devices */ 269 | @media screen and (min-width: 768px) { 270 | .card__container { 271 | grid-template-columns: repeat(2, 260px); 272 | } 273 | } 274 | 275 | /* For large devices */ 276 | @media screen and (min-width: 1150px) { 277 | .card { 278 | height: 100vh; 279 | display: grid; 280 | place-content: center; 281 | } 282 | .card__container { 283 | grid-template-columns: repeat(3, 340px); 284 | } 285 | .card__article, 286 | .card__img { 287 | border-radius: 3rem; 288 | } 289 | .card__data { 290 | left: 2rem; 291 | bottom: 3rem; 292 | } 293 | .card__profession { 294 | font-size: var(--normal-font-size); 295 | } 296 | .card__clip { 297 | top: 1.5rem; 298 | right: 1.5rem; 299 | } 300 | 301 | .info { 302 | padding: 4rem 2rem 2.5rem; 303 | } 304 | .info__description, 305 | .info__button { 306 | font-size: var(--normal-font-size); 307 | } 308 | .info__description { 309 | margin-bottom: 1.5rem; 310 | } 311 | .info__social { 312 | left: 2rem; 313 | bottom: 2.5rem; 314 | column-gap: .75rem; 315 | } 316 | } 317 | -------------------------------------------------------------------------------- /assets/img/img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-clip-path-card/d0f0d5f7847ccd8c86f67238fcb5806b4a78c9ab/assets/img/img-1.png -------------------------------------------------------------------------------- /assets/img/img-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-clip-path-card/d0f0d5f7847ccd8c86f67238fcb5806b4a78c9ab/assets/img/img-2.png -------------------------------------------------------------------------------- /assets/img/img-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-clip-path-card/d0f0d5f7847ccd8c86f67238fcb5806b4a78c9ab/assets/img/img-3.png -------------------------------------------------------------------------------- /assets/img/img-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-clip-path-card/d0f0d5f7847ccd8c86f67238fcb5806b4a78c9ab/assets/img/img-bg.png -------------------------------------------------------------------------------- /assets/scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | /*=============== BASE ===============*/ 2 | *{ 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | body{ 9 | font-family: var(--body-font); 10 | } 11 | 12 | a{ 13 | text-decoration: none; 14 | } 15 | 16 | img{ 17 | display: block; 18 | max-width: 100%; 19 | height: auto; 20 | } 21 | -------------------------------------------------------------------------------- /assets/scss/components/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | /*=============== BREAKPOINTS ===============*/ 2 | /* For small devices */ 3 | @media screen and (max-width: 320px){ 4 | .container{ 5 | margin-inline: 1rem; 6 | } 7 | 8 | .card__container{ 9 | grid-template-columns: 1fr; 10 | } 11 | 12 | .info{ 13 | padding: 1.5rem 1rem; 14 | } 15 | } 16 | 17 | /* For medium devices */ 18 | @media screen and (min-width: 768px){ 19 | .card__container{ 20 | grid-template-columns: repeat(2, 260px); 21 | } 22 | } 23 | 24 | /* For large devices */ 25 | @media screen and (min-width: 1150px){ 26 | .card{ 27 | height: 100vh; 28 | display: grid; 29 | place-content: center; 30 | 31 | &__container{ 32 | grid-template-columns: repeat(3, 340px); 33 | } 34 | &__article, 35 | &__img{ 36 | border-radius: 3rem; 37 | } 38 | &__data{ 39 | left: 2rem; 40 | bottom: 3rem; 41 | } 42 | &__profession{ 43 | font-size: var(--normal-font-size); 44 | } 45 | &__clip{ 46 | top: 1.5rem; 47 | right: 1.5rem; 48 | } 49 | } 50 | 51 | .info{ 52 | padding: 4rem 2rem 2.5rem; 53 | 54 | &__description, 55 | &__button{ 56 | font-size: var(--normal-font-size); 57 | } 58 | &__description{ 59 | margin-bottom: 1.5rem; 60 | } 61 | &__social{ 62 | left: 2rem; 63 | bottom: 2.5rem; 64 | column-gap: .75rem; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /assets/scss/components/_card.scss: -------------------------------------------------------------------------------- 1 | /*=============== CARD ===============*/ 2 | .card{ 3 | position: relative; 4 | padding-block: 5rem; 5 | 6 | &__bg, 7 | &__blur{ 8 | position: absolute; 9 | top: 0; 10 | left: 0; 11 | width: 100%; 12 | height: 100%; 13 | } 14 | &__bg{ 15 | object-fit: cover; 16 | object-position: center; 17 | } 18 | &__blur{ 19 | backdrop-filter: blur(24px); 20 | } 21 | &__container{ 22 | position: relative; 23 | display: grid; 24 | grid-template-columns: 260px; 25 | justify-content: center; 26 | gap: 2rem; 27 | } 28 | &__article{ 29 | position: relative; 30 | border-radius: 2rem; 31 | overflow: hidden; 32 | } 33 | &__img{ 34 | border-radius: 2rem; 35 | transition: transform .4s; 36 | } 37 | &__shadow{ 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | width: 100%; 42 | height: 100%; 43 | background: linear-gradient(180deg, 44 | hsla(0, 0%, 0%, 0) 70%, 45 | hsl(0, 0%, 0%) 100%); 46 | } 47 | &__data{ 48 | color: var(--white-color); 49 | position: absolute; 50 | left: 1.5rem; 51 | bottom: 2rem; 52 | } 53 | &__name{ 54 | font-size: var(--big-font-size); 55 | margin-bottom: .25rem; 56 | } 57 | &__profession{ 58 | display: block; 59 | font-size: var(--small-font-size); 60 | } 61 | &__clip{ 62 | position: absolute; 63 | top: 1rem; 64 | right: 1rem; 65 | background-color: hsl(var(--hue), 90%, 50%); 66 | box-shadow: 0 0 16px 4px hsl(var(--hue), 90%, 50%); 67 | width: 2rem; 68 | height: 2rem; 69 | border-radius: 50%; 70 | display: grid; 71 | place-items: center; 72 | font-size: 1.5rem; 73 | color: var(--black-color); 74 | z-index: 5; 75 | cursor: pointer; 76 | transition: transform .4s; 77 | } 78 | &__article:hover .card__img{ 79 | transform: scale(1.1); 80 | } 81 | } 82 | 83 | /*=============== CARD INFO ===============*/ 84 | .info{ 85 | position: absolute; 86 | top: 0; 87 | left: 0; 88 | width: 100%; 89 | height: 100%; 90 | background-color: hsla(0, 0%, 0%, .1); 91 | backdrop-filter: blur(12px); 92 | padding: 3rem 1.5rem 1.5rem; 93 | color: var(--white-color); 94 | clip-path: circle(8px at 88% 9%); 95 | transition: clip-path .5s ease-in-out; 96 | 97 | &__name{ 98 | font-size: var(--biggest-font-size); 99 | margin-bottom: .5rem; 100 | } 101 | &__description{ 102 | font-size: var(--small-font-size); 103 | margin-bottom: 1rem; 104 | } 105 | &__button{ 106 | display: inline-flex; 107 | background-color: hsl(var(--hue), 90%, 50%); 108 | box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%); 109 | padding: .5rem .75rem; 110 | border-radius: .5rem; 111 | color: var(--black-color); 112 | font-size: var(--small-font-size); 113 | font-weight: var(--font-semi-bold); 114 | transition: box-shadow .4s; 115 | 116 | &:hover{ 117 | box-shadow: 0 0 20px hsl(var(--hue), 90%, 50%); 118 | } 119 | } 120 | &__social{ 121 | position: absolute; 122 | left: 1.5rem; 123 | bottom: 1.5rem; 124 | display: flex; 125 | column-gap: .5rem; 126 | } 127 | &__link{ 128 | background-color: hsl(var(--hue), 90%, 50%); 129 | box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%); 130 | width: 2rem; 131 | height: 2rem; 132 | border-radius: .75rem; 133 | display: grid; 134 | place-items: center; 135 | font-size: 1.5rem; 136 | color: var(--black-color); 137 | transition: transform .4s; 138 | 139 | &:hover{ 140 | transform: translateY(-.25rem); 141 | } 142 | } 143 | } 144 | 145 | /* Rotate icon */ 146 | .card__article:hover .card__clip{ 147 | transform: rotate(-45deg); 148 | } 149 | 150 | /* Clip path animation */ 151 | .info:hover, 152 | .card__clip:hover ~ .info{ 153 | clip-path: circle(100%); 154 | } 155 | -------------------------------------------------------------------------------- /assets/scss/config/_variables.scss: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;600;700&display=swap'); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root{ 6 | /*========== Colors ==========*/ 7 | /*Color mode HSL(hue, saturation, lightness)*/ 8 | /* 9 | For more colors visit: https://htmlcolorcodes.com/ 10 | -> Choose any color 11 | -> Copy the color mode (HSL) 12 | */ 13 | --yellow-color: 52; 14 | --green-color: 116; 15 | --pink-color: 300; 16 | 17 | --white-color: hsl(0, 0%, 100%); 18 | --black-color: hsl(0, 0%, 0%); 19 | 20 | /*========== Font and typography ==========*/ 21 | /*.5rem = 8px | 1rem = 16px ...*/ 22 | --body-font: "Montserrat Alternates", serif; 23 | 24 | --biggest-font-size: 2rem; 25 | --big-font-size: 1.5rem; 26 | --normal-font-size: .938rem; 27 | --small-font-size: .813rem; 28 | 29 | // Responsive typography 30 | @media screen and (min-width: 1150px){ 31 | --biggest-font-size: 3rem; 32 | --big-font-size: 2.5rem; 33 | --normal-font-size: 1rem; 34 | --small-font-size: .875rem; 35 | } 36 | 37 | /*========== Font weight ==========*/ 38 | --font-regular: 400; 39 | --font-semi-bold: 600; 40 | --font-bold: 700; 41 | } 42 | -------------------------------------------------------------------------------- /assets/scss/layout/_layout.scss: -------------------------------------------------------------------------------- 1 | /*=============== REUSABLE CSS CLASSES ===============*/ 2 | .container{ 3 | max-width: 1120px; 4 | margin-inline: 1.5rem; 5 | } 6 | 7 | .card{ 8 | &-yellow{ 9 | --hue: var(--yellow-color); 10 | } 11 | &-green{ 12 | --hue: var(--green-color) 13 | } 14 | &-pink{ 15 | --hue: var(--pink-color); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'config/variables'; 2 | @import 'base/base'; 3 | @import 'layout/layout'; 4 | @import 'components/card'; 5 | @import 'components/breakpoints'; 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Responsive clip path card - Bedimcode 14 | 15 | 16 |
17 | image 18 |
19 | 20 |
21 |
22 | image 23 |
24 | 25 |
26 |

JINX

27 | Frontend Developer 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 |
36 |

JINX

37 |

38 | Frontend developer, I create web pages with UI/UX user 39 | interface, I have years of experience and many happy 40 | clients with the projects completed, contact me now. 41 |

42 | Follow Me 43 |
44 | 45 | 56 |
57 |
58 | 59 |
60 | image 61 |
62 | 63 |
64 |

YAIK

65 | Web Designer 66 |
67 | 68 |
69 | 70 |
71 | 72 |
73 |
74 |

YAIK

75 |

76 | Frontend developer, I create web pages with UI/UX user 77 | interface, I have years of experience and many happy 78 | clients with the projects completed, contact me now. 79 |

80 | Follow Me 81 |
82 | 83 | 94 |
95 |
96 | 97 |
98 | image 99 |
100 | 101 |
102 |

XIMA

103 | Data Analytics 104 |
105 | 106 |
107 | 108 |
109 | 110 |
111 |
112 |

XIMA

113 |

114 | Frontend developer, I create web pages with UI/UX user 115 | interface, I have years of experience and many happy 116 | clients with the projects completed, contact me now. 117 |

118 | Follow Me 119 |
120 | 121 | 132 |
133 |
134 |
135 |
136 | 137 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-clip-path-card/d0f0d5f7847ccd8c86f67238fcb5806b4a78c9ab/preview.png --------------------------------------------------------------------------------