CSS : Image Reflections

daymoon_ยท2022๋…„ 4์›” 12์ผ
0

CSS

๋ชฉ๋ก ๋ณด๊ธฐ
17/18
post-thumbnail

๐Ÿค” ๋“ค์–ด๊ฐ€๊ธฐ ์ „

Swiper๋กœ ์Šฌ๋ผ์ด๋” ์‹ค์Šต ๋ฐ ๊ณต๋ถ€๋ฅผ ํ•˜๋˜ ์ค‘...
๋ญ”๊ฐ€ ๋” ๋ฉ‹์ง„ ์Šฌ๋ผ์ด๋”๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ์—ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์ฐพ๊ฒŒ๋œ โœจ๋ฐ˜์‚ฌํšจ๊ณผโœจ

๊ฐ™์ด ์ ์šฉํ•ด ๋ณด๋„๋ก ํ•˜์ž!


๐ŸŽจ Image Reflections

๐Ÿ“Œ ์ฐธ๊ณ ์ž๋ฃŒ
W3SCHOOL CSS Image Reflection
MDN -webkit-box-reflect
DailyDevTips CSS image reflection with box-reflect
HONGKIAT CSS3 Image Reflection [CSS3 Tips]
The State of CSS Reflections
Develop PAPER Skillfully use the WebKit box reflect reflection of CSS3 to realize various dynamic effects

-webkit-box-reflect์„ ์ด์šฉํ•˜๋ฉด ์ด๋ฏธ์ง€ ๋ฐ˜์‚ฌ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.


๐Ÿ›‘ ์ฃผ์˜ ์‚ฌํ•ญ

๐Ÿ“Œ ์ฐธ๊ณ ์ž๋ฃŒ
CSS : ๋ฒค๋” ํ”„๋ฆฌํ”ฝ์Šค(Vendor Prefix)
creativestudio CSS_-webkit-์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€?

  • -webkit์„ ์‚ฌ์šฉํ•œ๋‹ค. โ–ถ CSS3์— ๊ณต์‹์ ์œผ๋กœ ํฌํ•จ๋˜์ง€ ์•Š์€ ๊ธฐ๋Šฅ
  • ์ฆ‰, ํ‘œ์ค€ํ™”๊ฐ€ ๋˜์ง€ ์•Š์€ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ๋“ค์„ ๋งํ•œ๋‹ค. Chrom, Safari ๋“ฑ์˜ ๋ธŒ๋ผ์šฐ์ €์— ํƒ‘์žฌ๋œ ์—”์ง„์œผ๋กœ ์ž‘๋™ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ตฌํ˜• IE์—์„œ๋Š” ๊ธฐ๋Šฅ์ด ์ž‘๋™ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ–Œ๏ธ -webkit-box-reflect ์ ์šฉํ•˜๊ธฐ

โค๏ธ below
์›๋ณธ ์ด๋ฏธ์ง€๋ฅผ ์•„๋ž˜๋กœ ๋ฐ˜์‚ฌํ•œ ํšจ๊ณผ์ด๋‹ค.

  • HTML
<div class="container">
  <img class="img" src="https://cdn.pixabay.com/photo/2016/01/02/01/59/oranges-1117628_960_720.jpg" alt="">
</div>
  • CSS
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #111;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.container img {
  width: 300px;
}

.img {
  -webkit-box-reflect: below;
}

๐Ÿงก right
์›๋ณธ ์ด๋ฏธ์ง€๋ฅผ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ๋ฐ˜์‚ฌํ•œ ํšจ๊ณผ์ด๋‹ค.

  • HTML
<div class="container">
  <img class="img" src="https://cdn.pixabay.com/photo/2016/01/02/01/59/oranges-1117628_960_720.jpg" alt="">
</div>
  • CSS
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #111;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.container img {
  width: 300px;
}

.img {
  -webkit-box-reflect: below;
}

๐Ÿ’› left
์›๋ณธ ์ด๋ฏธ์ง€๋ฅผ ์™ผ์ชฝ์œผ๋กœ ๋ฐ˜์‚ฌํ•œ ํšจ๊ณผ์ด๋‹ค.

  • HTML
<div class="container">
  <img class="img" src="https://cdn.pixabay.com/photo/2016/01/02/01/59/oranges-1117628_960_720.jpg" alt="">
</div>
  • CSS
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #111;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.container img {
  width: 300px;
}

.img {
  -webkit-box-reflect: left;
}

๐Ÿ’š above
์›๋ณธ ์ด๋ฏธ์ง€๋ฅผ ์œ„์ชฝ์œผ๋กœ ๋ฐ˜์‚ฌํ•œ ํšจ๊ณผ์ด๋‹ค.

  • HTML
<div class="container">
  <img class="img" src="https://cdn.pixabay.com/photo/2016/01/02/01/59/oranges-1117628_960_720.jpg" alt="">
</div>
  • CSS
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #111;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.container img {
  width: 300px;
}

.img {
  -webkit-box-reflect: above;
}

๐Ÿ’™ Reflection Offset
๋ฐ˜์‚ฌ๋œ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉ์ž๊ฐ€ ์ง€์ •ํ•œ ๋งŒํผ ๋ฉ€์–ด์ง€๋„๋ก ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

/* ์•ž ๋‚ด์šฉ์€ ์œ„์— ์žˆ๋Š” ์ฝ”๋“œ์™€ ๊ฐ™์œผ๋ฏ€๋กœ ์ƒ๋žต */

.img {
  -webkit-box-reflect: below 20px;
}

๐Ÿ’œ Reflection With Gradient
๋ฐ˜์‚ฌ๋œ ์ด๋ฏธ์ง€์— ์„œ์„œํžˆ ํ๋ ค์ง€๋Š” ํšจ๊ณผ๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

/* ์•ž ๋‚ด์šฉ์€ ์œ„์— ์žˆ๋Š” ์ฝ”๋“œ์™€ ๊ฐ™์œผ๋ฏ€๋กœ ์ƒ๋žต */

.img {
  -webkit-box-reflect: below 0 linear-gradient(transparent, rgba(0,0,0,0), rgba(0,0,0,0.4));
}

๐Ÿฅฐ ์ ์šฉ ์˜ˆ์‹œ : Swiper + Image Reflections

์ด์ œ ๋ชจ๋“  ๊ฑธ ํ•ฉ์ณ๋ณด์ž!


๐Ÿ—“๏ธ ์ˆ˜์ • ๋ฐ ์ถ”๊ฐ€

โœ… 2022.04.12

  • ์˜ˆ์‹œ gif ์ถ”๊ฐ€
profile
๋ฏธ์ง€์˜ ๊ณต๊ฐ„๐ŸŒ™

0๊ฐœ์˜ ๋Œ“๊ธ€