随笔分类 - css
摘要：Filter Functionality with CSS3Thumbnail Proximity Effect with jQuery and CSS3Fullscreen Background Image Slideshow with CSS3CSS3 灯箱Slopy Elements with CSS3Item Blur Effect with CSS3 and jQuerySplash and Coming Soon Page Effects with CSS3Typography Effects with CSS3 and jQueryCSS3 动画按钮Original Hover
阅读全文
摘要：看看下面这些界面的效果，令人难以置信的它们居然都是采用 HTML5 + CSS3 开发的！！！MADMANIMATIONDemo Bon Bon ButtonsDemo | More Information Monster CursorDemo 3D HomeDemo | More Information iOS IconsDemo | More Information Digital ClockDemo SpidermanDemo | More Information i Twitty the FoolDemo Solar SystemDemo | More Information CSS3
阅读全文
摘要：在开发中借助一些非常好用的工具可以帮助你节省大量的时间和精力。本文收集了20个非常有用的Web开发工具和框架，分享给大家，希望对你有帮助。1.BlueprintBlueprint 是一款CSS框架，可以帮助你缩短项目的开发时间。2.List-O-MaticList-O-Matic 是一个帮助你轻松的创建基于列表的CSS导航的工具。3.Clean CSSCleanCSS 是一款强大的CSS代码优化工具，让你的代码更简洁。4.CSS Drive使用这款工具来压缩CSS代码以提高加载速度，有三种压缩比可选择。5.HTML Entity Character LookupHTML entities 是一
阅读全文
摘要：本 文向您介绍如何通过在您的 CSS 和 JavaScript 文件中 — 两种易于优化的常见资源，使用社区中提供的工具即可完成优化 — 优化空间使用来实现更高的性能。然而，在继续之前，有一点是很重要的，压缩 CSS 和 JavaScript 文件只是为了让您的 web 应用程序 “轻巧” 的诸多操作其中的两个技术。 为了从本文中获得最大收益，您需要安装下列工具：一个文本编辑器Java™ Runtime Environment 1.4 或者更新版本 问题：空白内容当 开发人员使用 CSS 或 JavaScript 文件工作时，空白内容通常是一件好事。空白内容包括缩进文件所使用的字符，增强可读性
阅读全文
摘要：CSS的优化通常包括两方面:格式化CSS和精简CSS。精简CSS的办法是把具有相同属性的元素合并在一起，但这会降低代码的可读性，使代码的后期维护很麻烦，稍不注意就出错。格式化CSS一般就是多行模式或单行模式的选择，比如我个人就完全受不了多行模式下面是一些在线的CSS优化工具，能让你方便的对CSS文件进行各种优化处理。1.Online CSS Optimizer /在线CSS优化该在线工具用于精简和压缩样式表的文件大小，优化后的代码将完全是混乱的，支持输入URL，提交文件和直接输入进行压缩。2.CSS Compressor/CSS压缩作用同上，但这个工具拥有非常详细的压缩选项，它包含基本模式和高
阅读全文
摘要：作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的CSS工具可以有效地节省你设计网站的时间。表格类1、CSS Form Code Maker– 很方便地生成“五颜六色的BOX布局”的表格。2、JotForm– JotForm是一个“所见即所得”的表格生成器。字体类1、Em Calculator– EM Calculator可以帮助你计算px与em之间的转换。2、CSS Font and Text Style Wizard– 这个小工具可以很方便地将你的CSS样式呈现出来。导航/按钮类1、C
阅读全文
摘要：单页面的网站设计允许访问者无需加载多余的页面而快速简单的浏览网站内容。这里我们收集了21款漂亮并且富有创意的单页面“作品集”展示设计模板，希望能帮助你设计出更加吸引人的网站设计，Enjoy！Roundfolio: A Free Portfolio Template这是一个单页面的作品集设计模板，使用了非常独特的设计，并且设计中应用了很多圆形元素。整个主题非常容易定制，你可以发现评论模块及可以整合在代码中，也可以单独处理Free Single-Page Scrolling HTML5 Portfolio Template + PSDs这是另外一个免费的模板 - 一个完全免费的基于HTML5的单页
阅读全文
摘要：1.Alexarts一个看上去很好的主页，由4个大气球作为导航菜单，当访问者停留在上面时，气球就会飘起来。2.Blogger Bake Off一个精美的网页设计，它使用传统的横向的导航菜单。3.Small Stone Recordings一个在网络上最酷的导航菜单。在首页顶部，每个区域部分都作为一个拨号或者记录装置的按钮。4.Loodo一个好的导航菜单是基于传统的棋盘游戏时。5.Jeff Sarmiento一个多彩的垂直导航菜单，访问者停留在链接页面时，显示不同的颜色背景和图标。6.Fabrica De Caricaturas一个看上去不错的主页，其特点是呈现一个A4纸的页面，左边则作为标签导
阅读全文
摘要：在这个文章中，展示了25个使用固定颜色的 CSS 背景进行设计的网站。Create Digital MediaCreate Digital MediaTechdeptTechdeptBay StateBay StateMade In SbresciaMade In SbresciaVogelinoVogelinoMorten StriMorten StriCymetriq StudioCymetriq StudioWinicioWinicioGavickproGavickproTheagencyTheagencyPetros DimitriadisPetros DimitriadisJaype
阅读全文
摘要：如今，网页设计师非常注重网页字体的运用，为了能让网站有更好的可读性和更强的吸引力，他们需要更漂亮的字体。Google网页字体（Google Web Fonts）为设计师们提供了几百种免费开源的字体，只需要在网页中加入一小段代码就可以在你的网页中现实漂亮的字体。今天这篇文章就向大家展示32个使用Google网页字体的优秀网站案例。1.Shopify使用的字体: Open Sans2.Creep Fest使用的字体: Homemade Apple, Copse3.Icon Bits使用的字体: PT Serif, Verela Round4.Woolly Robot使用的字体: Homemade
阅读全文
摘要：在制作网站的时候，你必须要确保有一个系统化、结构合理的布局使得能够更快更轻松的组织网站的内容。网格系统为网页设计师们提供了一种快速构造网页内容布局的方法。借助这个工具，设计师可以根据预制结构进行布局，节省了大量的时间和精力。今天这篇文章向大家推荐20个优秀的 CSS 网格系统，其中还有融合了最新的响应式设计理念的响应式 CSS 网格系统。1.Less Framework 42.Golden Grid System3.CSSgrid4.Get Skeleton5.inuit CSS6.Fluid Base Line Grid7.978.gs8.BluCSS9.Columnal10.960.gs1
阅读全文
摘要：你曾经考虑过想要加快 HTML 和 CSS 编码速度吗？不管你是否想过，都来看看这篇文章吧，你会从中学到很多东西。我们要讨论的不是 CSS 网格框架，也不是 CSS Reset。在这篇文章中，我们关注的是不同寻常的编码方式——CSS 编译器以及 HTML 缩写编码技术。借助这些优秀的工具和技术，能够大大的减少开发时间，加快开发进度。HTML 加快 HTML 编码的方法有很多，这里我们要介绍的是HTML缩写技术。取代传统的编写完整 HTML 标签，我们只需要编码缩写代码就能扩展到完整的HTML标记，一个简单的例子：#container将被转换成<div id="container
阅读全文
摘要：对于Web设计和开发人员来说，CSS是非常重要的一部分，随着越来越多的浏览器对CSS3的支持及不断完善，设计师和开发者们有了更多的选择。如今，用纯CSS就可以实现各种各样很酷的效果，甚至是动画。今天这篇文章向大家推荐24款非常优秀的CSS3工具，为了获得更佳的效果，请在Chrome 4+, Safari 4+, Firefox 3.6+, IE9+, Opera 10.5+版本浏览器中浏览如下在线工具。1.CSS3 Pie使用CSS3 Pie可以让IE6至IE8版本实现大多数的CSS3修饰特性，如圆角、阴影、渐变等等。2.CSS3 Click Chart非常好的CSS3效果演示，提供了示例代.
阅读全文
摘要：实现网站的深度和运动效果有很多种方式，例如有的网站使用视差滚动（Parallax Scrolling），有的是用Flash动画。不管采用什么技术，伪深度（或者运动）效果能够让网站更具互动性，更有趣。今天这篇文章就向大家分享从网 上收集的36个非常有趣交互网站设计作品，一起欣赏。EgopopShoutCloudy with a Chance of MeatballsCultural Solutions, UKGo LiveMauricio Guimaraes’ PortfolioMeomiLilia’s PlanetFilidor WieseConvaxLadioPatagoniaSensi S
阅读全文
摘要：今天编译了登录页面列表，所有的人都有创造性地设计。1.WP login page2.Member Login Page3.Virtual Login Page4.Green Globe Ideas5.Yahoo! Login Page6.Login Window7.Mail Chimp8.Music Battle login9.How-r-u10.Mobile Me11.Mig3312.Skuba Login13.Wakoopa14.Acrobat15.tuts+16.Tick Spot17.Jatek18.20×20019.Joost20.Mouse To Minx21.Conve
阅读全文
摘要：1、使用Chrome的都知道，当鼠标焦点在input、textarea这些元素上时，Chrome默认的会给它们加上黄色的边框，我以前一直以为这是chrome的特性，没法去掉，原来是css的效果，outline这个属性。你可以用下面的css代码去掉所有元素的边框：*:focus {outline: none;}用下面的代码去掉你要去掉的元素的边框：.nohighlight:focus{outline:none;}你也可以给元素增加你希望的边框：.changeborder:focus{outline:Blue Solid 4px;}2、用chrome登录了一次并记录了COOKIES之后，再次打开，
阅读全文
摘要：程序开发人员和网页设计人员掐架的事情常有听说，程序员们总是为自己设计不出来漂亮的网页而纠结。不再郁闷，因为开源帮了你，下面为你介绍11款相当不错的CSS框架，专心做程序吧，网页设计交给开源帮你。CSS网页布局框架ElasticElastic 是一个简单的 CSS 框架用来对网页进行布局。Elastic 可实现各种各样常见的网页布局，如下图所示：(X)HTML/CSS 框架ThinkCSSTC (”ThinkCSS”) 是一个 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网
阅读全文
摘要：CSS框架通常指的是一些CSS文件的集合，这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。虽然对于小的WEB开发项目来说，CSS框架并不一定适用，但是对于规模较大的团队开发项目而言，CSS框架不仅能加快设计开发速度，而且还能有效解决网站改版中带来的诸多麻烦和问题。这里推荐的15款CSS框架是现在国外最流行的CSS框架，希望能对你的开发有所帮助！例如：typography.css基本排版规则grid.css基于网格的布局layout.css通常的布局form.cssfor 表单样式general.css更多通用规则1 .Elements CSS FrameworksCSS F
阅读全文
摘要：所有的开发人员都应该注意了，你们绝对应该看看这篇文章，帮助你快速创建HTML5/CSS3的开发框架。可能你也看到过其它的框架，但是你应该看看这些框架，因为你以前可能没用过他们中的大部分。 看看最新的实用HTML5和CSS3框架吧！希望你们喜欢！1. HTML5boilerplateH5BP 带给你非常漂亮的文档，一个网站优化的编译脚本，还有一个自定义的boilerplate编译器。除此之外，我们还支持lighttd，Google App Engine和NodeJS以及优化的服务器配置（包括Apache， Nginx，和IIS），并且已经把boilerplate的大小减少了50%。源码演示2.T
阅读全文
摘要：1.创建一个漂亮的图标这个教程将教你如何用纯CSS3创建一个图中的图标2.CSS3 图片样式这个教程将教你如何使用 box-shadow, border-radius和transition。3.CSS3 Transition 的模糊效果4.实用的CSS3圆角表格5.创建纯CSS3的票式标签6.原始的鼠标浮动效果这个教程将创建缩略图的鼠标浮动效果。当鼠标移动到一个缩略图上的时候，我们将显示一些描述并使用不同的样式。7.用CSS3来创建旋转的光束动画效果哦！8.用CSS3来创建具有动画效果的按钮9.用CSS3创建旋转的报纸效果类似于老式电影中的那种特效，报纸旋转并固定在屏幕上。10.CSS3创建动
阅读全文
