• 회원가입
  • 로그인
  • 구글아이디로 로그인

[image] CSS - Polaroid Images / Cards - (폴라로이드 이미지)

폴라로이드 이미지 효과


<style>

body {margin:25px;}


.box {

  width: 80%;

  background-color: white;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  margin: 0 auto 25px;

}

.box img {width:100%; max-width:100%;}

.box .subject {text-align: center; padding: 10px 20px;}

</style>


<div class="box">

  <img src="https://source.unsplash.com/random" alt="랜덤이미지1">

  <div class="subject">

  <p>랜덤이미지1</p>

  </div>

</div>


<div class="box">

  <img src="https://picsum.photos/200/300" alt="랜덤이미지2">

  <div class="subject">

  <p>랜덤이미지2</p>

  </div>

</div>


결과보기

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
image CSS - Rounded Images (둥근/동그란 이미지 만들기 = 이미지 테두리 둥글게/동그랗게) - I…
image CSS - Thumbnail Images - (썸네일 이미지 스타일)
image CSS - enter an Image (이미지 가운데정렬)
image CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)
image CSS - Polaroid Images / Cards - (폴라로이드 이미지)
image CSS - Image Filter - (이미지 필터 - 흑백/흐림 효과)
image CSS - Image Hover Overlay - (이미지 마우스오버시 효과 = 이미지허버효과 = 이미지마우…
image CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)
image CSS - filter 속성 - 이미지필터효과 (= filter속성 = 필터속성) ※ 흑백이미지만들기 ※ 이…
image CSS - object-fit 속성 - 컨테이너에 맞게 '이미지/비디오' 크기 조정 방법 지정 (= obje…
image CSS - object-position 속성 - <img>/<video>가 "자체 콘텐츠 상자" 내부의 x/…
image CSS - image-rendering 속성 - 크기 조정 가능 이미지의 렌더링 방식 지정 (= image-…
목록
찾아주셔서 감사합니다. Since 2012