css position - 이미지 CSS 11가지 효과

 

css position - 이미지 CSS 11가지 효과

롤오버(Roll Over)시 등 이미지 노출에 대한 Show Case
[참고] [Web Design 101: Backgrounds]

01. 롤오버 처리
[자료] Taking Control of Image Rollovers
[예제] css-tricks.com/examples/ImageRolloverIdeas/
[참고] Image Rollover Borders That Do Not Change Layout

[자료] CSS Swap Hover Effect

 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
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
 

10. Layered Images 만들기
[자료] How to Recreate Silverback's Parallax

 

11. Image Decoration
[자료] CSS Decorative Gallery

 

- 5 Ways to Spice up Your Images with CSS
- 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