Mã hóa đồ họa Kung-fu 35 được xây dựng hoàn toàn bằng CSS3
Nhìn vào đồ họa dưới đây, Photoshop hoạt động tuyệt vời phải không? Không, chúng được tạo bởi CSS3. Vâng là họ hoàn toàn “rút ra” bằng CSS3! Khi chúng tôi đã thấy đủ hình ảnh động CSS3, chúng tôi nghĩ rằng tất cả CSS3 đều có thể làm kẻ giết Flash tiềm năng, nhưng chúng tôi đã sai. Các nhà phát triển có thể không thỏa mãn với sự thú vị của hoạt hình, vì vậy, một lần nữa, họ đẩy ranh giới của CSS3 để thách thức lĩnh vực của trình soạn thảo đồ họa.
Với bài đăng này có 35 đồ họa CSS3 được làm cẩn thận, thậm chí bao gồm những thứ bạn không liên quan đến CSS3 như Apple iPhone, nhân vật hoạt hình Doraemon, và nhiều bất ngờ hơn nữa! Heck, một số trong số họ thậm chí đi kèm với hướng dẫn chi tiết hướng dẫn bạn làm thế nào để đạt được nó! Vì vậy, đừng bỏ lỡ cơ hội tuyệt vời để học cách tạo đồ họa bằng CSS3 và một chút HTML, hãy nghịch ngợm với CSS3!
Bạn thực sự nên xem các bản demo này bằng phiên bản Google Chrome hoặc Nhà phát triển mới nhất của Google Chrome. Mặc dù vậy, hầu hết các bản demo đều hỗ trợ phiên bản Firefox và Google Chrome mới nhất.
Biểu tượng nguồn cấp dữ liệu RSS
Biểu tượng nguồn cấp dữ liệu RSS được xây dựng bằng CSS3, độc quyền từ Hongkiat! Cùng với liên kết là một hướng dẫn mà bạn thực sự có thể học “vẽ tranh” biểu tượng RSS Feed mà không sử dụng ngay cả một hình ảnh. Tạo phép màu CSS3 bằng tay của chính bạn!
Apple iMac
Vâng, đôi mắt của tôi cũng không thể tin được, nhưng đó là iMac “lắp ráp” hoàn toàn với CSS3.
Bàn phím Apple
Đó là Bàn phím Apple được xây dựng với CSS3! Heck, các nút bàn phím thậm chí có thể được nhấn.
Apple iPhone
Ồ, còn một điều nữa: iPhoneCSS3.
Hoa anh đào
Điều tuyệt vời thực sự của CSS3 là nó có thể được sử dụng để xây dựng bất cứ thứ gì kể cả thực vật và động vật!
Tách cà phê
Một ngày mệt mỏi? Hãy uống cà phê CSS3, được phục vụ tốt nhất với Safari / Google Chrome.
Doraemon
Doraemon này nổi tiếng với thử nghiệm tương thích CSS3. Dùng thử trong Internet Explorer 8 trở xuống và chúc một ngày tốt lành.
Meowww!
Bây giờ bạn đang nhìn vào một con mèo được xây dựng hoàn toàn bằng mã! Quá tệ, CSS3 không thể tạo hiệu ứng âm thanh, ít nhất là bây giờ.
Nấm, Triforce, Poké bóng, Kirby
“Là một mọt sách, tôi đã tạo ra một số sáng tạo kỳ lạ - một cây nấm Mario, Triforce, Pokéball và Kirby. Đối với những người sử dụng trình duyệt khủng long, có một ảnh chụp màn hình của nó trông giống như.”
Mèo Nyan
“Nó chứa 81 phần tử DOM, 688 dòng CSS thuần và một hàm JavaScript để lặp âm thanh. CSS của tôi thất bại trong bài kiểm tra CSSLint và tôi thực sự tự hào về điều này.”
Mẫu
CSS3 tuyệt vời đến mức nó cũng có thể được sử dụng để xây dựng tài sản cơ bản cho thiết kế web, chẳng hạn như các mẫu này.
BonBon
BonBon là các nút CSS3 ngọt ngào được tạo ra với mục tiêu trong tâm trí: các nút trông gợi cảm, thực sự linh hoạt với các đánh dấu tối giản nhất có thể.
Biểu tượng iOS
Kinh ngạc? Vâng. Những biểu tượng này được xây dựng bởi góc tròn, bóng tối, độ dốc, rgba, yếu tố giả, và biến đổi, với sự giúp đỡ của một số công cụ như công cụ của westciv và Border Radius.
Biểu tượng truyền thông xã hội
Điều đó là không thể đối với nhà phát triển web không xây dựng các biểu tượng phương tiện truyền thông xã hội nếu họ có thể xây dựng iPhone và Doraemon bằng CSS3. Và họ đã xây dựng những biểu tượng này thực sự tốt.
Biểu tượng truyền thông xã hội
Một bộ biểu tượng phương tiện truyền thông xã hội khác cho thấy khả năng của CSS3 trong việc tạo các biểu tượng có thể sử dụng.
Riêng
“Peculiar là gói biểu tượng miễn phí chỉ được tạo bằng CSS. Nó được tạo cho các trang web và ứng dụng web phụ thuộc vào ít yêu cầu HTTP nhất có thể hoặc không cần sử dụng bất kỳ hình ảnh nào cả.”
Biểu tượng GUI
84 biểu tượng GUI đơn giản chỉ sử dụng CSS và HTML ngữ nghĩa. Điều này vẫn được coi là “không sẵn sàng sản xuất” biểu tượng, nhưng chúng trông rất hứa hẹn.
Steve Jobs
Steve Jobs không chỉ là biểu tượng của thời đại kỹ thuật số, mà còn là nhà lãnh đạo thúc đẩy mạnh mẽ HTML5.
Cá voi thất bại Twitter
Cá voi Twitter thất bại sẽ không làm bạn ngạc nhiên, ngoại trừ trong Internet Explorer 8 trở xuống.
ô dù
Các yếu tố Giao diện người dùng được thực hiện với CSS3 và trông nó rất đẹp!
Logo Adobe Photoshop
Cống hiến cho Photoshop mà không cần sử dụng Photoshop.
Logo Android
Android được tạo thành từ những hình dạng khá đơn giản, nhưng nó giải thích lợi thế của CSS3: bạn có thể tạo ra những thứ đơn giản và sửa đổi nó theo bất kỳ cách nào bạn muốn bằng cách chỉ sử dụng mã chứ không phải Photoshop.
Logo của Apple
Logo Retro của Apple được trình bày bằng CSS3, vẫn tuyệt vời như thời gian nó được tạo ra.
Logo Atari
Nhiều năm trước, ai có thể nghĩ logo Atari sẽ được tạo lại bằng CSS3.
Logo BP
Logo đơn giản có thể được thực hiện dễ dàng với CSS3. Điều tốt nhất với một số logo được trưng bày ở đây là có mã được cung cấp để bạn dùng thử!
Logo Dribbble
Trang web giới thiệu nổi tiếng do người dùng cung cấp Logo của Dribbble được giới thiệu bằng CSS3.
Logo Magento
Logo của Magento không quá khó vẽ nhưng kết quả có vẻ chuyên nghiệp.
Logo McDonald
Tôi đang yêu CSS3!
Chim Twitter
Tỷ lệ hoàn hảo, mũ cho người sáng tạo.
Logo Windows
Logo Windows! Trông thật tuyệt vời, và thật dễ dàng để tạo ra!
Logo Internet Explorer
Sáng tạo thực sự tuyệt vời! Nó hoạt động trong các trình duyệt chính trừ Internet Explorer 8 trở xuống.
Logo Google Chrome
Tôi không chắc bạn có thích logo mới của Google Chrome hay không, nhưng logo Google Chrome CSS3 này trông tuyệt vời!
Logo Opera
Bây giờ là một thực tế cho bạn: sự khác biệt giữa phần CSS3 này và thỏa thuận thực sự là gì?
Logo HTML5
HTML5 không thể tỏa sáng mà không có CSS3!
Logo của Volkswagen
Ngoại trừ bảng màu, bản sao CSS3 này trông giống hệt bản gốc.
Suy tư
Với sự bùng nổ của logo và đồ họa được làm bằng CSS3 thuần túy, các cuộc thảo luận sẽ tranh luận rất nhiều về khả năng sử dụng của đồ họa do CSS3 sản xuất trong môi trường sản xuất trong thế giới thực.
Nói chung đồ họa CSS3 là tốt, nhưng nó có thể gây khó chịu đặc biệt là khi bạn cần thay đổi thiết kế hoặc đơn giản thay đổi kích thước đồ họa, nỗi đau lớn nhất ở đây là công nghệ chưa được hỗ trợ đầy đủ bởi một số trình duyệt nhất định như Internet Explorer.
Bạn nghĩ sao? Bạn sẽ sử dụng đồ họa được tạo bằng CSS3 trong trang web của mình chứ? Bạn có giải pháp nào cho nhược điểm hiện tại của nó không? Hãy cho chúng tôi biết suy nghĩ của bạn và chia sẻ với chúng tôi nếu bạn vừa nướng đồ họa CSS3!
Hơn
Sẵn sàng thực sự làm điều gì đó với CSS3? Bạn đã đến đúng nơi! Dưới đây là các hướng dẫn và hướng dẫn được viết để hỗ trợ bạn rất nhiều trên con đường làm chủ CSS3.
- CSS3: Tạo Menu điều hướng Breadcrumb
- CSS3: Tạo Logo RSS Feed
- CSS3: Tạo Hộp Tìm kiếm
- CSS3: Hướng dẫn cho người mới bắt đầu
- CSS3 / HTML5: Tạo trang web
- CSS3 / HTML5: Tạo biểu mẫu liên hệ dựa trên AJAX
