코딩 쿵푸 35 그래픽은 CSS3로 순전히 만들어졌습니다.
아래 그림을 보시라. 굉장한 Photoshop이 올바르게 작동합니까? 아니, CSS3에 의해 만들어졌습니다. 예, 그들은 완전히 “그어진” CSS3! 충분한 CSS3 애니메이션을 보았을 때 CSS3가 잠재적 인 플래시 킬러 역할을 할 수 있다고 생각했지만 잘못된 것입니다. 개발자는 아마도 애니메이션의 즐거움을 만족하지 못할 것이므로 다시 CSS3의 경계를 넘어서 그래픽 편집기의 영역에 도전하게됩니다.
이 게시물에는 35 세 심하게 제작 된 CSS3 그래픽이 포함되어 있으며 CSS3와 관련이없는 내용도 포함되어 있습니다. 애플 아이폰, 만화 캐릭터 도라에몽, 더 많은 놀라움을! 지옥, 그들 중 일부는 그것을 달성하는 방법을 가르쳐 자세한 자습서 와서! 그렇기 때문에 CSS3와 약간의 HTML을 사용하여 그래픽을 만드는 법을 배울 수있는 좋은 기회를 놓치지 마십시오. CSS3로 장난 꾸러기를 시작합시다.!
최신 버전의 Safari 또는 Google 크롬 개발자 버전을 사용하여이 데모를보실 것을 적극 권장합니다. 대부분의 데모는 Firefox 및 Chrome의 최신 버전을 지원합니다..
RSS 피드 아이콘
RSS 피드 CSS3로 제작 된 Icon, Hongkiat! 링크와 함께 실제 배울 수있는 자습서가 제공됩니다. “무승부” 단일 이미지를 사용하지 않고도 RSS 피드 아이콘. 자신의 손으로 CSS3 기적을 창조하십시오!
Apple iMac
그래, 내 눈도 그걸 믿을 수 없어,하지만 아이맥이야. “조립 된” 순전히 CSS3.
애플 키보드
CSS3로 제작 된 Apple Keyboard! 키보드 버튼을 누를 수도 있습니다..
애플 아이폰
오, 한 가지 더 : iPhoneCSS3.
벚꽃
CSS3의 진정한 awesomeness는 그것이 식물과 동물을 포함하여 무엇이든을 만드는 데 사용될 수 있다는 것입니다!
커피 컵
피곤한 하루? Safari / Google Chrome과 함께 제공되는 CSS3 커피를 갖자..
도라에몽
이 도라에몽은 CSS3 호환성 테스트로 유명합니다. Internet Explorer 8 이하에서 사용해보고 좋은 하루 되세요..
Meowww!
이제 코드로 완벽하게 구축 된 고양이를보고 있습니다! 너무 나쁜 CSS3는 적어도 현재로서는 음향 효과를 생성 할 수 없습니다..
버섯, Triforce, Poké ball, Kirby
“머저리, 나는 Mario 버섯, Triforce, Pokéball 및 Kirby와 같은 일부 괴상한 작품을 만들었습니다. 공룡 브라우저를 사용하는 사람들을 위해, 스크린 샷이 있습니다..”
냥 고양이
“81 개의 DOM 요소, 순수한 CSS의 688 줄, 오디오 루핑을위한 JavaScript 함수가 포함되어 있습니다. 내 CSS가 CSSLint 테스트에 실패하고 정말 자랑 스럽습니다..”
패턴
CSS3는 너무 컸기 때문에 이러한 패턴과 같은 웹 디자인을위한 기본 자산을 구축하는 데에도 사용할 수 있습니다..
봉봉
BonBon은 목표를 염두에두고 만든 CSS3 버튼입니다. 섹시한보고, 가능한 한 최소한의 마크 업을 가진 매우 유연한 버튼.
iOS 아이콘
놀랄 만한? 예. 이 아이콘은 둥근 모서리, 그림자, 그라디언트, rgba, 의사 요소, 과 변환, westciv 도구와 Border Radius와 같은 특정 도구를 사용하여.
소셜 미디어 아이콘
CSS3로 아이폰과 도라에몽을 만들 수 있다면 웹 개발자는 소셜 미디어 아이콘을 만들 수 없다. 그리고 그들은이 아이콘을 정말 잘 만들었습니다..
소셜 미디어 아이콘
사용 가능한 아이콘을 생성 할 때 CSS3의 가능성을 보여주는 또 다른 소셜 미디어 아이콘 모음.
독특한
“특이한 기능은 CSS에서만 제공되는 무료 아이콘 패키지입니다. 가능한 적은 HTTP 요청에 의존하거나 전혀 이미지를 사용할 필요가없는 사이트 및 웹 응용 프로그램 용으로 만들어졌습니다.”
GUI 아이콘
단순한 CSS와 의미 론적 HTML을 사용하는 84 개의 간단한 GUI 아이콘. 이것은 여전히로 간주됩니다 “비 생산 준비” 아이콘,하지만 그들은 매우 유망 해 보인다..
스티브 잡스
스티브 잡스는 디지털 시대의 아이콘 일뿐 아니라 HTML5를 크게 홍보하는 지도자이기도합니다..
트위터 실패 고래
트위터 실패 고래는 Internet Explorer 8 이하를 제외하고는 놀라지 않을 것입니다..
umbrUI
사용자 인터페이스 요소는 CSS3에서 가능하며 실제로 매끈하게 보입니다.!
어도비 포토샵 로고
Photoshop을 사용하지 않고 Photoshop에 대한 찬사.
Android 로고
안드로이드는 상당히 단순한 모양으로 만들어졌지만 CSS3의 장점을 설명합니다. 코드는 사용하고 Photoshop을 사용하지 않고 원하는 방식으로 간단한 내용을 수정할 수 있습니다.
Apple 로고
레트로 애플 로고는 CSS3를 사용하여 만들어졌으며, 제작 당시처럼 굉장했습니다..
Atari 로고
몇 년 전, Atari 로고가 CSS3를 사용하여 다시 만들어 질 것이라고 생각했을 것입니다..
BP 로고
간단한 로고는 CSS3로 쉽게 만들 수 있습니다. 이 로고 중 가장 좋은 것은 여기에 제시된 코드가 있습니다.!
드리블 로고
유명 사용자 전원 쇼케이스 사이트 Dribbble의 로고가 CSS3를 사용하여 전시 됨.
Magento 로고
Magento의 로고는 그리기가 너무 어렵지 않지만 결과는 전문적으로 보입니다..
맥도날드 로고
나는 사랑한다 'CSS3!
트위터 버드
완벽한 비율, 창조자에게 모자 팁.
Windows 로고
Windows 로고! 멋지게 보이며 쉽게 만들 수 있습니다.!
Internet Explorer 로고
정말 위대한 창조물! Internet Explorer 8 이하를 제외한 주요 브라우저에서 작동합니다..
Google 크롬 로고
나는 당신이 구글 크롬의 새로운 로고를 좋아하는지 모르겠다. 그러나이 CSS3 구글 크롬 로고는 굉장해 보인다.!
Opera 로고
이제 당신을위한 연습 :이 CSS3와 실제 차이점은 무엇입니까??
HTML5 로고
HTML5는 CSS3없이 빛날 수 없다.!
폭스 바겐 로고
색상 구성을 제외하고이 CSS3 복제본은 원래의 것과 동일하게 보입니다..
반사
순수 CSS3로 만든 로고와 그래픽의 붐으로 인해 실제 제작 환경에서 CSS3 제작 그래픽의 유용성에 대한 토론이 이루어졌습니다..
일반적으로 CSS3 그래픽은 괜찮지 만 특히 디자인을 변경하거나 그래픽의 크기를 조정해야 할 때 성가시다., 또한 여기서 가장 큰 고통은 기술이 아직 Internet Explorer와 같은 특정 브라우저에서 완전히 지원되지 않는다는 것입니다.
어떻게 생각해? 귀하의 사이트에서 CSS3로 만든 그래픽을 사용합니까? 현재의 단점에 대한 해결책이 있습니까? 당신의 생각을 알려주고 CSS3 그래픽을 구운 경우 공유해라.!
더
실제로 CSS3로 뭔가를 할 의향이 있습니까? 당신은 올바른 곳으로 왔습니다! 아래는 CSS3 습득의 길을 크게 돕기 위해 작성된 가이드 및 자습서입니다..
- CSS3 : 빵 부스러기 탐색 메뉴 만들기
- CSS3 : RSS 피드 로고 만들기
- CSS3 : 검색 창 만들기
- CSS3 : 초보자 가이드
- CSS3 / HTML5 : 웹 페이지 만들기
- CSS3 / HTML5 : AJAX 기반 문의 양식 만들기
