随笔分类 - css
摘要：翻译自：47 Amazing CSS3 Animation Demos中文原文：47个惊人的CSS3动画演示请尊重版权，转载请注明来源，多谢！或许你已经看过很多关于CSS3动画的技术，包括前端观察之前发表的一些，那么现在就情看一看CSS3动画的魅力吧。这里是一辑47个令人瞠目结舌的CSS3动画演示。他们演示了CSS3能给我们带来的巨大的可能性。1.使用jQuery的CSS3时钟2.模拟时钟3.使用方向键旋转的3D盒子4.多个3D盒子(滑入/滑出)5. CSS3折叠6. 自动滚动的视差7. Isocube8. 图片画廊9. 矩阵10. 7个使用CSS3的Javascript效果替代11. 图片滑
阅读全文
摘要：整理自：List of Really Useful Tools For CSS3 Developers中文：CSS3开发工具收集通常来说，CSS非常简单。但是当浏览器厂商开始实现CSS3特性，问题开始变得有些复杂了。不难，只是有些复杂。这可能包括两个方面：首先有些心得CSS3属性(比如，transition、渐变、transform等)不是那么简单，其次我们不得不使用浏览器厂商指定扩展。直到你最喜欢用的IDE原生支持CSS3，你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的，这里将收集能够助你学习和使用CSS3的真正有用的工具。生成器CSS3 Please!
阅读全文
摘要：译自：CSS3 Image Styles中文：CSS3图片样式请尊重版权，转载请注明来源，多谢～～直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时，浏览器并不能完美的渲染它们。不过，如果把这个图片用作背景图，你就可以可以给它添加任何样式了，浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程，讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition
阅读全文
摘要：操作系统版本：Windows 7浏览器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev受影响的浏览器：所有浏览器.经常讲到css选择器命名规则，其实不只是在团队合作基础上来讲这个，每个浏览器,IE产品，火狐，苹果，谷歌，都会因为命名不规范会产生不同样式..一、关于选择器的命名W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以 数字，或一个连字号后跟数字为开头。
阅读全文
摘要：已经有很多的开发者开始使用 CSS3 和 HTML5 技术来开发各种应用，下面是我们列出了 10 个惊艳的使用 CSS3 动画的网页：Battlefield CSS3AT AT WalkerBig DealDullaHighKinect and CSS3SpaceAnimated 3D HelixCSS3 ManOur Solar System
阅读全文
摘要：流程图是一样很有用的工具。它可以用来帮助你做决策，给你一步一步的引导。对于很多复杂的设计和流程来说，流程图是必不可少的。和其他图形一样，流程图让你直观的理解一个流程，甚至有可能帮助你找出流程中的问题或者瓶颈。这篇文章介绍了10个非常有用的流程图，可以帮助程序员和设计师来做决定。你可以点击放大这些图片。1. 如何使用 HTML5 标签？这个流程图可以帮助你决定什么时候使用什么HTML5标签。2. 你需要一个新的LOGO吗？这个流程图可以帮助你决定是否需要重新设计LOGO，以及如何重新设计LOGO。3. 如何判断是否要在Twitter上关注一个人？这个流程图教你是否应该在Twitter（景德镇人民
阅读全文
摘要：CSS3 Clean Mega MenuMenu with CSS3 Effects and Notification BubblesSherpa | Complete Navigation System (CSS Edition)CSS3 Animated Mega NavCSS3 Mega Drop Down MenuMega Dropdown EnhancedWebsite in a Navigation BarHTML5/CSS3 Drop Down MenuSource:http://designmodo.com/css3-html5-mega-menus/
阅读全文
摘要：1）CleverCSSCleverCSS是个为CSS开发而产生的小型的标记语言，它的设计灵感来自Python,使得能够以一种简洁、结构化的方式构建样式表。在很多方面，它比CSS2更加爱简洁和强大。它与CSS最明显的不同之处在于语法：基于缩进而不是flat，很明显这有违Python指导，但这也不失为构建结构化样式的好点子。2）SassSass令CSS又有趣起来，它对CSS3进行了扩展，增加了嵌套规则、变量、混入、选择器继承等语法，可以使用命令行工具或网络框架插件，将其转化为良好格式的标准CSS。3）SajaxSajax是一种使用Ajax framework来构建网站的开源工具,它使得通过Java
阅读全文
摘要：每个人都知道，会从优秀的CSS/HTML框架中受益匪浅。下面介绍3个相对比较新的HTML5和CSS3框架。Inuit.CSS – CSS FrameworkInuit.CSS 框架，作者Harry Roberts 。该框架主要针对的是中等或小屏幕。这个CSS框架支持新的HTML5元素。Perkins – HTML5/CSS3 FrameworkPerkins，作者Carlos Elías。该 HTML5/CSS3 框架，具有基本HTML5模板，包括标签、表格，以及创建导航等。G5 Framework – HTML5 Front End Development FrameworkG5
阅读全文
摘要：HTML5已经在Web开发中越来越流行。并且现在大部分流行的浏览器包括Firefox 6, Google Chrome, IE9等都支持HTML5。 利用框架能够帮助Web开发人员快速进行设计和开发。一个HTML5的框架提供了许多功能，如优美的排版，视频播放器，表单验证等，使开发人员能够轻松地 开发Web应用程序。1. 52 Framework : HTML5-CSS3 Framework该框架支持HTML5和CSS3，支持目前所有的浏览器。该框架充分利用了HTML5所有的优势。在网页设计师的世界中，CSS3是非常酷的东西，使用CSS3可以节省网页设计和布局的时间。在开发中可以使用CSS3所有
阅读全文
摘要：HTML5 Basic Template PackThis template has been heavily inspired by the Smashing Magazine HTML 5 template tutorial, however the (CSS & Design) has been modified in several ways.This basic template comes in 4 colors (green, blue, purple and orange) with easy to customize CSS and HTML 5, HTML5 mou
阅读全文
摘要：1. border-radius属性:很好看的形状不再需要image来实现啦。。我们看看如何让一个DIV显示为不规则。并在里面存放一些文本。使用CSS3中的border-radius属性：12345678div{border: solid black;border-radius: 40px;height: 1in;width: 2in;overflow: hidden;}div显示：2.background-clip属性：background=clip结合border-radius使用，可以设计出不错的形状。Css:两个div的显示：3. border-x-x-radius属性x代表top,r
阅读全文
摘要：CSS3 Clean Mega MenuMenu with CSS3 Effects and Notification BubblesSherpa | Complete Navigation System (CSS Edition)CSS3 Animated Mega NavCSS3 Mega Drop Down MenuMega Dropdown EnhancedWebsite in a Navigation BarHTML5/CSS3 Drop Down MenuSource:http://designmodo.com/css3-html5-mega-menus/
阅读全文
摘要：网页设计中，内容组织恐怕是最至关重要、最影响设计品质的方面了。如何将信息组织到好的布局中，是一个网站的基础，并且应该在考虑外观之前就决定好。没有好的布局，网页信息流就不能正确传递，所有东西都不能建立起合理的联系。在这篇文章中，我们将讨论八个布局解决方案/技巧，这些方案和技巧将有助于你创建整洁有序的内容布局。这八个技巧包括滑门(sliders)、标签式、渐进布局(progressive layouts)、结构网格、模态窗口(modal window)、翻转元素、手风琴效果(accordions)以及超大下拉菜单(mega drop-down-menus)。1. 滑动样式与传送带(Sliders
阅读全文
摘要：有一个问题已经困扰网页设计师们很久了：该使用固定、流动、弹性，还是混合布局呢？它们各有优缺点。最终的决定取决于网站的可用性，单用某一种布局就想达到目的，可能没那么容易。那么，既然如此令人困惑，是否有做出正确决定的诀窍呢？考虑好几个问题，恰当地设定目标结果，你也能做出融合各方优点的成功布局设计。本文将讨论每种布局方案的利与弊。其实，只要你时刻注意可用性，每种方案都能实现成功的网站布局。您也可以参考一下我们以前的文章：Flexible Layouts: Challenge For The Future讨论弹性布局对未来的挑战Applying Divine Proportion To Your We
阅读全文
摘要：spin.jsCSS3 Loading Animation LoopCSS3 Loading AnimationCanvasLoader CreatorFlickr Style Loading Animation Using JQueryCSS Loading Animation Circle StyleLoading CSS spinners and bars generator for AJAX & JQueryAjax Style Loading Animation in CSS3 (no Images)CSS3 loading spinners without imagesBo
阅读全文
摘要：图形和图表主要用于以如饼图、折线图、条形图等方式展示数值数据的直观形式。有众多的技术利用CSS3来创建不同的图表。在任何Web行业，一个良好和优秀的数据演示可以让客户直观了解你分析的内容。本文介绍 20 个使用 CSS 技术构建的基于 Web 的图形和图表技术：CSS3 ChartsPure Css Data ChartWicked CSS3 3d bar chartData Visualization: Flexible Bar Graphs using CSSCSS Stacked Bar GraphsCreating Pie Charts with CSS3The CSS and PHP
阅读全文
摘要：今天这篇文章向大家推荐14款非常有用的 CSS 网格系统生成工具，它们能够帮助你构建适合你网站项目的 CSS 网格系统。一个系统化、结构合理的布局使得能够更快更轻松的组织网站的内容。网格系统为网页设计师们提供了一种快速构造网页内容布局的方法，帮助设计师们 节省了大量的时间和精力。1.Tiny Fluid Grid2.ZURB CSS Grid Builder3.Grid System Generator4.Variable Grid System5.inuit Grid Builder6.1200px Grid System7.Negative Grid 1kb Fluid CSS Grid8
阅读全文
摘要：Big SpaceshipFi (Fantasy Interactive)TargetscopeMiroCentral SnowsportsLightCMSMaxCDNBuySellAdsMedia TempleCobblestoneReinvigorateDialogixAdobe Business Catalyst ExpertsMobifyHavnevikSnowden IndustriesSilver PistolGucciNikeRolexHarley DavidsonSonyTrek BicycleKnorrSamsungSource: http://designmodo.com/
阅读全文
摘要：CSS Tricks一个神话般用来创建高度自定义的按钮工具。它可以让你选择渐变颜色，边框，为您的网页的完全独特的按钮悬停背景等。CSS TricksDa Button Factory你只需要通过点击就可以生成很酷的按钮的超强工具，功能包括按钮字体、样式和颜色设置Da Button FactoryFiletransitFiletransit 是一个在线工具，用来创建网页菜单，可帮你设置文本颜色和按钮颜色FiletransitTucowsTucows 包含一个按钮生成器，可生成多个按钮图片，主要用于网页、展示等。TucowsHscripts免费的在线菜单制作工具，可轻松创建网页上的按钮Hscrip
阅读全文
