纯HTML/CSS做的Windows图标
<style>#windows .canvas {
background: #fff;
}
#windows .icon {
left:193px;
position: absolute;
top:20px;
-moz-transform: rotate(16deg);
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
}
.window-e1,
.window2,
.window3,
.window4 {
position:absolute;
}
.window-e1 {
border-radius:100px/67px;
clip: rect(0px 77px 67px 0);
height: 67px;
left: 9px;
position: absolute;
top: 11px;
width:102px;
}
.window-e2 {
height: 85px;
left: 0;
position: absolute;
top:27px;
-moz-transform:skewy(-30deg);
-webkit-transform:skewy(-30deg);
transform:skewy(-30deg);
width:25px;
}
.window-e3 {
height: 41px;
left: 24px;
position: absolute;
top: 64px;
width: 62px;
}
.window-e4 {
background: #fff;
opacity:1;
border-radius:100px/67px;
clip:rect(0 77px 12px 16px);
height: 67px;
left: 9px;
position: absolute;
top: 96px;
width:100px;
}
.window1 {
left:0;
position: absolute;
top:0;
}
.window1 .window-e1,
.window1 .window-e2,
.window1 .window-e3 {
background: #d53407;
}
.window2 {
left: 183px;
position:absolute;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
top: 119px;
}
.window2 .window-e1,
.window2 .window-e2,
.window2 .window-e3 {
background: #7dae1c;
}
.window3 {
left: 0;
position: absolute;
top:95px;
}
.window3 .window-e1,
.window3 .window-e2,
.window3 .window-e3 {
background: #3576ac;
}
.window4 {
left: 183px;
position:absolute;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
top: 214px;
}
.window4 .window-e1,
.window4 .window-e2,
.window4 .window-e3 {
background: #fac112;
}
#windows .glow {
background: -moz-gradient(radial, 50% 50%, 20, 50% 50%, 100, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background: -webkit-gradient(radial, 50% 50%, 20, 50% 50%, 100, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
height: 214px;
position: absolute;
width:182px;
}
#windows .registered {
left:190px;
position: absolute;
-moz-transform: rotate(-16deg);
-webkit-transform: rotate(-16deg);
transform: rotate(-16deg);
top:160px;
}
#windows .shadow1,
#windows .shadow2,
#windows .shadow3 {
background: #ccc;
}
.window1 .window-e4,
.window3 .window-e4 {
top:101px;
}
.window1 .shadow1,
.window3 .shadow1 {
left: 65px;
clip: rect(0px 30px 94px 21px);
-moz-transform: skewy(30deg);
-webkit-transform: skewy(30deg);
transform: skewy(30deg);
top: 16px;
}
.window1 .shadow2,
.window3 .shadow2 {
clip:rect(50px 40px 90px 5px);
top:30px;
width:32px;
}
.window1 .shadow3,
.window3 .shadow3 {
clip: rect(0 77px 12px 16px);
top:96px;
}
.window2 .shadow1,
.window4 .shadow1 {
clip:rect(0px 10px 90px 5px);
left: -10px; top: 28px;
}
.window2 .shadow2,
.window4 .shadow2 {
clip:rect(70px 40px 90px 5px);
left:-6px;
top:-44px;
}
.window2 .shadow3,
.window4 .shadow3 {
clip:rect(0 73px 22px 0px);
left:9px;
top:6px;
}</style>
分享到：
相关推荐
Js CSS仿Windows桌面菜单及图标的效果,用到了不少Ajax操作相关技巧，table 目录下是做得稍复杂一点的类似桌面效，test 目录是简单的,自己看吧 调用方法如: a onclick="win('div1','标题','demo.htm','500','...
用html、css、js实现的windows桌面和窗口。包括开始菜单、状态蓝、窗口等。和windows系统操作方法一样，如双击图标打开窗口，不用的窗口最小化到状态蓝，右击桌面图标可打开右键菜单。开始菜单中附件---游戏中有常见...
"Windows系统图标"特指用于Microsoft Windows操作系统中的图形元素，这些图标通常与系统组件、应用程序、文件类型等关联。Windows系统的图标设计遵循一定的规范，确保在整个系统中保持一致性和易识别性。 "软件开发...
图标应该简洁明了，传达出程序的主要功能或品牌特征，如`ThinkVantage CSS.ico`和`ThinkVantage Access Connections.ico`，这两个联想的图标就明显地体现了其与计算机安全和服务相关的特性。同时，图标的设计应避免...
文章中作者使用了CSS3来实现Windows 7开始菜单的动态效果，并且分享了实现桌面程序图标、任务栏程序图标和开始菜单效果的CSS代码。 知识点： 1. 使用CSS3实现Windows 7开始菜单的动态效果：作者使用CSS3的...
对于动态图标，还可以使用GIF或现代Web技术如CSS动画来实现。 总的来说，"图标库，Windows应用程序图标库"为Windows平台的应用程序开发提供了丰富的设计资源，有助于创造更美观、用户友好的界面。无论是开发者还是...
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现Windows风格的开始导航栏以及点击导航切换桌面图标的交互功能。同时，我们还将讨论如何通过鼠标拖拽来交换图标的排列位置，提升用户体验。 首先，jQuery是...
5. **图标和按钮**：窗口上的图标和按钮可以通过`<img>`标签插入，然后用CSS定位。按钮的点击事件可以通过JavaScript绑定，模拟关闭、最大化等操作。 6. **CSS3特效**：Windows Vista的Aero效果可以通过CSS3的阴影...
通过精心编写CSS规则，可以实现Windows 7桌面的各种视觉效果，如任务栏、开始按钮、图标、窗口边框等。CSS的定位属性（如position: absolute/relative/fixed）在这里尤为重要，因为它们可以帮助元素在页面上精确地...
这个库允许开发者轻松地创建具有怀旧Windows 98风格的网页元素，如按钮、窗口、图标等，为用户提供一种复古的视觉体验。98.css v0.1.20是该库的一个版本，可能包含了一些新特性或修复了已知问题。 在使用98.css时，...
《CSS3实现Windows8加载动画特效详解》 在数字化时代，用户界面的视觉效果与交互体验成为了产品设计的重要考量因素。CSS3作为一种强大的样式表语言，不仅赋予网页丰富的色彩和布局，更使得动态效果的实现变得...
"333个Windows XP的GIF图标资源"是一个专门针对Windows XP操作系统设计的图标集合，提供了丰富的图形界面元素，适用于各种软件开发、网页设计或者个性化定制项目。 Windows XP是微软公司发布的一款经典操作系统，其...
在本项目中，"jQuery+CSS3仿windows8 Metro风格界面布局效果" 是一个前端开发实践，它旨在利用这两种强大的技术来实现与Windows 8操作系统中著名的“Metro”设计风格相似的用户界面。Metro风格以其大胆的颜色、简洁...
【jQuery仿Windows桌面图标选中效果】是一种在网页设计中实现交互体验的技巧，它使得网页元素（如图标）在用户点击时呈现出类似Windows操作系统桌面图标被选中的视觉反馈。这种效果可以提升用户体验，使用户在操作...
Windows、MacOS和Linux对图标的处理方式有所不同，因此在设计或选择图标时，应考虑跨平台的兼容性。 6. **版权问题**：在使用这些图标时，确保你拥有使用权或者使用的是免费、无版权限制的资源，避免侵犯他人的知识...
“图标”可能意味着这些按钮还包含了图标元素，使用CSS3可以将图标与文本结合，或者用纯图标形式来增强按钮的辨识度和交互性。 【压缩包子文件的文件名称列表】：css3-buttons.html、img、css、buttons - "css3-...
【HTML+CSS+JavaScript 模仿WIN 7任务栏】是一个有趣的项目，它利用Web技术来重现Windows 7操作系统中的任务栏界面。这个项目主要涉及三个核心技术：HTML、CSS和JavaScript，它们是构建Web页面的基础。 HTML...
在IT领域，图标设计是网页制作和用户界面设计中不可或缺的一部分。Windows XP风格的图标以其特有的真彩色（True ...在实际应用中，这些图标可以通过优化的CSS和HTML代码嵌入网页，或者在ASP脚本中作为图像资源来使用。
【纯CSS打造的17个Logo(Apple、Android、Windows等)】 在Web开发领域，CSS（层叠样式表）是用于控制网页元素外观的重要工具。这篇内容将深入探讨如何利用CSS来创建知名的公司Logo，如Apple、Android和Windows等。...
在“css3实现Metro Icon”项目中，我们看到的是如何利用CSS3的特性来创建具有Windows Metro UI风格的图标。这种图标风格以其简洁、平面化和色彩鲜明的特点，被广泛应用于现代用户界面设计中。 1. **CSS3图标技术** ...