본문 바로가기

CSS3

[CSS3] CSS3를 이용한 여러가지 배경 패턴 만들기 처음엔 그냥 패턴 이미지 다운 받는 줄 알았어요~하지만 CSS3, SASS, LESS를 통해서 만든 배경화면입니다.상상을 초월하는 CSS3때문에 소스를 하나하나씩 살펴봤는데...정말 이렇게 모양이 나오네요^^모든 소스는 오픈되어 있으니 한번 살펴보세요^^ http://codepen.io/collection/xevgu/
[CSS] CSS3와 관련된 Generators 프로그램 모음입니다. http://css3maker.com/ CSS3의 Gradient, Transform, Animation, Transition, RGBA, Text Shadow, Box Shadow, Text Rotation의기능을 알아 볼 수 있는 프로그램입니다. http://westciv.com/tools/gradients/ CSS3의 Linear Gradients, Radial Gradients, Text Properties, Box Properties, Transforms의기능을 알아볼 수 있는 제네레이터입니다. http://www.cssmatic.com/ CSS3의 Gradient 제네레이터입니다.SASS 소스까지 지원을 하네요 http://grad3.ecoloniq.jp/ 일본에서 제작된 CSS3 버튼 만들기..
[ Public] 퍼블리싱에 있어 백과사전과 같은 사이트네요^^ 오늘 발견한 사이트는 백과사전과 같은 사이트입니다.거의 모든 프로그램 레퍼런스는 다 있네요~ 우선 우리에게 제일 필요한 html5와 CSS3가 엄청정리가 잘되어 있습니다.물론 영어라는 단점이 있지만 크게 이해하는데에는걸림돌이 되지 않습니다. 차후 누군가가 한글 버젼을 내 놓지 않을까?라는 생각은 듭니다. 보시면 아시겠지만정리가 쩝니다^^파이어 폭스에서 개발하고 정리한 것 같네요^^ 제가 운영하고 있는 웹 스토리 보이 사이트도조만간 이렇게 해야겠네요^^ 이것 뿐만 아니라 자바스크립, 제이쿼리, PHP 등등없는게 없네요^^참고하세요~ http://devdocs.io/
이제는 CSS3를 통해서 3D의 입체적 작업을 할 수 있네요^^ 어떤 프로그램을 써서 하는거지~~~하고 유심히 봤는데...CSS3로 만들었네요^^ 신기하네요^^최신 기술이라 크롬, 사파리, 오페라에서만 작동을 하네요^^이제 3D MAX, 마야도HTML5/CSS3로 대체되는 날이 오겠네요^^ 기본 화면은 3D 프로그램과 유사합니다.상단의 도형 아이콘을 통해 박스를 만들 수 있습니다. 이렇게 도형을 추가하면 X, Y, Z 측면을 통해 화면을 볼 수 있습니다. 실제 아이폰은 모델은 이렇게 만들어졌습니다.디테일한 셋팅도 가능하구요iframe을 통해 따로 연결도 시킬 수 있습니다. http://codepen.io/pen 소스도 바로 확인이 가능합니다. 정말 멋진 프로그램입니다.박수가 절로 나오네요^^ 직접 확인해보세요강추합니다. http://tridiv.com
[HTML/CSS] HTML/CSS와 관련된 튜토리얼 모음입니다. [HTML/CSS] HTML/CSS와 관련된 튜토리얼 모음입니다. 001. CSS3를 이용한 탭 메뉴(tab menu) 만들기How to Create a CSS3 Tabbed Navigation [미리보기] 002. CSS3를 이용한 버티컬 네비게이션 메뉴 만들기Orman Clark’s Vertical Navigation Menu [미리보기] 003. CSS3를 이용한 오목한 버튼 이미지 코딩하기Tagtastic Tag Cloud with CSS Transformations [미리보기] 004. 웹폰트와 배경이미지를 이용한 별 코딩Create a Rating System With CSS, Web fonts and Sprites [미리보기] 005. CSS3를 이용한 메뉴와 서브메뉴 만들기How to Cr..
[HTML/CSS] CSS3 transform을 이용한 화면 전환효과 페이지 CSS3 transform을 이용한 화면 전환효과 페이지 만들기 A Collection of Page Transitions [미리보기][목록보기] CSS3d의 Transtions효과를 이용한 페이지 전환효과입니다. 익스에서 작동을 하지않습니다. 구글에서 확인을 해야 이 소스의 놀라움을 알 수 있습니다.
[HTML/CSS] 미디어쿼리를 이용한 반응형 메뉴 만들기 미디어쿼리를 이용한 반응형 메뉴 만들기 Responsive Retina-Ready Menu [미리보기][목록보기] 반응형(responsive)을 기본으로 하고 있는 메뉴 코딩입니다. 이미 기존에 자료가 많이 노출되어 있는 자료네요^^ 여기는 소스도 좋고 디자인도 좋아서 올립니다.
[HTML/CSS] CSS3의 Transtions효과를 이용한 애니메이션 CSS3의 Transtions효과를 이용한 애니메이션 Elements Animations and Transitions [미리보기][목록보기] CSS3의 Transtions효과를 통해 이런 애니메니션을 만들 수 있다는게 신기하네요^^ 꼭 따라해봐야겠어요~ 익스플로러에서는 작동안됩니다.
[HTML/CSS] CSS3를 이용한 심플한 아이콘 오버 효과 만들기 CSS3를 이용한 심플한 아이콘 오버 효과 만들기 Icon Hover Effects [미리보기][목록보기] CSS3를 이용한 마우스 오버 효과 아이콘입니다. 9종류의 다양한 효과를 보여주네요^^
[HTML/CSS] CSS3를 통한 창의적인 버튼 스타일 만들기 CSS3를 통한 창의적인 버튼 스타일 만들기 Creative Button Styles [미리보기][목록보기] CSS3의 여러가지 효과를 통해서 만든 버튼스타일입니다. 구 익스에서 작동이 안되니 효율성 면에서는 약간 떨어집니다.^^
[HTML/CSS] CSS3를 통한 자막(Caption) 오바 효과 만들기 CSS3를 통한 자막(Caption) 오바 효과 만들기 Caption Hover Effects [미리보기][목록보기] CSS3를 통해서 다양한 오버효고를 보여주는 튜토리얼입니다. CSS3를 통해 만들었기 때문에 구 익스플로러에서는 작동 안된다는거~~ 크로스브라우징까지 생각하신다면 제이쿼리 쪽에서 알아보세요^^
[HTML/CSS] CSS3로 만든 메뉴 애니메이션 드롭다운 메뉴 RSS Feed E-mail Twitter Facebook Google+ me2day yozm Cafe CSS3로 만든 메뉴 애니메이션 드롭다운 메뉴 CSS3 animated dropdown menu [미리보기][목록보기]
제이쿼리, CSS3, HTML5 관련 튜토리얼 모음 RSS Feed E-mail Twitter Facebook Google+ me2day yozm Cafe HTML/CSS [HTML/CSS] 001. CSS3를 이용한 탭 메뉴(tab menu) 만들기 How to Create a CSS3 Tabbed Navigation [미리보기] [HTML/CSS] 002. CSS3를 이용한 버티컬 네비게이션 메뉴 만들기 Orman Clark’s Vertical Navigation Menu [미리보기] [HTML/CSS] 003. CSS3를 이용한 오목한 버튼 이미지 코딩하기 Tagtastic Tag Cloud with CSS Transformations [미리보기] [HTML/CSS] 004. 웹폰트와 배경이미지를 이용한 별 코딩Create a Rating Syste..
[CSS3/HTML5] html5를 이용한 마우스 오버시 이미지 변경하기 RSS Feed E-mail Twitter Facebook Google+ me2day yozm Cafe html5를 이용한 마우스 오버시 이미지 변경하기 [Circle Hover Effects with CSS Transitions] 데모보기
[CSS3/HTML5] 숫자를 입력한 각도에 따라 배경 움직이게 만들기 RSS Feed E-mail Twitter Facebook Google+ me2day yozm Cafe 숫자를 입력한 각도에 따라 배경 움직이게 만들기 [Perfectly Rotate and Mask Thumbnails With CSS3] 미리보기
[CSS3/HTML5] CSS3를 이용한 희미한 주석효과 코딩하기 CSS3를 이용한 희미한 주석효과 코딩하기[Annotation Overlay Effect with CSS3]