标签归档：css3

10个基于CSS3和jQuery的loading加载动画设计方案

发表于 2012/03/07 由 前端开发-武方博  597 views

过去，由于加载图片的格式限制(只能使用GIF格式)，设计加载动画不是那么容易。随着技术和浏览器的发展，用 CSS3 和 jQuery 就可以方便地设计加载动画，这种方式的高度可定制化以及服务器的进步使得开发者的各种要求得到满足。下面介绍10个实用的方案。 1. Sonic——循环的加载动画 Sonic是一个很小的JS“类”，你可以用它来创建自定义加载动画——蛇吞尾似的循环动画。 2. 闪烁的加载动画 用 CSS3 动画可以实现闪烁跳跃式的正在载入页面效果。 3. 旋转的加载动画(无需图片) CSS transform(Firefox 3.5+和基于Webkit的浏览器中可用)有很多有趣的功能，如旋转、平移、缩放和倾斜等等都可以用来设计加载动画。   4. Ajax 风格的加载动画(无需图片) 图片是网站中非常重要的部分，如果使用gif图片作为加载动画，则需要在载入网站图片的同时先载入gif动画图片。如果使用 CSS，这种问题就迎刃而解了。因此推荐用 CSS3 来开发 Ajax 风格的加载动画。 5. 圆......查看更多>>

发表在 css3 html5 | 标签为 , , , | 留下评论

分享一个webkit内核下浏览器滚动条效果

发表于 2011/05/13 由 前端开发-武方博  2,206 views

webkit内核下美化浏览器滚动条样式，支持chrome和safari浏览器   演示地址：http://www.wufangbo.com/demo/css/07/index.html 下载地址：http://www.wufangbo.com/demo/css/07/07.rar   直接上css   html {     overflow: auto; } body {     position: absolute;     top: 20px;     left: 20px;     bottom: 20px;     right: 20px;     padding: 30px;      overflow-y: scroll;     overflow-x: hidden; }   /* Let's get this party started */ ::-webkit-scrollbar {     width: 12px; }   /* Track */ ::-webkit-scrollbar-track {     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);      -webkit-border-radius: 10px;     border-radius: 10px; }   /* H......查看更多>>

发表在 css3 html5 | 标签为 , , , , , , | 一条评论

移动平台3G手机网站前端开发布局技巧汇总

发表于 2011/05/10 由 前端开发-武方博  5,213 views

您或许正在或准备参与一个WepApp项目，您或许正在Google搜索mobile development相关的文章，您或许是一名专业的WEB前端工程师，您或许想学习Mobile前端开发方面的技术，如果您被我说中了，呵呵那么这篇文章将为您带来意想不到的惊喜！当您看到这篇文章时，哥已经默认认为您是一名资深的WEB前端工程师，如果您不是，可能您会遇见许多不理解或听不懂的专业术语或前端技术（包括WEB、Mobile）。但是这没有关系，给自己一点信心吧，用心的阅读下去…… 自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。 开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。 WebApp与Native App有何区别呢？ Native App： 1、开发成本非常大。 一......查看更多>>

发表在 移动网站开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 5 条评论

Css3 backgrounds 背景和背景图片详细介绍

发表于 2011/05/09 由 前端开发-武方博  2,058 views

—————以下为翻译内容—————- CSS2.1中有5个background属性可以用来控制元素的背景。这5个属性是： background-color background-image background-repeat background-attachment background-position 为了更好的驾驭背景图片，CSS3添加了3个新的background相关属性，以及一系列的相关属性值。 不过在我们与这几个新属性亲密接触之前需要知道3个重要的盒子。 三个盒子 假设现在有个容器，容器里面有些内容，虽然我们看不见，但是这些内容的外面是有一个盒子的，这个盒子就是content-box。 //zxx:这里的英文原文是：”The quick brown fox jumped over the lazy web developer. “，而实际上，这里的英文也不是最原始的，是作者从”The quick brown fox jumped over the lazy dog! “这句话改编而来的，至于这里的原话实际上没有什么特殊的意思，只是这句话包含了英文中全......查看更多>>

发表在 css3 html5, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

HTML5标签用法及描述

发表于 2011/04/30 由 前端开发-武方博  1,436 views

  2000 年底，国际 W3C 织组织公布发行了 XHTML 1.0 版本，到现在已经有 10 年了。这 10 年里， Web 飞速发展，XHTML 1.0 显得“力不从心”，已经跟不上时代的发展了，于是 HTML 5 孕育而生。W3C 在 2010 年 1 月 22 日发布了最新的 HTML 5 工作草案。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走，但 HTML 5 正在改变 Web。 HTML 5 作为新一代的超文本标记语言，增加了许多标签。这些标签不但更有语义，而且功能强大。具体有以下标签：         <article> 定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。 <aside> 定义页面内容之......查看更多>>

发表在 css3 html5, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

css3 box-shadow投影发光效果

发表于 2011/04/26 由 前端开发-武方博  2,314 views

  CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。 1. box-shadow属性的浏览器兼容性 先来看一个这个属性的浏览器兼容性: Opera: 不知道是从哪个版本开始支持的，我在发这篇文章测试的时候，正好更新了Opera到最新的10.53版本，已经支持box-shadow属性。 firefox通过私有属性-moz-box-shadow支持。 Safari和Chrome通过私有属性-webkit-box-shadow支持。 所有IE不支持(不知道IE9是否有所改善)。别急，我们将在文章最后会介绍一些针对IE的Hack。 2. box-shadow属性的语法 box-shadow有六个可设值: img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 } 当不设阴影类型时，默认为投影效果。当设为inset时，为内阴影效果。 X轴和Y轴位移不等同但类似于photoshop里面的”角度”和”位置。 阴影大小、扩展、颜色和Photoshop里面的都同理。 3. 实例解析 让我们通过几个实例来看一个b......查看更多>>

发表在 css3 html5, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

css3 box-shadow发光效果

发表于 2011/04/26 由 前端开发-武方博  1,522 views

  如果用过twitter，你可能已经留意到当输入框获得焦点后，它的边框会有蓝色发光的效果，并且这里运用了transition属性，使得发光效果有很平滑的过渡。本教程将讲述如何运用box-shadow属性来做到这样的效果。 CSS代码如下： input { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; outline:none; } 这里通过运用transition属性来展现input框的变化。 同时，这里需要用outline属性来使safari和chrome的默认高亮无效。 这里在使用box-shadow属性时，为了使其不像是阴影效果而达到发光的效果，因而采用了明亮的蓝色。 同时也可以用RGBA，这样就可以控制颜色的透明度了。 代码如下： input:focus { border:#35a5e5 1px solid; box-shadow: 0 0 5px rgba(81, 203, 238, 1); -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1); -moz-box-shadow: 0 0 5px rgba(8......查看更多>>

发表在 css3 html5, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

IE9关于HTML5和CSS3的测试

发表于 2011/03/21 由 前端开发-武方博  822 views

无论你是否期待，也无论你支持或者反对，IE9正式版如期发布了。嗯，这一点儿比Mozilla好，Firefox 4正式版不知道要跳票到什么时候了。这里贴一些关于HTML5和CSS3的测试数据：   IE9对CSS3新特性的支持： IE9对CSS3 选择器的支持 IE9对HTML5特性的支持 IE9对HTML5表单的支持 这些测试数据来自于 Findmebyip.com，这个网站基于modernizr项目，可以快速检测出浏览器对于HTML5新特性的支持。有Windows 7的同学可以自行访问测试下。 另外一个测试是在HTML5test.com的： 当然，这里还有一个其它浏览器的测试数据对比： 第二列是版本好，第三列是得分，最后一列是所谓的亮点。 值得一提的是，IE9终于完整支持CSS2选择器并支持绝大部分CSS3选择器了！！！ 查看更多>>

发表在 css3 html5 | 标签为 , , , , , | 留下评论

前端开发工具集合（2011最新）

发表于 2011/03/08 由 前端开发-武方博  2,085 views

  收集的一些轻量级非常实用的前端开发小工具： CSS3相关 CSS3样式生成器：http://www.css88.com/tool/css3Preview/ CSS3渐变样式生成器，类似Photoshop中的渐变界面：http://www.colorzilla.com/gradient-editor/ CSS3动画制作工具Sencha Animator：http://www.sencha.com/products/animator/ 背景色alpha透明工具：http://www.linxz.de/demo/hex_change.html（IE滤镜须是在一个有宽高设置的容器中，或者激活haslayout的属性。具体介绍：http://blog.linxz.de/ie_filter_css3_rgba/）–2011-01-18更新 Data URI Encode Data URL(舜子开发的)http://www.css88.com/tool/DataURL/ unicode转换工具 unicode转换工具：http://www.css88.com/archives/2093 在线代码编辑器 小可<Little Code />是丸子制作的一个在线代码编辑器，轻松分享代码，用于提问，测试和转发代码等，是一个方便又不错的工具：http://code.wanz.im/ CodeBox：ht......查看更多>>

发表在 前端开发工具 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 3 条评论