随笔分类 - css
摘要：在过去，我们都是使用图片或者JavaScript来实现漂亮的按钮效果，随着越来越多的浏览器对CSS3的支持和完善，使用CSS3来实现美观的按钮已没有太多的障碍。今天，本文收集了12个很不错的CSS3按钮方案并有相关的使用教程。BonBon ButtonsZardiCSS3 Buttons With Simple MarkupFancy Buttons10 Nice CSS3 ButtonsCSS3 Animated Bubble ButtonsSuper Awesome Buttons with CSS3 and RGBAPretty CSS3 ButtonsGitHub-Style CSS3
阅读全文
摘要：html5大行其道的时代已经到来。如果你还在等待浏览器兼容，说明你已经与web脱节几条街了。当然，这得益于移动客户端的蓬勃发展。如果还在纠结于，是否应该掌握html5和css3技术时，请狠狠的抽自己几个嘴巴，然后，苦学吧！因为前端的春天已经到来，而且不止一个春天。如果你不信，我只能说：爱信不信！下面我们来看一个标准的html5标签结构：（我这里只是说标签，其它概不涉及）<!DOCTYPE HTML><html><head><meta charset="gb2312"><title>html5</title&g
阅读全文
摘要：日期：2012-10-20来源：GBin1.com如果你已经足够精通CSS3的话呢，那么它带给你的惊喜和乐趣已经不言而喻了吧，它不仅可以帮助你创建出最优美的设计，还可以大大提高你的工作效率。今天我们给大家推荐的这47套CSS3教程无疑可以带给大家巨大的帮助，不光是专业开发人员，即使初学者也同样适用。在这套CSS3教程中，我们收集了足够多的小技巧可以更巧妙的运用在你的网站设计中，你可以用它们更好的优化你的网站。还等什么呢？快来试试吧。相关阅读：推荐20款最新的超棒CSS技术教程1.Swatch Book with CSS3 and jQueryDemo2.3D Thumbnail Hover E
阅读全文
摘要：期：2012-10-31来源：GBin1.com还记得10个实用的超绚CSS3按钮设计吗？在今天的这篇文章中，我们将带给大家40个精心挑选的CSS3按钮开发教程，相信大家在前面的文章中对CSS3按钮的超酷效果有所了解，希望在今天的这篇文章中，你能够更多的学习如何自己制作漂亮的CSS3按钮，还等什么，了解一下吧！Animated Buttons with CSS3[在线演示|在线教程]Fancy 3D Button with CSS3[在线演示|在线教程]Just Some Awesome CSS3 Buttons[在线演示|在线教程]CSS3 Social Buttons[在线演示|在线教程]
阅读全文
摘要：日期：2012-11-28来源：GBin1.com如果你开发前端特效的话，肯定会首选javascript类库，例如，jQuery，使用它能够帮助你快速的帮助你生成兼容性相对良好的动画特效。或者，如果你对于兼容性没有太多的要求的话，你可以考虑使用性能更加优良的CSS3动画特效。大家可能还记得我们以前介绍过的animate.css,Easings和liffect三个超棒的CSS3动画类库吧。今天我们这里总结了5款有效帮助你生成CSS3动画效果的类库和工具，希望大家喜欢！Animate.cssLiffectEasingsAnimatableMorf使用以上的CSS3动画类库可以帮助你快速的实现基于C
阅读全文
摘要：今天这篇文章向大家分享几份对学习CSS3非常有帮助的手册，大家记得收藏起来。CSS3 是对 CSS 规范的一个很大的改善和增强，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写JavaScript才能实现的效果，如今只需要简单的写几句CSS3代码就能实现。CSS3 Click Chart演示 CSS3 特性的示例代码以及浏览器支持情况的详细信息。HTML5 & CSS3 Support五大主流浏览器对 HTML5 和 CSS3 支持特性一览表，值得收藏！CSS3 - Information and SamplesRobert Nyman 的博客有非常多的前端
阅读全文
摘要：CSS3出现以后，WEB前端的美化变得更加容易，一些原本要用图片才能实现的外观，现在用样式表就可以搞定，也因而使得页面变得更小。但令人头疼的是CSS3的很多属性并不被所有的浏览器支持。本人向来喜欢使用圆角矩形作为容器，经过寻找和探索终于找到了实现让圆角兼容所有浏览器的方法。这个方法是用CSS+JS来实现的。在需要实现圆角的页面中引入CurvyCorners（一个JS圆角库，它采用的全部是CSS3原生属性），并使用addEvent函数： <script type="text/javascript" src="curvycorners.js">&
阅读全文
摘要：When you’re starting to learn CSS, it could means that your coding structure is not the best? Maybe you’re overusing some classes, adding more spaces than necessary or just typing lots of lines to solve something that can be easily fixed in a couple of lines? Well,take a quick look at some of these
阅读全文
摘要：为 Web 设计和开发者准备的 12 本免费图书。Design Your ImaginationGetting RealA Practical Guide To Web TypographyWeb Style Guide, 3rd EditionIntegrating Accessibility Throughout DesignHow To Be CreativePro Drupal DevelopmentDesigning For The WebTime Management For Creative PeopleWeb Designer’s Success GuideFaster, An
阅读全文
摘要：请注意，如果你用 IE 的话，需要 IE9 或以上版本。Pretty CSS3 ButtonsRadioactive ButtonsCSS3 Gradient ButtonsCSS Buttons with Pseudo ElementsCSS3 Github ButtonsZocial Social Media ButtonsBonBon Sweet CSS3 ButtonsZurb CSS3 Button with RGBAA Collection of CSS3 ButtonsChunky 3D CSS3 Buttons
阅读全文
摘要：适合的图标，可以帮助网页设计看起来更加专业和完整。幸运的是，有一些优秀的免费图标集可以提供非常高品质的图标。在这篇文章中，我们将配备35套，每一个网页设计师应该知道的。保持这些图标设置方便，对于大多数项目，他们会满足您的需求。Flavour ExtendedQuartzSienaFunction Free Icon SetProject IconsStandard IconsetStationeryFreshPractikaOn StageMilkyWeb Application Icon SetLight IconsBright!Monofactor Vector IconsShopping
阅读全文
摘要：今天这篇文章向大家推荐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.
阅读全文
摘要：这篇文章收集了20个非常绚丽的 CSS3 效果应用演示，这些示例演示了 CSS3 各种新特性的强大能力。随着越来越多的浏览器对CSS3支持的不断完善，设计师和开发者们有了更多的选择，以前需要使用JavaScript才能实现的各种很酷的界面效果和动画，如今使用纯 CSS 代码就可以很容易实现。相信下面这些 CSS3 演示会让你感到吃惊！01. Experimental Animations02. Animated Button03. Splash and Coming Soon04. Typography Effect05. Fullscreen Image 3D Effect06. Analo
阅读全文
摘要：Codekit - incident57又一华丽丽的工具,目前是beta，官网上介绍中罗列了这些功能特性：自动编译Less, Sass, Stylus, CoffeeScript, Jade & Haml等文件致力于js文件合并和压缩，以及js语法错误检查同时还支持Compass(Sass伴侣,官网地址:compass-style.org)令人发指的是甚至还能对jpeg&png图片优化自动刷新浏览器(之前推荐过同类的工具:前端开发利器-F5)让你在不同的项目中仅维护同一套文档然而这还仅仅是其中的一部分...相信对于Web前端攻城师来说,这些功能都是非常受用的但是....>
阅读全文
摘要：HTML 是全世界最流行的网页编程语言。而HTML5是这门语言的升级版本。越来越多的开发者和设计师开始使用HTML5.今天我们要介绍的是最好的几个 HTML5/CSS3 的演示工具和框架，你可以用它们来创建你的网页PPT。1. html5 Slides这是 Google 提供的 HTML5 幻灯片模板。你可以下载这个模板，然后编辑它，就可以创建你自己的幻灯片了。2. Slides Presentation with HTML5这个工具用了纯HTML做主题和框架，CSS做切换效果，还有一个简单的JS MVC框架来展示幻灯片。这个工具最适合用来展示你的数据。3. CSSS这是一个基于CSS的幻灯片
阅读全文
摘要：对于很多单页面网站来说，页面滚动（Page Scrolling）技术是十分常用的。页面滚动基本上可以分为两种，一种是通过浏览器的滚动条，另外一种是根据用户的操作自动滚动。在这篇文章中，我们将介绍5个javascript插件，可以帮你轻松的创建页面滚动效果，你也就不必在重复发明轮子了，专注你的网站设计就好。Scrollrama，BetterNikeWorld Parallax 和 Curtain 使用了浏览器的滚动条来触发一系列的动画。当你滚动页面的时候，网页不同部分的动画会被触发，动画的速度往往和你滚动的速度有关。这个技术是由Nike Better World Parallax网站开始出名的。
阅读全文
摘要：HTML5 带来的一个特性就是视频播放标签，这将是标准的网页视频播放方式。我查找了目前可用的 HTML5 视频播放器，整理如下。1)HTML5 Video2) Viddler3) Longtailvideo4) Videojs5) Sublime Video6)jMedia Element7) Projekktor8 ) Fry Player9) Mooplay10) OI Player11) Flare Video12) Vimeo13) Vp Factory14) Blip15) Youtube
阅读全文
摘要：1)CSS Mega DropdownMega dropdown is a pure CSS dropdown menu which is easily customizable and features 5 included color schemes (red, blue, orange, green, grey).2) Metro CSS3 Mega MenuThis is a CSS3 Menu inspired in the new Microsoft Metro UI. It comes with 4 different “box” layouts, 5 images animat
阅读全文
摘要：1）CSS3 Generator这是一个非常有用的CSS3代码生成器，能为许多最受欢迎的css3属性生成代码，如：text-shadow, border-radius, Box Resize等2）CSS3 PieCSS3带来了一些非凡的样式特性：圆角、阴影、梯度填充等等，这些都是设计者们乐于使用的，但是实现起来困难而耗时。3）Layer Styles它使用起来就像浏览器中你最爱的图片编辑器一般，而它能够帮助你生成CSS。4)CascaderCascader是一个能够将你的Html中内嵌的CSS代码独立分离的工具。5）CSS3 Gradients Generator它能够帮助你选取颜色，在你选择
阅读全文
摘要：网站上线前的测试和验证是非常重要的一个环节，验证的意思是检查网站的页面和其他数据是否符合标准规范，设计规范的网站在各种浏览器上表现会一致而且良好。为了帮助你执行这些测试和验证，今天我们列表了 5 个在线的工具。Pingdom ToolsPingdom Tools 可以帮你分析网站的速度以及一些无法访问的元素Feed Validation Service这是一个用来检查 RSS 和 Atom 数据语法的工具Functional Accessibility Evaluator从名字可以看出，该工具主要对单个页面的功能访问进行测试。Browsershots该工具可以检查在你的网站在不同操作系统下的不
阅读全文
