롤오버(Roll Over)시 등 이미지 노출에 대한 Show Case
[참고] [Web Design 101: Backgrounds]
01. 롤오버 처리
[자료] Taking Control of Image Rollovers
[예제] css-tricks.com/examples/Image…
[참고] Image Rollover Borders That Do Not Change Layout
02. 마우스오버시 Image의 position(상하 혹은 좌우)을 조작하여 다른 형태를 보여준다.
[자료] CSS Rollovers www.kirupa.com/css/css_rollovers.htm
03. Frame(액자) 형태를 이용하거나, Shadow Image를 이용하여 이미지에 입체감을 준다.
[자료] 5 CSSriffic Treatments to Make Your Images Stand Out
① 사진원본
② 사진 + Frame(border), border의 top-left, right-bottom 쌍의 색상을 달리해 입체감 줄 수 있음
③ 사진 + Shadow, Shadow는 CSS만을 이용하거나 shadow를 위한 이미지를 이용해 처리
04. 자르지 않고 사이즈 작은 이미지 만들기
background-image의 position, width, height를 이용하거나 overflow 등을 이용
[자료] Create Resizable Images With CSS
05. 부분적으로 투명처리하기
Opacity 속성을 이용하거나 PNG의 특성을 이용하거나 두 개의 Background-image를 이용하여 작업
[자료] Partial Opacity
06. Frame을 이용한 Layered Image 만들기
[자료] Baseball Card Image Captions with CSS and JavaScript
07. Hover시 이미지 영역 일부 교체
[자료] CSS Sprites: Image Slicing’s Kiss of Death
[참고] Fast Rollovers Without Preload
[참고] CSS Image Replacement
08. 부드러운 모서리 만들기 (CSS+JavaScript)
[자료] Soft Edge Technique: Soft Edges and Opacity Gradients for Images
09. Overflow 속성을 이용한 Thumbnail 사이즈 조절
[자료] Create Resizing Thumbnails Using Overflow Property
#2 Thumbnail Hover
10. Layered Images 만들기
[자료] How to Recreate Silverback’s Parallax
11. Image Decoration
[자료] CSS Decorative Gallery
– Protect Your Images with CSS Watermarks
– Using Shadows to Improve the Usability of Menus and Windows
– Install FLIR – Typography Solution For The Web
– Animated GIF For CSS Sprites
– How to: CSS Large Background
– Unique CSS Borders – Boring borders step aside
– Achieving Double Background Effect with CSS
– 100+1 Free Photo/Image Galleries (Ajax, Flash, PHP)
– [HowTo] Resizeable Background Image
– Using jQuery For Background Image Animations
– PhotoNav – panorama view
– [CLIP Property] Creating Thumbnails Using The CSS CLIP Property
[출처] 이미지 CSS ㅣ 작성자 자리끼
Leave a Reply