CSS3

CSS로 이미지를 엷은 색으로 만들기 – Image Tint With CSS

간단한 CSS만으로도 이미지에 엷은 색조가 들어가게 효과를 줄 수 있습니다. 이미지에 마우스를 올려놓았을 때 이런 처리를 해준다면 독특한 느낌을 줄 수 있을 것입니다. Image Tint With CSS [데모보기] CSS Pseudo-Element와 transition 속성을 사용하고 있습니다. 또, opacity 속성을 사용하면 위와는 다른 또다른 느낌을 줄 수 있습니다. [데모보기] »

CSS3 3D로 직육면체 자유롭게 회전시키기

CSS3 3D transforms로 직육면체를 마우스로 상하 좌우 360도 회전시킬 수 있습니다. Natural Object-Rotation with CSS3 3D [데모보기] 원문을 보시면 소스코드가 자세히 설명되어 있을뿐 아니라 3D rotation에 대한 이해를 돕기위한 그림도 있습니다. 데모를 보시면 직육면체가 자유자재로 움직일 뿐만 아니라 바닥면에는 거울에 비친 것과 같은 효과도 들어가 있습니다. »

CSS3 말풍선 툴팁 jQuery Plugin

말풍선도 예쁘고 툴팁이 생길때와 없어질 때 효과가 예쁩니다. Bubble Point Tooltips with CSS3 & jQuery 말풍선 끝에 뾰족한 부분은 이미지를 사용하지 않고 네모난 div를 45도 rotate시켜서 만든 것입니다. CSS3의 border-radius, transition, transform을 사용하기 때문에 IE 6,7,8에서는 말풍선 자체가 작동을 안하지는 않지만 예쁘게 보이지는 않습니다. »

Fullscreen Image Blur Effect with HTML5

먼저 데모를 한번 보시죠 [데모보기] 화면 아래에 썸네일을 클릭해서 다른 이미지로 전환이 될 때 단순한 fade-in,out 효과와는 다르게 이미지가 Blur 되는 것을 보실수 있으십니다. 이미지의 background로 blur된 이미지를 넣어뒀다가 다른 이미지로 전환될 때 fade-out 되면서 blur가 보이는 방법으로 만든 것입니다. 그리고 썸네일 이미지도 동그랗고 이쁠 뿐더러 효과도 들어가 있습니다. Fullscreen Image Blur Effect with HTML5에 동작원리에 대한 설명이 있고 다운로드도 받으실 수 있습니다. »

아이콘으로 이루어진 폰트

웹폰트를 많이 사용하시나요? CSS의 @font-face를 사용해서 사용자의 기기에 내장되어 있는 폰트가 아닌, 서버에서 제공되는 폰트를 제공하는 것을 웹폰트라고 하는데요 이걸 사용해서 진짜 신기한 것을 할 수 있습니다. 아래의 링크를 방문해 보세요 Fico 페이지 상단에 다양한 아이콘들이 보이시죠? 이 것들이 폰트입니다. 즉, 아이콘 이미지가 아닙니다. @font-face를 사용해서 이 폰트를 웹폰트로 가져오면, 이 아이콘들을 사용할 수 있게 되는 것입니다. 예를 들어, 이 폰트를 지정하면 a는 종모양의 아이콘으로 보이고 b는 북마크 아이콘 모양으로 보이게 됩니다. 이 폰트는 유료로 판매되고 있는데 제가 구입을 하지는 않았기 때문에 실제 예를 보여드릴 수는 없지만 위 홈페이지에 가서 한 번 살펴보세요. »

Page 6 of 7«4567