随笔分类 - CSS3

样式设置
摘要: 今天这篇是2015年第3期(总第34期),希望你能在这里发现有用的资料。梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具。阅读全文
posted @ 2017-08-21 10:42 梦想天空(山边小溪) 阅读(1709) | 评论 (1) 编辑
摘要: 在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多。在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样。没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么。所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法。阅读全文
posted @ 2017-08-13 21:05 梦想天空(山边小溪) 阅读(750) | 评论 (0) 编辑
摘要: 今天这篇是2015年第3期(总第34期),希望你能在这里发现有用的资料。梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具。阅读全文
posted @ 2017-05-18 13:24 梦想天空(山边小溪) 阅读(2696) | 评论 (2) 编辑
摘要: 《Web 前端开发精华文章推荐》自2011年6月20号发布第一期以来,历经五年半,总共发布了30多期。今天这篇是2017年第1期(总第35期),希望你能在这里发现有用的资料。梦想天空专注前端开发技术,分享提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用......阅读全文
posted @ 2017-03-28 13:25 梦想天空(山边小溪) 阅读(2164) | 评论 (0) 编辑
摘要: AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部的时候,元素能够回到前一个状态,如此达到循环动画的效果。阅读全文
posted @ 2016-10-07 22:36 梦想天空(山边小溪) 阅读(4005) | 评论 (0) 编辑
摘要: CssStats 是一个在线的 CSS 代码分析工具,你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析,是前端开发人员和网页设计师分析网站 CSS 代码的利器,可以统计出 CSS 代码里的规则数量、字体颜色、字体大小、背景颜色数等等。阅读全文
posted @ 2016-09-06 15:25 梦想天空(山边小溪) 阅读(1422) | 评论 (1) 编辑
摘要: Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多。它简化了组织和维护 CSS 代码的成本。Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任何时候都更容易。在这篇文章中,我们已经收集了一组有用的 Sass 和 Compass 工具,将帮助您快速构建 Web 应用程序。阅读全文
posted @ 2016-06-02 21:59 梦想天空(山边小溪) 阅读(1604) | 评论 (0) 编辑
摘要: CSS 代码是很难管理,尤其是在大型项目。 样式都写在一个全局作用域里,通过复杂的选择器来指向特定的页面元素。冗余、膨胀和维护可以成为前端开发人员的一场噩梦。幸运的是我们有一些 CSS 工具来帮助开发者克服这种情况。这里集合了15款用于管理 CSS 代码的优秀的 CSS 工具,分享给大家。阅读全文
posted @ 2016-05-15 22:31 梦想天空(山边小溪) 阅读(3422) | 评论 (4) 编辑
摘要: 之前给大家分了很多的在线工具和参考文档,这里又为大家搜集了前端开发必备的20个在线工具和指南。新的一周,你需要计划学习新的东西或者能够提升你的能力。相信你会在这个列表中发现对你很有用的资料。阅读全文
posted @ 2016-04-08 12:35 梦想天空(山边小溪) 阅读(7597) | 评论 (1) 编辑
摘要: CSS所能做的就是改变网页的布局、排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经。值得庆幸的是一些优秀的开发人员提供了很多在线的 Web 应用程序来帮助我们。阅读全文
posted @ 2016-03-07 12:25 梦想天空(山边小溪) 阅读(3499) | 评论 (0) 编辑
摘要: Foundation 6 让您的项目从原型到成平比以往任何时候都更有效!它包括了广泛的模块和灵活的组件。这些多功能就像轻便的积木,可以很容易地把你的想法实现。所有的代码片段支持ARIA属性和作用以及如何正确使用这些组件的说明。阅读全文
posted @ 2015-12-28 12:30 梦想天空(山边小溪) 阅读(5749) | 评论 (0) 编辑
摘要: 每一个网页设计师希望创建让用户能够赏识的网站。当然,这是不可能满足每个人的口味的。幸运的是,我们有最强大的工具和资源。实际上,我们有这么多的网站模板,框架,内容管理系统,先进的工具和其他的东西。这篇文章展示了使用一组使用 CSS3 制作的文本特效,快来欣赏。阅读全文
posted @ 2015-11-22 11:16 梦想天空(山边小溪) 阅读(6868) | 评论 (4) 编辑
摘要: 被请求的HTTP对象之间的延迟会有一个时间段,这个期间网页看起来不完整。Gradify 可以分析出图像中4个最常见的颜色,创建一个梯度(或纯色)作为图片占位符。Gradify 可以在在任何图像发现最突出的颜色并产生一个可伸缩的、响应式的 CSS 渐变。阅读全文
posted @ 2015-07-16 09:09 梦想天空(山边小溪) 阅读(4134) | 评论 (3) 编辑
摘要: Wee 包含许多开发人员在搭建响应的,互动的网站和应用程序时需要的组件。正如它的名字一样,Wee 是一个微小、移动优先的CSS 复位框架。Wee 组织在一个简单的、可扩展的层次结构,拥有一致的样式和脚本。阅读全文
posted @ 2015-06-19 12:56 梦想天空(山边小溪) 阅读(4177) | 评论 (2) 编辑
摘要: Primer 是一个 CSS 工具包,支撑着 GitHub 的前端设计。它的目的仅限于提供通用部件,为我们的开发者提供最大的灵活性,并保持 GitHub 的独特风格。它基于 SCSS 建成,可以通过 Bower 获取,所以很容易在自己的项目中包括全部或部分。阅读全文
posted @ 2015-06-04 11:45 梦想天空(山边小溪) 阅读(2284) | 评论 (0) 编辑
摘要: 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品。CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。阅读全文
posted @ 2015-05-26 09:50 梦想天空(山边小溪) 阅读(6046) | 评论 (5) 编辑
摘要: CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品。阅读全文
posted @ 2015-05-25 13:37 梦想天空(山边小溪) 阅读(11669) | 评论 (12) 编辑
摘要: CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理效果,例如灰度,模糊,饱和,老照片等。阅读全文
posted @ 2015-05-18 12:04 梦想天空(山边小溪) 阅读(4064) | 评论 (0) 编辑
摘要: 今天这篇是2015年第3期(总第34期),希望你能在这里发现有用的资料。梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具。阅读全文
posted @ 2015-04-15 13:48 梦想天空(山边小溪) 阅读(13308) | 评论 (3) 编辑
摘要: Codrops 给我们分享了一组新鲜的按钮样式和效果的集合。它们中的大部分效果都使用了 CSS3 过渡和伪元素,他们都有一个共同点,那就是简单性,没有太多的动画,而是尝试添加一些通过颜色和形状的变化呈现的效果。阅读全文
posted @ 2015-04-13 10:01 梦想天空(山边小溪) 阅读(4348) | 评论 (0) 编辑
摘要: AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现。您可以利用 Animate.css 中的转换或自行创建自己的过渡效果。支持 Firefox、Chrome、Safari、Opera 和 IE 10+ 浏览器。阅读全文
posted @ 2015-04-07 10:58 梦想天空(山边小溪) 阅读(5288) | 评论 (0) 编辑
摘要: 在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等。然而,这里我们要介绍的则是使用 CSS3 制作字体。CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下。阅读全文
posted @ 2015-03-25 09:24 梦想天空(山边小溪) 阅读(3265) | 评论 (5) 编辑
摘要: 下拉菜单是一个很常见的效果,在网站设计中被广泛使用。通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案。使用 HTML5 和 CSS3 可以更容易创造视觉上充满吸引力的下拉菜单。阅读全文
posted @ 2015-03-19 13:38 梦想天空(山边小溪) 阅读(17703) | 评论 (0) 编辑
摘要: 今天这篇是2015年第2期(总第33期),希望你能在这里发现有用的资料。梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具。阅读全文
posted @ 2015-03-12 13:47 梦想天空(山边小溪) 阅读(7172) | 评论 (4) 编辑
摘要: SpaceBase 是一个基于 Sass 的响应式 CSS 框架。SpaceBase 是可以在建立和定制您的需要的一个样板层,它结合最佳实践为今天的响应式网页与我们对每一个项目中使用的核心组件。阅读全文
posted @ 2015-02-10 14:39 梦想天空(山边小溪) 阅读(2726) | 评论 (2) 编辑
摘要: Titon Toolkit 是一个非常强大的用户界面组件,也是实现响应式,移动和现代网页的工具类的集合。每个组件封装了 HTML、CSS 以及为角色特定页面元素的 JavaScript 功能。Toolkit 使用了最新和最伟大的技术,包括 HTML5、CSS3、Sass、Gulp、包管理以及JavaScript的层强有力的新的浏览器的API 。阅读全文
posted @ 2015-02-05 13:47 梦想天空(山边小溪) 阅读(4498) | 评论 (0) 编辑
摘要: 今天,我们想给大家分享一些全屏遮罩效果的灵感。像任何其它的UI组件一样,网页设计不断有新的趋势和风格出现,我们想尝试的遮罩有一些微妙的,还有奇特的效果。这些遮罩的特别之处在于,他们没有像模态窗口那样固定大小而是占据整个屏幕,因此创建效果时,人们必须考虑到这一点。阅读全文
posted @ 2015-01-30 10:48 梦想天空(山边小溪) 阅读(8992) | 评论 (0) 编辑
摘要: 梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2015-01-28 15:06 梦想天空(山边小溪) 阅读(5927) | 评论 (3) 编辑
摘要: 在去年,我给大家分享了《基于 CSS3 的精美模态窗口效果》,而今天我要与大家分享一些新鲜的想法。风格和趋势变化,要求更加适合现代UI的不同的效果。这组新模态窗口效果包含了一些微妙的动画,还有一些应用了SVG变形技术。阅读全文
posted @ 2015-01-26 09:51 梦想天空(山边小溪) 阅读(6799) | 评论 (0) 编辑
摘要: 这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻。此外,子菜单框也可以与此集成起来以使其更具吸引力。导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容。阅读全文
posted @ 2015-01-18 12:35 梦想天空(山边小溪) 阅读(12243) | 评论 (0) 编辑
摘要: 在本教程中,我们将创建一个很好看的照片画廊效果。我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像。在照片堆栈视图,我们可以通过将最上面的图像移动到所有照片后面的方式浏览。阅读全文
posted @ 2015-01-08 09:50 梦想天空(山边小溪) 阅读(3057) | 评论 (0) 编辑
摘要: 产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响。Web 界面上交互的方式很多,只要你去探索,你会发现很多让你眼前一亮的想法。这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得我们去研究和使用。阅读全文
posted @ 2015-01-06 14:14 梦想天空(山边小溪) 阅读(9889) | 评论 (7) 编辑
摘要: 今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果。我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将关闭并重新打开一个更大的图像预览效果。阅读全文
posted @ 2015-01-05 09:15 梦想天空(山边小溪) 阅读(3880) | 评论 (3) 编辑
摘要: BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式。在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 来实现美观的按钮已没有太多的障碍。阅读全文
posted @ 2014-12-29 09:58 梦想天空(山边小溪) 阅读(3271) | 评论 (0) 编辑
摘要: 今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果。我们的想法是展现出样书状结构,使单一的色板或列表点击切换。当点击其中一项,我们就会旋转以显示所选择的项目。阅读全文
posted @ 2014-12-25 14:11 梦想天空(山边小溪) 阅读(4201) | 评论 (0) 编辑
摘要: 现在的网页设计风格正在朝着扁平化发展,力求布局简洁,突出主题内容。而另一方面,网页交互则变得越来越多样性,让用户在操作的时候可以更愉悦。当下很流行给网页元素添加动画,随着 Web 技术的发展,动画的实现方式有多种:JavaScript、CSS3、SVG 以及 Canvas。这篇文章挑选6款帮助前端开发人员实现元素动画的插件。阅读全文
posted @ 2014-12-24 15:14 梦想天空(山边小溪) 阅读(13849) | 评论 (9) 编辑
摘要: 在这个小实验中,我们创建了一个交互式的照片堆栈效果。提供了一些模拟现实的互动的可能性给用户。这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个动作类似现实世界的行为。阅读全文
posted @ 2014-12-19 11:11 梦想天空(山边小溪) 阅读(2397) | 评论 (0) 编辑
摘要: 在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式。但目前还没有像 ::nth-line、::nth-last-line 甚至 ::last-line 这样的选择器。实际上这期选择器在某些情况下是非常有用的,Lining.js 提供了这样的功能。阅读全文
posted @ 2014-12-18 15:38 梦想天空(山边小溪) 阅读(1554) | 评论 (0) 编辑
摘要: tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果。使用非常简单,使用 data 属性配置参数。可以自定义对焦点的位置、模糊半径、焦点的区域大小以及方向。阅读全文
posted @ 2014-12-12 10:00 梦想天空(山边小溪) 阅读(3337) | 评论 (2) 编辑
摘要: 今天我们要为您展示如何创建一些简单又不失时尚的图片说明悬停效果。我们的想法应用悬停效果来显示图片对应的标题,作者和链接按钮。对于一些的效果,我们将使用3D变换。这样做的目的是保持奇妙的效果,并为许多不同的变化提供了灵感。阅读全文
posted @ 2014-12-10 09:28 梦想天空(山边小溪) 阅读(6641) | 评论 (3) 编辑
摘要: 这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件。它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画。相信借助这些插件,你也可以让网站变得高大上起来。阅读全文
posted @ 2014-12-09 14:16 梦想天空(山边小溪) 阅读(17174) | 评论 (5) 编辑
摘要: 这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip、Rotation、Multi-flip、Cube、Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transition 属性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择。阅读全文
posted @ 2014-12-08 09:56 梦想天空(山边小溪) 阅读(6652) | 评论 (0) 编辑
摘要: Web 界面上交互的方式很多,只要你去探索,你会发现很多让你眼前一亮的想法。Codrops 最近发布了一组悬停效果,总共分为两组,多达30种不同的风格。为了让效果尽可能的平滑,最好不要在元素上使用变换以免影响布局。在第二组中采用了 SVG 动画,这也是目前比较流行的方式。阅读全文
posted @ 2014-12-05 10:27 梦想天空(山边小溪) 阅读(11571) | 评论 (3) 编辑
摘要: 《Web 前端开发精华文章推荐》自2011年6月20号发布第一期以来,历经三年半,总共发布了30期。今天这篇是2014年第10期(总第31期),希望你能在这里发现有用的资料。梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用。阅读全文
posted @ 2014-12-02 09:28 梦想天空(山边小溪) 阅读(6514) | 评论 (8) 编辑
摘要: 如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的。网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格。下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网页模板,相信会有你需要的。阅读全文
posted @ 2014-11-27 15:48 梦想天空(山边小溪) 阅读(9849) | 评论 (6) 编辑
摘要: Schema 是一个模块化的,响应式的前端框架,方便,快捷地帮助您迅速启动你的 Web 项目。Schema 配备完整的创建多个视图的能力。从桌面显示器到移动设备,它的12列网格提供强大的灵活性。Schema 借助了强大的 LESS,这使得代码结构干净简洁,超级容易维护。阅读全文
posted @ 2014-11-27 13:12 梦想天空(山边小溪) 阅读(3009) | 评论 (0) 编辑
摘要: 网络有很很多的 CSS 工具和教程可用,它可以帮助设计人员和开发人员轻松、快速地学习 CSS 技术。这些工具中在高效开发 Web 应用程序中发挥重要作用。在这篇文章中,我们收集了40个最好的 CSS 工具用于加速网站开发,如创建 CSS 菜单,动画,三维模型,响应式页面,动画按钮等等。阅读全文
posted @ 2014-11-19 10:29 梦想天空(山边小溪) 阅读(3061) | 评论 (0) 编辑
摘要: 如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加。这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果。阅读全文
posted @ 2014-11-12 09:38 梦想天空(山边小溪) 阅读(3416) | 评论 (0) 编辑
摘要: 最近给大家分享 CSS3 效果比较多,都是充分运用了 CSS3 来实现的。通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加。这篇文章中,我想与大家分享使用 CSS3 过渡特性实现的信封效果的联系表单。阅读全文
posted @ 2014-11-10 09:27 梦想天空(山边小溪) 阅读(3034) | 评论 (2) 编辑
摘要: 在这篇文章中,我们为大家推荐12个创建响应式布局的优秀网格框架。如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务。enjoy!阅读全文
posted @ 2014-11-07 09:15 梦想天空(山边小溪) 阅读(7181) | 评论 (7) 编辑
摘要: 通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加。这篇文章中,我想与大家分享一些 CSS3 动画按钮效果。我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活动状态。阅读全文
posted @ 2014-11-04 11:16 梦想天空(山边小溪) 阅读(2429) | 评论 (0) 编辑
摘要: 作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面。在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果。阅读全文
posted @ 2014-10-31 15:15 梦想天空(山边小溪) 阅读(7619) | 评论 (0) 编辑
摘要: CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果。例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣的效果。本教程将告诉你如何使用 CSS3 为元素创建一组漂亮的图片堆叠效果。阅读全文
posted @ 2014-10-28 12:52 梦想天空(山边小溪) 阅读(4188) | 评论 (0) 编辑
摘要: 这里是精选的12个很炫的 CSS3 效果。CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写复杂的 JavaScript 代码才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。阅读全文
posted @ 2014-10-21 15:14 梦想天空(山边小溪) 阅读(15208) | 评论 (16) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第9期(总第30期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-10-16 15:05 梦想天空(山边小溪) 阅读(6567) | 评论 (0) 编辑
摘要: Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布。虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路径排布相当的复杂,结合 Arctext.js 则可以轻松实现这个效果。阅读全文
posted @ 2014-10-16 10:27 梦想天空(山边小溪) 阅读(4026) | 评论 (0) 编辑
摘要: HTML5 和 CSS3 网站模板存在巨大的需求,网页设计师们都喜欢现成的网站模板,能够轻松地设计和开发美观,吸引眼球的网站。如果你正在寻找响应式的 HTML5 & CSS3 模板,那么你找对地方了,这里罗列了30套免费的响应式 HTML5 & CSS3 模板,可以免费下载。阅读全文
posted @ 2014-10-15 13:33 梦想天空(山边小溪) 阅读(37956) | 评论 (3) 编辑
摘要: 在平常的搜索中,我碰到过很多有趣的信息,应用程序和文档,我把它们整理在下面这个列表。这是收藏的遇到的有用内容的一个伟大的方式,可以在你需要的时候方便查阅。相信你会在这个列表中发现对你很有用的资料。阅读全文
posted @ 2014-10-14 13:45 梦想天空(山边小溪) 阅读(24659) | 评论 (2) 编辑
摘要: Csstyle 是一种现代的方式,用于制作精美的可维护样式表。这个 Csstyle 方法使用 SASS 混入,使你的 CSS 更具可读性和语义,并为你生成选择器,自动处理嵌套等事情。 Csstyle 使您的项目结构令人耳目一新。阅读全文
posted @ 2014-10-10 16:46 梦想天空(山边小溪) 阅读(2120) | 评论 (0) 编辑
摘要: 标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题。在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果。 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CSS 变换特性。阅读全文
posted @ 2014-10-09 09:56 梦想天空(山边小溪) 阅读(5487) | 评论 (0) 编辑
摘要: 作为 Web 开发人员,我想你一定见过各种各样的图片滑块效果。展示产品或者个人作品的方法有很多,其中之一是使用网格样式的滑块效果。在本教程中,我将分享如何使用 jQuery 和 CSS3 变换实现翻转的作品集滑块效果。阅读全文
posted @ 2014-09-28 08:50 梦想天空(山边小溪) 阅读(3810) | 评论 (0) 编辑
摘要: 今天,我们想分享一些动画背景的灵感。全屏背景图片的网站头部是最新的网页设计趋势,已经持续了一段时间。最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中,在这里我们想向您分享几个使用 JavaScript和 Canvas 创建不同页眉的动画示例。阅读全文
posted @ 2014-09-25 10:30 梦想天空(山边小溪) 阅读(29565) | 评论 (0) 编辑
摘要: 在这篇文章中,我们已经编制了30款最好的 Bootstrap 3.0 免费主题和模板清单,让您可以用在下一个项目中,我们希望你能找到有用的。这些主题包含了所有必要的 HTML 和 CSS 为基础的设计模板的版式,表单,按钮,导航和其它界面元件,以及任选的 JavaScript 扩展。阅读全文
posted @ 2014-09-23 15:00 梦想天空(山边小溪) 阅读(119153) | 评论 (28) 编辑
摘要: 今天我们想分享几个简单的款式的网站通知效果。有很多的方式来呈现消息给用户:从经典的咆哮般的通知到窗口顶部的通知栏。各个网站的通知样式和效果千篇一律,难得出现创意的通知效果。这里是实现一个应用 CSS3 动画实现各种风格的通知提示。阅读全文
posted @ 2014-09-23 09:34 梦想天空(山边小溪) 阅读(4781) | 评论 (0) 编辑
摘要: 苹果发布 iPhone 6 和 iPhone 6 Plus 有一段时间了,据说首日预定量达到了创纪录的1600万部,真是不可思议。苹果已经创建了一些指引,让开发者可以受益。他们已经发布了一组苹果官方的 iPhone 6 & Plus 产品图片。阅读全文
posted @ 2014-09-22 12:55 梦想天空(山边小溪) 阅读(2149) | 评论 (0) 编辑
摘要: Waves 点击效果的灵感来自于谷歌的材料设计,很容易使用。只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了。采用 touchstart 与 touchend 事件,支持移动设备。赶紧来体验吧!阅读全文
posted @ 2014-09-18 11:50 梦想天空(山边小溪) 阅读(7010) | 评论 (0) 编辑
摘要: 在互联网上提供很多免费的 Bootstrap 管理后台主题。所有你需要做的就是将它们下载并安装它们,这真的不是什么难事。问题是如何寻找到能够完美符合您的网站需求的主题。当然,你可以自己制作自定义的主题,但时间和资源都是很高贵的,所以在这里我们集合了互联网上一些最好的主题。阅读全文
posted @ 2014-09-15 15:11 梦想天空(山边小溪) 阅读(176072) | 评论 (4) 编辑
摘要: 今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果。您可以把这些效果用在你的作品集,博客或任何你想要的网页中。设置很简单。我们使用了下面这些工具库来实现这个效果。阅读全文
posted @ 2014-09-10 10:54 梦想天空(山边小溪) 阅读(5281) | 评论 (0) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第8期(总第29期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-09-01 23:06 梦想天空(山边小溪) 阅读(4190) | 评论 (0) 编辑
摘要: 这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中。支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效果。阅读全文
posted @ 2014-09-01 10:05 梦想天空(山边小溪) 阅读(3202) | 评论 (1) 编辑
摘要: 这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的、实用的功能,有的是先进的 Web 技术的应用演示。不管哪一种,这些案例中的技术都值得我们去探究和学习。阅读全文
posted @ 2014-08-19 10:08 梦想天空(山边小溪) 阅读(8234) | 评论 (16) 编辑
摘要: 今天给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。阅读全文
posted @ 2014-08-12 13:57 梦想天空(山边小溪) 阅读(6283) | 评论 (15) 编辑
摘要: 有时候,你只是想创造一些真正很酷的效果。例如我们网站常见的关于我们(About us),我们的历史(Our history)等你想暂展示出一些让你的品牌与众不同的页面。图标填充效果可以帮你设计出一个很酷的网页,只需要几个图标即可,让简单的页面看起来也充满活力。阅读全文
posted @ 2014-08-12 10:17 梦想天空(山边小溪) 阅读(2854) | 评论 (0) 编辑
摘要: HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情。所谓只有想不到,没有做不到,的确如此。下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的动画效果。阅读全文
posted @ 2014-08-08 09:12 梦想天空(山边小溪) 阅读(4931) | 评论 (0) 编辑
摘要: 今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果。对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊。阅读全文
posted @ 2014-08-07 13:17 梦想天空(山边小溪) 阅读(6194) | 评论 (0) 编辑
摘要: 每一个 CSS 项目开始时愿望都是很美好的,但不可避免地,多人协作的项目相互之间可能重复使用了相似的颜色,而你从来不知道它们的存在。CSS Colorguard 帮助您保持您想要的颜色设置,当你添加的颜色和那些已经存在的颜色相似的时候提示你。阅读全文
posted @ 2014-08-07 12:21 梦想天空(山边小溪) 阅读(1172) | 评论 (0) 编辑
摘要: ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果。特别适用于个人摄影作品,公司产品展示等用途,赶紧来围观吧。阅读全文
posted @ 2014-07-30 11:32 梦想天空(山边小溪) 阅读(2796) | 评论 (4) 编辑
摘要: 这篇文章给大家分享一组纯 CSS 绘制的《辛普森一家》人物头像。《辛普森一家》(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧。该剧通过对霍默、玛琦、巴特、莉萨和玛吉一家五口生活的描绘,用搞笑的方式自我嘲讽了美国的文化、社会、电视以及人类境况的诸多方面。阅读全文
posted @ 2014-07-22 14:41 梦想天空(山边小溪) 阅读(19289) | 评论 (32) 编辑
摘要: 作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握。前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身手。这篇文章挑选了8个前沿的 HTML5 & CSS3 效果,记得收藏哦:)阅读全文
posted @ 2014-07-17 15:12 梦想天空(山边小溪) 阅读(13977) | 评论 (24) 编辑
摘要: 在当今世界,有许多前端开发的框架。那么,为什么还要再造一个框架呢?Concise 建立的目的是使你有很多的开箱即用的选项,让你能够方便的搭建移动友好的网站和 Web 应用程序。另外还包括一个简单的网格系统,开发人员可以使用该框架来推动自己的创作。阅读全文
posted @ 2014-07-15 10:51 梦想天空(山边小溪) 阅读(2740) | 评论 (0) 编辑
摘要: 今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站。在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例。响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案。 HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览。阅读全文
posted @ 2014-07-14 15:44 梦想天空(山边小溪) 阅读(7443) | 评论 (4) 编辑
摘要: 大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现。而今天这里要分享的这款漂亮的多彩时钟效果大家不一定见过,赶紧来看看。阅读全文
posted @ 2014-07-10 10:34 梦想天空(山边小溪) 阅读(2911) | 评论 (0) 编辑
摘要: 在工作中,我们可能会用到各种交互效果。而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成只是整理的习惯是很有必要的。这篇文章收集了10个在网站开发中很有用的 CSS3 效果,记得收藏。阅读全文
posted @ 2014-07-08 10:39 梦想天空(山边小溪) 阅读(96702) | 评论 (73) 编辑
摘要: 响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案。 HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览。今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站。在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例。阅读全文
posted @ 2014-07-03 13:57 梦想天空(山边小溪) 阅读(9656) | 评论 (4) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第7期(总第28期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-07-01 23:11 梦想天空(山边小溪) 阅读(5274) | 评论 (4) 编辑
摘要: 今天,我们想向您展示如何创建平铺背景图像的幻灯片效果。其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看。这个幻灯片效果是由四个区域的独立移动构成,通过画面分割,同时显示出新的图片。这里需要组合使用 CSS3 的3D转换、过渡和动画功能。阅读全文
posted @ 2014-06-25 10:02 梦想天空(山边小溪) 阅读(9173) | 评论 (5) 编辑
摘要: 视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果。下面分享的这个图片滑块效果是难得一见的结合视差滚动的例子,之前的文章给大家分享过,这里再推荐一下。美女很养眼吧 :)阅读全文
posted @ 2014-06-19 10:38 梦想天空(山边小溪) 阅读(3581) | 评论 (2) 编辑
摘要: jQuery 和 CSS 可以说是设计和开发行业的一次革命。这一切如此简单,快捷的一站式服务。jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件。阅读全文
posted @ 2014-06-18 15:41 梦想天空(山边小溪) 阅读(17912) | 评论 (0) 编辑
摘要: Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果。只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代码。阅读全文
posted @ 2014-06-17 10:26 梦想天空(山边小溪) 阅读(6612) | 评论 (0) 编辑
摘要: 之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合。这些加载效果都是基于一个 DIV 元素实现的,十分强悍。阅读全文
posted @ 2014-06-16 10:42 梦想天空(山边小溪) 阅读(8349) | 评论 (10) 编辑
摘要: 网站或者应用系统的管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,下面分享的这个后台管理模板的设计非常漂亮,特别是导航部分,头部还有未读的短消息和提醒的条数显示。阅读全文
posted @ 2014-06-12 15:38 梦想天空(山边小溪) 阅读(8195) | 评论 (2) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第6期(总第27期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-06-11 23:38 梦想天空(山边小溪) 阅读(7405) | 评论 (2) 编辑
摘要: 在早期,我们都是通过使用 JavaScript 来实现占位符功能。而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能。这里向大家分享一个自适应的占位符效果(Adaptive Placeholder),当你输入的时候,提示文字不会消失,而是以动画的方式移动到了输入框的上方。阅读全文
posted @ 2014-06-11 14:51 梦想天空(山边小溪) 阅读(1169) | 评论 (1) 编辑
摘要: 使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果。 利用 3D transforms(变换)属性来实现多种不同的效果。主要的想法是创建三维图像切片,作为三维物体的另一侧,旋转并显示下一个图像。若浏览器不支持3D变换,一个简单的滑块将作为后备方案。阅读全文
posted @ 2014-06-10 14:54 梦想天空(山边小溪) 阅读(15685) | 评论 (9) 编辑
摘要: Shine.js 是一个用于实现漂亮阴影的 JS 库。您可以设置动态光的位置,可定制的阴影。不依赖于第三方库,兼容 AMD。能在支持 textShadow 或 boxShadow 的浏览器中正常使用,如果有需要会自动添加前缀。阅读全文
posted @ 2014-06-09 16:16 梦想天空(山边小溪) 阅读(3453) | 评论 (2) 编辑
摘要: Bourbon 是一个简单易用的 Sass 混入(Mixin)库,无需配置。该混入包含用于支持所有现代浏览器的 CSS3 属性前缀。前缀需要确保在旧的浏览器支持优雅降级。Bourbon 使用 SCSS 语法。阅读全文
posted @ 2014-06-09 12:52 梦想天空(山边小溪) 阅读(2749) | 评论 (0) 编辑
摘要: Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,真的非常简单。提供了Default、Gradient、Sections 以及 Flash 四种效果,满足开发的各种场合需要。阅读全文
posted @ 2014-06-04 13:21 梦想天空(山边小溪) 阅读(4272) | 评论 (7) 编辑
摘要: 在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况。RWD Table Patterns 是一个很好的响应式表格解决方案。它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏览器会使用滚动条代替。阅读全文
posted @ 2014-05-28 14:41 梦想天空(山边小溪) 阅读(3387) | 评论 (2) 编辑
摘要: 如果你看过三星企业设计中心网站,你肯定已经注意到了时尚的网格加载效果。在这篇文章中,我们想向您展示了如何使用 Masonry 网格砌体插件,结合 CSS 动画重现这种效果。另外在这里,我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用。阅读全文
posted @ 2014-05-27 09:39 梦想天空(山边小溪) 阅读(9839) | 评论 (12) 编辑
摘要: 今天我们想与大家分享一个小的动画概念。这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​。实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容。我们试图模仿应用程序的行为,因此创建了两个演示,分别演示垂直和水平旋转网格项。阅读全文
posted @ 2014-05-26 10:46 梦想天空(山边小溪) 阅读(3056) | 评论 (0) 编辑
摘要: WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome、Safari 和 Firefox 浏览器。以文件输入控件的改进,使用 label 包裹在 input 的外贸,所以自定义控件可以正确触发文件浏览器,并且定义了点击时的样式,像复选框和单选框还有选中状态的样式。阅读全文
posted @ 2014-05-25 11:05 梦想天空(山边小溪) 阅读(3041) | 评论 (0) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第5期(总第26期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-05-22 09:35 梦想天空(山边小溪) 阅读(3751) | 评论 (7) 编辑
摘要: LESS 是一个编写 CSS 的很好的方式 ,使您可以使用变量,嵌套规则,混入以及其它许多有用的功能,它可以帮助您更好地组织你的 CSS 代码。最近我一直在研究 Node.js ,并想用 less-middleware 中间件,这样我可以很容易的在我的应用程序中使用 LESS 了。配置好以后,LESS-Middleware 能够自动处理编译你的 LESS 代码为 CSS 代码。阅读全文
posted @ 2014-05-19 15:41 梦想天空(山边小溪) 阅读(6228) | 评论 (2) 编辑
摘要: 对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西。唯一的问题是,你需要跟上这个领域的发展脚本,因此,你必须不断的学习,不断的前进。本文将分享能够帮助您快速掌握 HTML5 的实例教程,值得好好学习。阅读全文
posted @ 2014-05-13 10:08 梦想天空(山边小溪) 阅读(10675) | 评论 (12) 编辑
摘要: Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁。内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码。快速创建网站的布局响应式将变成一件轻而易举的事。阅读全文
posted @ 2014-05-09 15:44 梦想天空(山边小溪) 阅读(2421) | 评论 (2) 编辑
摘要: 今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果。虽然有些效果非常简单,只是简单的滑动动作,但另外的一些则是利用了视角和 3D 转换来创造一些立体动感的效果。阅读全文
posted @ 2014-05-08 14:09 梦想天空(山边小溪) 阅读(56062) | 评论 (49) 编辑
摘要: Jeet 是一个先进的,直观的 CSS 网格系统。通过使用预处理器的强大功能,我们现在可以通过实际分数(或者浮点数)来生成一个基于百分比宽度和间隔的网格。让你用更少的代码,更快的速度构建页面布局。阅读全文
posted @ 2014-05-06 15:44 梦想天空(山边小溪) 阅读(1507) | 评论 (0) 编辑
摘要: Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践。Twitter Bootstrap 框架包含了众多的预定义风格的组件,插件和加载项。在这篇文章中,我们想向大家介绍15款最好的 Twitter Bootstrap 开发工具以更好地满足要求以及帮助提高他们的 Web 开发的生产力。阅读全文
posted @ 2014-05-05 14:46 梦想天空(山边小溪) 阅读(19237) | 评论 (22) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第4期(总第25期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-05-05 09:31 梦想天空(山边小溪) 阅读(5753) | 评论 (7) 编辑
摘要: CSS 浮动,一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。阅读全文
posted @ 2014-04-30 17:03 梦想天空(山边小溪) 阅读(4908) | 评论 (13) 编辑
摘要: iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作。基于 SCSS 技术构建(包括文件),便于修改变量。有模块化的代码,无需包含整个文件。 把饭 30 多个悬停效果,满足各种需要。阅读全文
posted @ 2014-04-30 09:54 梦想天空(山边小溪) 阅读(6564) | 评论 (5) 编辑
摘要: Flexbox 布局模块目前是 W3C 候选标准,旨在提供一个更有效的方式进行布局,对齐和为容器里的项目分配空间,即使它们的大小是未知的或者动态的。这里分享一个基于 Knockout.js 构建的互动教程,让你5分钟就掌握 Flexbox 布局模式。阅读全文
posted @ 2014-04-29 10:46 梦想天空(山边小溪) 阅读(7875) | 评论 (0) 编辑
摘要: 今天我们想与大家分享另一套过渡效果。这一次,我们将探讨如何实现侧边栏的过渡动画,就像我们已经在多级推出菜单中使用的。我们的想法是,以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是。通常侧边栏滑入,把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果,而今天这篇文章能够给你一些启示。阅读全文
posted @ 2014-04-28 09:47 梦想天空(山边小溪) 阅读(16524) | 评论 (35) 编辑
摘要: 这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板。每一个细节都精心设计,以创建一个美妙的用户体验。这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及应用程序展示网站。阅读全文
posted @ 2014-04-26 12:27 梦想天空(山边小溪) 阅读(19133) | 评论 (0) 编辑
摘要: CSS 是前端开发必备技能,入门容易,深入难。比如像 Pseudo-class、Pseudo-element、Media query、Media type 以及 Vendor prefix 的概念,很多人都还很模糊。CSS Vocabulary 是一个很全的 CSS 词汇表,能帮助你轻松了解这些词汇的含义。阅读全文
posted @ 2014-04-24 10:51 梦想天空(山边小溪) 阅读(3053) | 评论 (0) 编辑
摘要: BFC 已经是一个耳听熟闻的词语了,网上有许多关于BFC的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BF阅读全文
posted @ 2014-04-23 22:47 梦想天空(山边小溪) 阅读(76559) | 评论 (53) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第3期(总第24期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-04-22 22:58 梦想天空(山边小溪) 阅读(6550) | 评论 (0) 编辑
摘要: 复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS3 实现,未使用任何图片。阅读全文
posted @ 2014-04-21 09:31 梦想天空(山边小溪) 阅读(17148) | 评论 (9) 编辑
摘要: EnjoyCSS 是一款先进的 CSS3 代码生成工具,可以让你摆脱日常的编码。它方便和易于使用的用户界面允许您快速,无需编码就可以调节出丰富的图形样式。您将能够玩转所有的 EnjoyCSS 参数,就像在 Photoshop 或 illustarator 中一样,结合所有可能的 CSS3 样式功能。所有必需的 CSS 代码将被 EnjoyCSS 自动生成。阅读全文
posted @ 2014-04-17 14:13 梦想天空(山边小溪) 阅读(6632) | 评论 (3) 编辑
摘要: Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 magic.min.css 就可以使用了。 这个项目现在GitHub上,包含 bling, perspective, rotate, slide, tin, bomb 等众多特效。阅读全文
posted @ 2014-04-14 10:44 梦想天空(山边小溪) 阅读(13055) | 评论 (2) 编辑
摘要: Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架。它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途径。阅读全文
posted @ 2014-04-10 11:12 梦想天空(山边小溪) 阅读(8495) | 评论 (0) 编辑
摘要: 响应式的 Web 设计方法的目的是制作一个更加灵活的网站,能够为用户提供最佳的视觉体验——方便阅读和导航,只需最少的调整就可实现缩放和滚动,支持更广泛的设备,从移动电话到手持设备到台式电脑。下面是一个优秀的网格工具清单,能够帮助更好的创建响应式布局。阅读全文
posted @ 2014-04-09 14:56 梦想天空(山边小溪) 阅读(24117) | 评论 (0) 编辑
摘要: Codrops 最近分享了一些很酷的图片切换灵感。有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片。状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为。阅读全文
posted @ 2014-04-04 10:27 梦想天空(山边小溪) 阅读(14456) | 评论 (2) 编辑
摘要: 网站的加载速度在一定程度上来说是决定网站能否成功的关键。如果您是网站所有者,一定知道网站速度的重要性。因为没有人愿意为了打开一个网页而等老半天,换句话说,如果你的网站打开速度很慢,将流失大量的访客,甚至出现多米诺效应的不良影响。阅读全文
posted @ 2014-04-02 14:00 梦想天空(山边小溪) 阅读(12284) | 评论 (20) 编辑
摘要: skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序。让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS的快捷方式和插件系统。阅读全文
posted @ 2014-04-02 10:52 梦想天空(山边小溪) 阅读(4754) | 评论 (2) 编辑
摘要: 网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源。今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助你学习网站布局设计。enjoy!阅读全文
posted @ 2014-04-01 15:48 梦想天空(山边小溪) 阅读(5562) | 评论 (0) 编辑
摘要: Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站。这个框架采用流行的扁平化设计和响应式设计。除了布局和网格之外,所有的主要元素都有预定义的样式,例如按,表格,表单等,而且还有各种各样的 JavaScript 组件,像模态弹窗,工具提示等等。阅读全文
posted @ 2014-03-30 12:29 梦想天空(山边小溪) 阅读(3060) | 评论 (0) 编辑
摘要: 每天有数以百计的网站推出,其中很多优秀网站被推荐到 CSS 画廊供大家评分和评论,这对于网页设计师来说是很好的灵感来源。今天,我们选择了15个来自全球各地的 CSS3 网站设计作品, 它们都是赢得 CSS 奖项的。enjoy!阅读全文
posted @ 2014-03-28 09:59 梦想天空(山边小溪) 阅读(4473) | 评论 (0) 编辑
摘要: 使用 HTML5,CSS3 和 JavaScript 开发移动应用经过实践证明是一种可行的方式。这里收录了几款 iOS 风格的手机应用程序开发框架,帮助您使用擅长的 Web 技术来开发移动应用程序。这些工具大多都基于 HTML & CSS,而另一些则可能需要使用 JavaScript 库。阅读全文
posted @ 2014-03-25 15:09 梦想天空(山边小溪) 阅读(12307) | 评论 (14) 编辑
摘要: HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术。每一项技术都有简洁,在线演示以及详细的文档链接。这些技术将成为未来一段时间 Web 开发的顶尖技术,如果不想落伍的话就赶紧来看看吧。阅读全文
posted @ 2014-03-25 10:28 梦想天空(山边小溪) 阅读(5828) | 评论 (3) 编辑
摘要: 《Web前端开发精华文章推荐》2014年第二期(总第二十三期)和大家见面了。梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀jQuery插件,展示前沿的HTML5和CSS3技术应用,推荐优秀的网页设计案例,共享精美的设计素材和优秀的Web开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-03-18 15:20 梦想天空(山边小溪) 阅读(6127) | 评论 (0) 编辑
摘要: CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签,加上特定的 class 即可。阅读全文
posted @ 2014-03-11 09:38 梦想天空(山边小溪) 阅读(21495) | 评论 (0) 编辑
摘要: CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉。特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点。在开发中,选择好工具是非常重要的。这篇文章分享最好的20款 CSS 编辑器给开发人员,因为这些实用的工具将让你的工作更有效率。阅读全文
posted @ 2014-03-02 23:40 梦想天空(山边小溪) 阅读(30468) | 评论 (5) 编辑
摘要: 下拉菜单是一个很常见的效果,在网站设计中被广泛使用。通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案。使用 HTML5 和 CSS3 可以更容易创造视觉上充满吸引力的下拉菜单。阅读全文
posted @ 2014-02-24 13:10 梦想天空(山边小溪) 阅读(55003) | 评论 (0) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第一期(总第二十二期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-02-18 10:00 梦想天空(山边小溪) 阅读(8718) | 评论 (8) 编辑
摘要: modern.IE 是微软推出的一个开发人员中心,提供免费的工具和资源,旨在使您能够花更少的时间来测试各种版本的 Internet Explorer,并留出更多时间在现代 Web 上构建重要的内容。modern.IE 在支持旧版 IE 的同时,可使您更加轻松地利用 Web 标准(例如 HTML5 和 CSS3)构建创新体验,从而帮助推动 Web 的发展。阅读全文
posted @ 2014-02-17 09:51 梦想天空(山边小溪) 阅读(1917) | 评论 (0) 编辑
摘要: 在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。阅读全文
posted @ 2014-02-14 09:56 梦想天空(山边小溪) 阅读(17722) | 评论 (1) 编辑
摘要: 下拉菜单是一个很常见的效果,在网站设计中被广泛使用。通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案。使用 HTML5 和 CSS3 可以更容易创造视觉上充满吸引力的下拉菜单。阅读全文
posted @ 2014-02-11 14:49 梦想天空(山边小溪) 阅读(60309) | 评论 (12) 编辑
摘要: CodePen 是一个在线的 HTML、CSS 和 JavaScript 代码编辑器,能够编写代码并即时预览效果。你在上面可以在线展示自己的作品,也可以看到其他人在网页中实现的各种令人惊奇的效果。今天这篇文章就为大家挑选出8个超炫的 Web 效果演示,这些 Demo 可以说都是艺术品,让小伙伴们都惊呆了!阅读全文
posted @ 2014-01-23 14:24 梦想天空(山边小溪) 阅读(35952) | 评论 (75) 编辑
摘要: 这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具。对于每一项工作,开发人员需要特定的辅助工具,所以如果下面这些工具对于你来说都是新的领域,那么这篇文章是非常有用的,因为这些实用的工具将让你的工作更有效率。阅读全文
posted @ 2014-01-20 14:21 梦想天空(山边小溪) 阅读(17879) | 评论 (17) 编辑
摘要: 这是一篇全面介绍 Webkit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源),并花了很多时间来研读网络浏览器的源代码。阅读全文
posted @ 2014-01-10 14:11 梦想天空(山边小溪) 阅读(22159) | 评论 (16) 编辑
摘要: Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮、LOGO以及图片等元素。所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果,因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。阅读全文
posted @ 2014-01-08 22:44 梦想天空(山边小溪) 阅读(40266) | 评论 (0) 编辑
摘要: 响应式设计用于创建可在任何设备上进行查看,并可以从智能手机屏幕无缝地切换到台式电脑屏幕的网站的技术。它的重点是确保轻松导航和可读性,以最小的缩放,滚动或平移必需的。路已变得不那么的最近趋势和更多的必需品,作为可以跨多种操作系统和设备的增加迅速查看手机兼容的网站的需求。阅读全文
posted @ 2014-01-06 14:05 梦想天空(山边小溪) 阅读(6297) | 评论 (2) 编辑
摘要: 感谢大家在过去一年对《梦想天空》博客的支持,2014年我会继续向大家分享更多更好的前端开发相关的技术文章、资源和素材。祝大家在新的一年里心想事成,马到成功!这篇文章挑选了10篇2013年最受欢迎的前端开发博文,看看有没有你错过的精彩内容。阅读全文
posted @ 2014-01-02 14:35 梦想天空(山边小溪) 阅读(6770) | 评论 (10) 编辑
摘要: SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更加的技术实现方案和使用体验。阅读全文
posted @ 2013-12-28 15:17 梦想天空(山边小溪) 阅读(236766) | 评论 (47) 编辑
摘要: Myth 是一个预处理器,可以让你编写纯CSS,而无需担心速度慢的浏览器的支持。有点类似于 CSS polyfill 。Myth 让你写纯粹的 CSS,同时还让你可以使用类似 LESS 和 Sass 的工具。您仍然可以使用变量和数学函数,就像你在其它预处理器中使用的一样。阅读全文
posted @ 2013-12-26 14:13 梦想天空(山边小溪) 阅读(1509) | 评论 (0) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第九期(总第二十一期)和大家见面了。梦想天空博客关注前端开发技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的网页设计案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2013-12-25 09:53 梦想天空(山边小溪) 阅读(4329) | 评论 (4) 编辑
摘要: inuit.css 是一个强大的,可扩展的 CSS 框架,另外还是基于 Sass,面向对象的框架。inuit.css 是建立在 BEM 风格的命名约定,非常适合于想要专注于创意而不是代码的设计师以及喜欢抽象和面向对象方法的开发人员。它提供给你设计模式,而不是设计决策。阅读全文
posted @ 2013-12-21 11:45 梦想天空(山边小溪) 阅读(2140) | 评论 (0) 编辑
摘要: 今天的《优秀前端教程》给大家带来的是一组扁平风格的 3D 进度按钮样式,其中的按钮本身作为一个进度指示器。3D 样式是用于在按钮的一侧展示j进度。需要注意的是,这些效果都是借助于在伪元素上使用过渡特效,因此在某些浏览器(如 Safari 和移动 Safari 浏览器等)不支持。阅读全文
posted @ 2013-12-19 14:02 梦想天空(山边小溪) 阅读(2665) | 评论 (4) 编辑
摘要: 我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在图形绘制中的创新使用。阅读全文
posted @ 2013-12-17 22:55 梦想天空(山边小溪) 阅读(2513) | 评论 (10) 编辑
摘要: 由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能。这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力。这里分享的20个优秀的 CSS3 按钮效果制作教程,你可以学习这些技术并使用它们为您的作品创造更多的乐趣。阅读全文
posted @ 2013-12-11 20:24 梦想天空(山边小溪) 阅读(7188) | 评论 (0) 编辑
摘要: 在网站中,有很多地方会需要在图片上显示图片标题。使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果。没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作。您可以查看网页的源代码,了解动画是如何工作的。阅读全文
posted @ 2013-12-05 17:15 梦想天空(山边小溪) 阅读(2507) | 评论 (0) 编辑
摘要: 由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能。这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力。这里分享的20个优秀的 CSS3 按钮效果制作教程,你可以学习这些技术并使用它们为您的作品创造更多的乐趣。阅读全文
posted @ 2013-12-03 22:46 梦想天空(山边小溪) 阅读(2732) | 评论 (4) 编辑
摘要: 我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。阅读全文
posted @ 2013-11-29 14:19 梦想天空(山边小溪) 阅读(2769) | 评论 (2) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第八期(总第二十期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章和资源能够帮助到您。阅读全文
posted @ 2013-11-28 15:33 梦想天空(山边小溪) 阅读(5165) | 评论 (0) 编辑
摘要: 数以百万计的设计师和工程师采用 Foundation 作为他们的产品和网站设计的前端框架。Foundation 是第一个响应式、语义化和移动优先的开源框架。最近发布的 Foundation 5 建立了一个新的命令行工具,可以让你更快速的建立起 Foundation 项目,这些项目现在将使用 Libsass——后端的 Sass 编译库,这将大大加快执行速度。阅读全文
posted @ 2013-11-26 09:23 梦想天空(山边小溪) 阅读(8314) | 评论 (2) 编辑
摘要: 在 CSS 测量系统中,有好几种单位,如像素、百分比、英寸、厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用。很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行。《Which CSS Measurements To Use When》 这篇文章介绍了各种单位的使用场合,可以参考一下。阅读全文
posted @ 2013-11-20 23:17 梦想天空(山边小溪) 阅读(1340) | 评论 (2) 编辑
摘要: 我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制数学中的各种形状的砖石等。阅读全文
posted @ 2013-11-19 20:29 梦想天空(山边小溪) 阅读(3989) | 评论 (0) 编辑
摘要: Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架。可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型。阅读全文
posted @ 2013-11-16 15:04 梦想天空(山边小溪) 阅读(2570) | 评论 (0) 编辑
摘要: Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式。这是一个现代的,HTML5-ready 的 CSS 重置样式集。阅读全文
posted @ 2013-11-14 11:21 梦想天空(山边小溪) 阅读(27548) | 评论 (4) 编辑
摘要: Simptip 是一个简单基于 Sass 的 CSS 工具提示效果。帮助你在网站中加入在不同的方向(上、左、右、下)的工具提示,也可以设置不同的颜色如成功、信息、警告和危险。最后还有其他特性如软边、半箭头,活动效果,渐变效果和多行提示等等。阅读全文
posted @ 2013-11-13 11:55 梦想天空(山边小溪) 阅读(1695) | 评论 (0) 编辑
摘要: 《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制五角星、六边形、心形等等。我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。阅读全文
posted @ 2013-11-07 07:37 梦想天空(山边小溪) 阅读(16553) | 评论 (18) 编辑
摘要: 在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验。正如我们都知道的,CSS3 在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性。你可以学习这些教程和试验中的优秀技术并使用它们为您的作品创造更多的乐趣。阅读全文
posted @ 2013-11-02 22:31 梦想天空(山边小溪) 阅读(57876) | 评论 (6) 编辑
摘要: 我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制基本图形(圆、椭圆等)。阅读全文
posted @ 2013-11-02 10:21 梦想天空(山边小溪) 阅读(10648) | 评论 (2) 编辑
摘要: 当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。阅读全文
posted @ 2013-11-01 10:11 梦想天空(山边小溪) 阅读(10415) | 评论 (10) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第七期(总第十九期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2013-10-30 13:57 梦想天空(山边小溪) 阅读(7387) | 评论 (18) 编辑
摘要: 我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。今天这篇文章开始推出《百变 CSS 系列》,给大家带来 CSS 在网页中以及图形绘制中的使用。首先给大家打来的是流行的 CSS 三角形绘制方法。阅读全文
posted @ 2013-10-28 22:42 梦想天空(山边小溪) 阅读(40760) | 评论 (19) 编辑
摘要: 对于视差滚动(Parallax Scrolling),关注网页设计的朋友都不会陌生。在网页设计中,视差滚动是一种很特别的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动形成 3D 运动效果,有很强的视觉冲击力。 前阵子视差被用来提供一个漂浮在屏幕周围的元素,有很多的网站使用这种效果,有点势不可挡的趋势。阅读全文
posted @ 2013-10-21 22:34 梦想天空(山边小溪) 阅读(4163) | 评论 (5) 编辑
摘要: Clank 是一个自由和开放源码的 HTML/CSS 框架,可以帮助你轻松创建本地手机或平板电脑应用程序的原型。它着重于提供一致的用户界面,不会刻意去模仿一个特定的 OS 。该框架是基于组件的,这样我们就可以选择和使用所需的部分,组件包括按钮,表格,滑块,切换等等。阅读全文
posted @ 2013-10-20 13:30 梦想天空(山边小溪) 阅读(4650) | 评论 (0) 编辑
摘要: 如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难。 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手。这是一个基于 Web 的工具,使任何人都可以通过拖放创建一个具有响应性的布局原型。你可以简单地添加任意数量的页面,DIV,定义百分比的宽度,也支持嵌套网格,还可以自动生成下载文件。阅读全文
posted @ 2013-10-19 23:31 梦想天空(山边小溪) 阅读(3247) | 评论 (4) 编辑
摘要: 在网络上能找很多免费的 PSD 格式素材,但是很少有 HTML/CSS 界面组件下载。在这篇文章中,收集了14套免费的 HTML/CSS 界面源码分享给前端设计师和开发者们。这些组件包括按钮、滑块、表单、搜索栏、进度条等。阅读全文
posted @ 2013-10-14 10:01 梦想天空(山边小溪) 阅读(14917) | 评论 (0) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第六期(总第十八期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2013-09-17 15:22 梦想天空(山边小溪) 阅读(7650) | 评论 (14) 编辑
摘要: Screenfly 让你能够在各种设备的屏幕和分辨率下查看你的网站。输入网址,并点击GO开始浏览网页。Screenfly 可以使用代理服务器来模拟设备,当您查看您的网站,代理服务器模仿您所选择的设备的用户代理字符串。阅读全文
posted @ 2013-09-17 10:42 梦想天空(山边小溪) 阅读(5968) | 评论 (5) 编辑
摘要: CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画。所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类就可以了。阅读全文
posted @ 2013-09-12 09:51 梦想天空(山边小溪) 阅读(7253) | 评论 (0) 编辑
摘要: Bootstrap Magic 是一款基于 Bootstrap 和 AngularJS 的主题创建工具。您可以轻松地创建您自己的 Twitter Bootstrap 主题,可以立即看到你的内容变化。您还可以添加来自 Google Webfont 的很棒的网页字体。阅读全文
posted @ 2013-09-11 10:14 梦想天空(山边小溪) 阅读(16978) | 评论 (4) 编辑
摘要: Animo.js 是一个功能强大的小工具,用于管理 CSS 动画。它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等。Animo 还包括惊人的 animate.css,为您提供了近60个美丽的动画,还加入了一些辅助动画到库中。阅读全文
posted @ 2013-09-07 15:32 梦想天空(山边小溪) 阅读(4119) | 评论 (4) 编辑
摘要: 每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品。这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平,相信你可以得到很大的启发。阅读全文
posted @ 2013-09-02 14:05 梦想天空(山边小溪) 阅读(4261) | 评论 (6) 编辑
摘要: Intention.js 提供一个轻量级的和明确的方式,帮助你动态重组 HTML,成为响应式的方式。操作方法都放在了元素自己里面,所以灵活的布局看起来就似乎不会那么的抽象和凌乱。您可以轻松地增加布局的选择和灵活性,缩短开发时间和减少样式表覆盖媒体查询驱动的必要性。你可以轻松地添加自己的上下文或者创建自己的自定义组。阅读全文
posted @ 2013-09-02 09:42 梦想天空(山边小溪) 阅读(2687) | 评论 (0) 编辑
摘要: 优秀网页作品赏析《第四季》,精彩继续每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品。这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平,相信你可以得到很大的启发。阅读全文
posted @ 2013-08-29 10:09 梦想天空(山边小溪) 阅读(3069) | 评论 (0) 编辑
摘要: CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能。作为前端开发人员必须要掌握的一部分,可能基本的大家都知道。但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道。阅读全文
posted @ 2013-08-28 15:35 梦想天空(山边小溪) 阅读(3578) | 评论 (10) 编辑
摘要: Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状。它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果。使用 Tridiv 可以创造极其复杂的对象和动画。阅读全文
posted @ 2013-08-26 16:51 梦想天空(山边小溪) 阅读(2174) | 评论 (0) 编辑
摘要: Twitter Bootstrap 3.0 终于正式发布了。这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发。几乎一切都已经被重新设计和重建,更好的支持移动端设备。最新的 Twitter Booststrap 包含四层网格类​​——手机,平板电脑,台式机,和大型桌面,你可以做一些超级疯狂的布局。定制器进行了重新设计,现在在浏览器中编译,而不是 Heroku 上,有更好的依赖性支持,甚至有内置的错误处理。阅读全文
posted @ 2013-08-21 10:46 梦想天空(山边小溪) 阅读(22906) | 评论 (16) 编辑
摘要: 每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品。这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平,相信你可以得到很大的启发。阅读全文
posted @ 2013-08-20 15:27 梦想天空(山边小溪) 阅读(4009) | 评论 (8) 编辑
摘要: Codrops 给我们分享了一个多层菜单的实现教程。他们试图探索创建一个嵌套的多级菜单,是非常有用的东西,可以有很多的内容,如网上商店的导航菜单。 这个 Push Menu 效果理论上可以包含无限嵌套的子菜单。阅读全文
posted @ 2013-08-20 10:22 梦想天空(山边小溪) 阅读(2249) | 评论 (0) 编辑
摘要: 今天,我们想与您分享一个实验性的3D效果。它涉及到一个3D移动设备和一些移动应用程序截图。点击切换按钮时,我们将让移动设备转动并移动每个画面,使我们能看到一个分层的视图。你可能之前没见过这种应用程序演示模式,使用 CSS 来实现这样的效果是十分有趣的事情。阅读全文
posted @ 2013-08-19 14:10 梦想天空(山边小溪) 阅读(3126) | 评论 (0) 编辑
摘要: 在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航。教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式。不过不用担心,这里用到的数学知识真的是很简单的。教程使用浅显易懂的语言来介绍数学逻辑,让你能够清晰的理解背后的技术。阅读全文
posted @ 2013-08-17 14:34 梦想天空(山边小溪) 阅读(2930) | 评论 (0) 编辑
摘要: 前端开发并不容易,除了掌握基本的 HTML、CSS 和 Javascript 之外,因为不同版本的浏览器和平台,你需要知道如何做一个跨浏览器的网站。而最新的发展趋势——响应式设计,它不仅使 Web 项目开发更难,也需要花费更多的开发时间。不过,有很多优秀的框架可以帮助到你,这篇文章挑选了14个响应式的前端框架。我列出了它的 UI 组件和 Javascript 插件,几乎所有的都使用了响应式网格系统。阅读全文
posted @ 2013-08-07 14:48 梦想天空(山边小溪) 阅读(23365) | 评论 (25) 编辑
摘要: 今天,给大家分享来自 Quess 的如何实现图片的形状遮罩和放大动画效果。在很多作品集网站中,我们经常能看到这样的造型和效果。就个人而言,我觉得我们不能因为旧的浏览器不支持,我们就放弃在项目中使用 HTML5 或者 CSS3 技术。我们应该“奖励”使用现代浏览器的用户,给他们一个更好的用户体验。阅读全文
posted @ 2013-08-07 10:13 梦想天空(山边小溪) 阅读(5196) | 评论 (0) 编辑
摘要: 每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品。这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平,相信你可以得到很大的启发。阅读全文
posted @ 2013-08-02 14:49 梦想天空(山边小溪) 阅读(3520) | 评论 (3) 编辑
摘要: 使用 CSS,你能够以极高的效率和易用性创造出美丽的设计。CSS3 则更加强大,能够创造更多丰富的效果和功能,而不需要任何外部插件。今天,我为大家收集了25个很有用的 CSS 教程,技术和资源,能够帮助你提高技能。阅读全文
posted @ 2013-07-31 10:04 梦想天空(山边小溪) 阅读(5844) | 评论 (2) 编辑
摘要: 每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品。这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平,相信你可以得到很大的启发。阅读全文
posted @ 2013-07-29 14:37 梦想天空(山边小溪) 阅读(3955) | 评论 (4) 编辑
摘要: Cardinal 是一个适用于移动项目的 CSS 框架,包含很多有用的默认样式、矢量字体、可重用的模块以及一个简单的响应式模块系统。Cardinal 提供了一种在多种移动设备上实现可伸缩的字体和布局的新方法,值得关注。阅读全文
posted @ 2013-07-26 16:22 梦想天空(山边小溪) 阅读(5414) | 评论 (2) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第五期(总第十七期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2013-07-25 14:45 梦想天空(山边小溪) 阅读(26262) | 评论 (21) 编辑
摘要: 这个使用 CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站。你可以看到两种类型的书设计:精装书和平装书。这两个效果都可以很容易地使用 CSS 修改。赶紧体验一下吧。阅读全文
posted @ 2013-07-23 13:53 梦想天空(山边小溪) 阅读(2238) | 评论 (0) 编辑
摘要: Minimit Anima 是一个实现 CSS3 Transforms 和 Transitions 动画的 jQuery 插件。基于硬件加速的 CSS3 动画执行更快,而且它有一个类似于 jQuery 动画的 API。插件中包含的 jquery.transform.js 让你可以在不支持的 Transforms 的浏览器中实现缩放、旋转和倾斜效果。阅读全文
posted @ 2013-07-18 18:18 梦想天空(山边小溪) 阅读(1949) | 评论 (2) 编辑
摘要: Webydo 是一款专业的在线建站应用,使平面设计师可以创建和管理 HTML 网站,而无需编写代码。设计人员可以设计任何类型网站,只需要点击按钮,就能够发布先进的 HTML 网站。阅读全文
posted @ 2013-07-18 09:47 梦想天空(山边小溪) 阅读(4045) | 评论 (1) 编辑
摘要: S Gallery 是一款响应式的 jQuery 相册插件。使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用。这款插件它有一个特色功能:退出幻灯片模式回到网格视图模式,最后一张活跃的图片会以动画形式回到网格视图中的初始位置,因此用户知道他们浏览到画廊中的哪张图片上。阅读全文
posted @ 2013-07-17 16:29 梦想天空(山边小溪) 阅读(5246) | 评论 (10) 编辑
摘要: CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现球的效果。有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题;另外一种是使用 CSS3 渐变和阴影特性来实现。阅读全文
posted @ 2013-07-16 13:52 梦想天空(山边小溪) 阅读(26076) | 评论 (53) 编辑
摘要: CSS3 不仅仅用作界面效果补充,还可以用来替换传统的一些界面实现,而且效果更酷。Effeckt.css 收集了众多精妙的 CSS3 Transitions & Animations 效果应用,例如:弹窗、按钮、导航、列表、页面切换等等。阅读全文
posted @ 2013-07-12 13:46 梦想天空(山边小溪) 阅读(3086) | 评论 (4) 编辑
摘要: Pure 是一组轻量的,响应式的 CSS 模块,您可以使用在任何的 Web 项目中。充分考虑了移动设备中的使用,保持文件体积尽量小,每行 CSS 都进行了仔细的考虑。Pure 基于 Normalize.css 构建,并提供布局以及 原生 HTML 元素的风格,加上最常见的 UI 组件。相信这些都是你需要的。阅读全文
posted @ 2013-07-07 13:45 梦想天空(山边小溪) 阅读(4317) | 评论 (2) 编辑
摘要: Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示。这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动画)。阅读全文
posted @ 2013-07-02 10:11 梦想天空(山边小溪) 阅读(7925) | 评论 (4) 编辑
摘要: Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现。Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页面,包括图表、表格、地图、消息中心、监控面板等后台管理项目所需的各种组件。阅读全文
posted @ 2013-07-01 09:29 梦想天空(山边小溪) 阅读(297709) | 评论 (100) 编辑
摘要: Fries 是一个移动开发框架,让开发者仅使用 HTML,CSS 和 Javascript 创建出 Android 应用程序界面。Fries 的灵感来自于 Ratchet(开发 iPhone 应用原型的优秀框架),作者把根据 Ratchet 的思路把一些很酷的东西引入到 Android 开发中。令人惊讶的是,Fries 能够很好的兼容 PhoneGap。Fries 旨在使 Android 应用程序开发更快速,更容易。阅读全文
posted @ 2013-06-08 09:43 梦想天空(山边小溪) 阅读(4182) | 评论 (0) 编辑
摘要: 转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升;IE10 随着 Windows 8 在去年10月底正式发布,在 JavaScript 性能和对 HTML5 和 CSS3 的支持方面让人眼前一亮。这篇文章给大家带来《五大主流浏览器 HTML5 和 CSS3 兼容性大比拼》,让我们一起看看2013年的浏览器现状。阅读全文
posted @ 2013-06-05 15:41 梦想天空(山边小溪) 阅读(48342) | 评论 (32) 编辑
摘要: Ratchet 让移动开发人员仅使用简单 HTML,CSS 和 Javascript 组件就能够快速的制作出 iPhone 应用程序的原型。Ratchet 提供了众多效果类似原生应用的界面组件,另外 Push.js 可以帮助开发人员把页面链接起来并在 iPhone 上预览。阅读全文
posted @ 2013-06-03 10:09 梦想天空(山边小溪) 阅读(6962) | 评论 (2) 编辑
摘要: Sassaparilla 是一组创建响应式网站的规则和风格,Sassaparilla 使用 Sass 和 Compass 建立灵活的可重用的样式表。Sassaparilla 可以帮助简单、快速的创建出响应式网站。阅读全文
posted @ 2013-05-30 14:18 梦想天空(山边小溪) 阅读(2537) | 评论 (0) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第四期(总第十六期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心推荐的文章能够帮助到您。阅读全文
posted @ 2013-05-22 14:20 梦想天空(山边小溪) 阅读(12817) | 评论 (20) 编辑
摘要: SublimeLinter 是前端编码利器——Sublime Text 的一款插件,用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。阅读全文
posted @ 2013-05-02 14:55 梦想天空(山边小溪) 阅读(48722) | 评论 (17) 编辑
摘要: 简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站?是的,LayoutIt 是一个 Twitter Bootstrap 界面生成器,能够帮助你快速制作出网站和界面模型,同时能够下载生成的网站代码。阅读全文
posted @ 2013-05-02 09:13 梦想天空(山边小溪) 阅读(34186) | 评论 (29) 编辑
摘要: CSS3 提高了很多新的样式选项,让我们能够制作出漂亮的表单元素。Fancy Input 这款 jQuery 插件不只是关注外观,同时在交互方面通过 CSS3 特性让文本输入域变得更有趣,更有吸引力。阅读全文
posted @ 2013-04-27 10:44 梦想天空(山边小溪) 阅读(10377) | 评论 (5) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第三期(总第十五期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心推荐的文章能够帮助到您。阅读全文
posted @ 2013-04-23 09:36 梦想天空(山边小溪) 阅读(11412) | 评论 (28) 编辑
摘要: 设计和开发者社区发展飞快,以致于我们的步伐很难跟上发生在我们身边的这一切。这就是为什么我喜欢聚集最新发布的优秀资源和工具,以使我们的工作和生活更轻松。这篇文章也是这样的,从文本编辑器到帮助你构建网格系统的插件,我敢肯定这些你会发现这些工具非常有用。阅读全文
posted @ 2013-04-19 09:01 梦想天空(山边小溪) 阅读(7195) | 评论 (3) 编辑
摘要: Metro UI 是一种界面展示技术,是 Windows 8 的主要界面显示风格。Metro 界面和 iOS、Android 界面最大的区别在于:后两种都是以应用为主要呈现对象,而 Metro 界面强调的是信息本身,而不是冗余的界面元素。同时在视觉效果方面,这有助于形成一种身临其境的感觉。如果你的下一个设计的网站或Web 应用程序想使用新的Windows 8 Metro 风格,那么下面列表中收集的10套流行的 Metro UI 风格的 Bootstrap 主题和模板一定不能错过。Enjoy !阅读全文
posted @ 2013-04-11 09:35 梦想天空(山边小溪) 阅读(222448) | 评论 (75) 编辑
摘要: Bootstrap 和 Foundation 是目前使用最广发的前端开发框架,不过有的时候我们需要的是一个更轻量的方案,IVORY 也许就是你需要的。IVORY 基于12列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。阅读全文
posted @ 2013-04-09 16:23 梦想天空(山边小溪) 阅读(5154) | 评论 (0) 编辑
摘要: 格式混乱的 CSS 代码可读性和可维护性都很差,这时候就需要进行代码美化。前端编码工具都有代码美化插件,在编写的时候就可以美化,而对于已有的代码如果想快速美化则还可以借助这款在线工具——CSS Beautify。阅读全文
posted @ 2013-04-07 12:44 梦想天空(山边小溪) 阅读(7273) | 评论 (4) 编辑
摘要: CSSmatic 是一个非营利性的 CSS 工具,目前包含4个很有用的工具,分别是:支持各种颜色和透明度的渐变工具,使用渐变工具,您可以创建渐变平滑的色彩变化效果和微妙的透明胶片;边框圆角工具可以帮助你方便的实现需要的圆角效果;噪声纹理可以帮助你创造奇妙的背景图案,能够实时预览结果;盒阴影工具可以控制模糊半径的变化,颜色变化,阴影大小,可以实现你想要的任何效果。阅读全文
posted @ 2013-04-02 14:02 梦想天空(山边小溪) 阅读(9009) | 评论 (4) 编辑
摘要: -prefix-free 是一个 JavaScript 工具库,用于帮助你从 CSS 前缀的地狱中解脱出来。你编写的 CSS 代码无需填写浏览器前缀,在需要的时候,-prefix-free 会帮助你自动添加当前浏览器需要的前缀。阅读全文
posted @ 2013-04-01 11:09 梦想天空(山边小溪) 阅读(10442) | 评论 (4) 编辑
摘要: 随着移动互联网的蓬勃发展,响应式布局的热度正在持续上升。但是对于 Email 来说,其标准几乎从来没有改变过,通常情况下,我们还是更喜欢固定宽度的布局。 Antwort 是一个免费的 Newsletter(电子报)模板, 仍然使用了表格,但提供了一个响应式的多列布局。 而且,这个模板在所有主要的电子邮件客户端(包括OutLook)都能使用。阅读全文
posted @ 2013-03-31 12:48 梦想天空(山边小溪) 阅读(5588) | 评论 (0) 编辑
摘要: 2013年第一期(总第十三期)《Web 前端开发人员和设计师必读文章》和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心推荐的文章能够帮助到您。阅读全文
posted @ 2013-03-25 14:45 梦想天空(山边小溪) 阅读(14500) | 评论 (21) 编辑
摘要: 不管你是多么优秀的程序员,你都不可能记住一切。在你编写程序的过程中碰到问题需要查阅手册的时候,若有现成的在线手册可参考则可以为你节省很多时间。为了方便各位朋友,我向大家推荐一个非常棒的在线手册索引网站——overapi.com,这个网站收集了众多对开发人员非常有用的手册,记得分享和推荐一下哦。阅读全文
posted @ 2013-03-21 17:01 梦想天空(山边小溪) 阅读(17806) | 评论 (34) 编辑
摘要: 提高网站的速度对网站的成功有巨大的影响,因为网站的加载速度直接影响到用户体验和搜索引擎排名。Browser Diet 是一个非常好的指南,列出了前端性能优化的各种技巧和工具。这是一个由 HTML,CSS,JS,服务器,图像和网站相关领域的众多专家组成的团队编写的,相比网络上的其它内容,这个指南图文并茂,生动有趣。此外,该指南不仅列出性能优化的步骤,同时还详细的介绍了如何实现阅读全文
posted @ 2013-03-15 10:55 梦想天空(山边小溪) 阅读(3904) | 评论 (2) 编辑
摘要: 浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异。因此,浏览器兼容成为前端开发人员的必备技能。如果有一份浏览器 Hack 手册,那查询起来就方便多了。这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊!阅读全文
posted @ 2013-03-11 09:58 梦想天空(山边小溪) 阅读(28888) | 评论 (64) 编辑
摘要: 《CSS3 经典教程系列》的前一篇文章向大家详细介绍了线性渐变(linear-gradient)的用法,今天这篇文章介绍的盒阴影(box-shadow)也是目前用得最多的 CSS3 特性之一。在以前,盒阴影效果和圆角效果一样都是做成图片,直接编写 CSS 代码就可以实现。阅读全文
posted @ 2013-03-08 14:37 梦想天空(山边小溪) 阅读(47891) | 评论 (7) 编辑
摘要: Conditioniz 是一个快速、轻量级(3KB)的 JavaScript 工具,用于浏览器和分辨率,并根据条件加载 JavaScript 和 CSS 文件。浏览器嗅探通常被认为是不可靠的,Conditionizr 的建立就是为了克服这个问题。Conditionizr 的核心功能是检测和实现IE浏览器条件加载脚本和样式。考虑到这一点,使用类似 Google Analytics 检测浏览器的方法。阅读全文
posted @ 2013-03-06 15:27 梦想天空(山边小溪) 阅读(2053) | 评论 (0) 编辑
摘要: 如今,一个网站只在桌面屏幕上好看是远远不够的,同时也要在平板电脑和智能手机中能够良好呈现。响应式的网站是指它能够适应客户端的屏幕尺寸,自动响应客户端尺寸变化。在这篇文章中,我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式(Responsive)。阅读全文
posted @ 2013-03-06 09:32 梦想天空(山边小溪) 阅读(53802) | 评论 (27) 编辑
摘要: Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供多媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。阅读全文
posted @ 2013-03-04 15:25 梦想天空(山边小溪) 阅读(43590) | 评论 (10) 编辑
摘要: 这篇文章是前端优秀讲座和讨论列表系列连载第七篇,介绍前端性能优化技巧。前端领域发展迅速,只有时刻掌握前端发展趋势和技术动态,学习前沿的开发思想和理念才能让自己跟上时代的步伐,保持自己的技术优势。阅读全文
posted @ 2013-03-04 09:52 梦想天空(山边小溪) 阅读(4326) | 评论 (2) 编辑
摘要: Textillate.js 是一款实现极酷 CSS3 文本动画的简单插件。它整合了两个流行的工具库(animate.css 和 lettering.js)来提供易于使用的插件,能够把 CSS3 动画应用到文本内容上。只要引入 textillate.js 和它依赖的文件就能够给你的内容加上独一无二的特效。阅读全文
posted @ 2013-03-01 10:55 梦想天空(山边小溪) 阅读(7002) | 评论 (4) 编辑
摘要: 2013年第一期(总第十三期)《Web 前端开发人员和设计师必读文章》和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心推荐的文章能够帮助到您。阅读全文
posted @ 2013-02-25 10:02 梦想天空(山边小溪) 阅读(13813) | 评论 (33) 编辑
摘要: 上篇文章介绍了 linear-gradient(线性渐变),这篇文章向大家介绍 radial-gradient(径向渐变)以及重复渐变(线性重复、径向重复)。CSS3的径向渐变和其线性渐变是很相似的。除了您已经在线性渐变中看到的起始位置,方向,和颜色,径向梯度允许你指定渐变的形状(圆形或椭圆形)和大小(最近端,最近角,最远端,最远角,包含或覆盖。阅读全文
posted @ 2013-02-24 22:33 梦想天空(山边小溪) 阅读(31981) | 评论 (2) 编辑
摘要: 大家都知道我们习惯性称作的 CSS3 对于 CSS2.1 有很多的修改和补充。抛开浏览器的兼容性问题,这篇文章把所有的变化整理到一篇文章中便于学习和查阅。尽管我尽量确保收录了所有的新特性,但是不能保证没有遗漏,欢迎大家留言。阅读全文
posted @ 2013-02-21 21:13 梦想天空(山边小溪) 阅读(9669) | 评论 (6) 编辑
摘要: Cool Kitten 是一个具备视差滚动特效的响应式框架,由 Jalxob 编写,是 Github 上的开源项目。实质上是一组设计师和开发人员使用的 HTML/CSS 以及 JavaScript 文件的集合。Cool Kitten 是响应式的,这使得网站能够在电脑、平板和移动设备中都能良好的呈现;同时还支持视差滚动(Parallax Scrolling)特效,给网站带来绚丽的视觉效果。阅读全文
posted @ 2013-02-21 15:51 梦想天空(山边小溪) 阅读(2930) | 评论 (0) 编辑
摘要: Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5,CSS & JavaScript 工具包。使用 Groundwork,您可以快速构建 Web 应用程序,能在各种设备上工作。Groundwork 拥有一个令人难以置信的灵活,可嵌套,流体的网格系统,是 Github 上的开源项目。阅读全文
posted @ 2013-02-20 13:55 梦想天空(山边小溪) 阅读(3710) | 评论 (0) 编辑
摘要: CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果,使网站更好看,更能够吸引用户访问。这篇文章中,我收集了一组新的 CSS3 技巧,能够帮助你美化您的网站,并给它一个更专业的外观和感觉。阅读全文
posted @ 2013-02-19 14:35 梦想天空(山边小溪) 阅读(9021) | 评论 (7) 编辑
摘要: CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果,使网站更好看,更能够吸引用户访问。这篇文章中,我收集了一组实用的 CSS3 技巧,能够帮助你美化您的网站,并给它一个更专业的外观和感觉。阅读全文
posted @ 2013-02-19 12:42 梦想天空(山边小溪) 阅读(2533) | 评论 (3) 编辑
摘要: 《CSS3 实用技巧》之漂亮的页面顶部阴影。CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果,使网站更好看,更能够吸引用户访问。阅读全文
posted @ 2013-02-19 12:34 梦想天空(山边小溪) 阅读(5335) | 评论 (0) 编辑
摘要: CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果,使网站更好看,更能够吸引用户访问。这篇文章中,我收集了一组实用的 CSS3 技巧,能够帮助你美化您的网站,并给它一个更专业的外观和感觉。阅读全文
posted @ 2013-02-19 11:53 梦想天空(山边小溪) 阅读(20191) | 评论 (0) 编辑
摘要: CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果,使网站更好看,更能够吸引用户访问。这篇文章中,我收集了一组实用的 CSS3 技巧,能够帮助你美化您的网站,并给它一个更专业的外观和感觉。阅读全文
posted @ 2013-02-19 11:32 梦想天空(山边小溪) 阅读(3000) | 评论 (1) 编辑
摘要: 《CSS3 实用技巧》之实现黑白图像效果。CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果,使网站更好看,更能够吸引用户访问。阅读全文
posted @ 2013-02-19 11:25 梦想天空(山边小溪) 阅读(6196) | 评论 (6) 编辑
摘要: CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。阅读全文
posted @ 2013-02-17 10:34 梦想天空(山边小溪) 阅读(216364) | 评论 (20) 编辑
摘要: text-shadow 曾经在 CSS2 中就出现过,但在 CSS 2.1版本中又被抛弃了,现在 CSS3 版本又重新捡回来了。这说明 text-shadow 这个属性非常值得我们做前端的人员重视,而且 CSS3 这么多属性中,我个人觉得 text-shadow 运用得是最多的一个属性,作为我们前端人员我觉得有必要学习并掌握这个 text-shadow 属性。阅读全文
posted @ 2013-01-31 19:24 梦想天空(山边小溪) 阅读(9123) | 评论 (0) 编辑
摘要: 前一篇文章详细介绍了CSS3 RGBA 的用法,今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法。以前制作圆角效果,我们都需要使用多张圆角图片做为背景分别应用到每个角上,我应用最多的就是在需要圆角的元素标签中加四个空标签,然后在每个空标签中应用一个圆角的背景位置,然后在对这几个应用了圆角的标签进行定位到相应的位置,非常繁琐。阅读全文
posted @ 2013-01-30 20:33 梦想天空(山边小溪) 阅读(43300) | 评论 (9) 编辑
摘要: 颜色在 CSS 中有三种定义方式:使用颜色方法(RGB、RGBA、HSL、HSLA),十六进制颜色值和预定义的颜色名称。RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)的色彩空间。虽然它有的时候被描述为一个颜色空间,但是它其实仅仅是 RGB 模型附加了额外的信息从而形成了我们今天需要讨论的 RGBA。如果需要更详细的解说,大家就跟着我一起往下看吧。阅读全文
posted @ 2013-01-29 12:43 梦想天空(山边小溪) 阅读(9857) | 评论 (2) 编辑
摘要: 这篇文章收集了Google 前端工程师 Addy Osmani 分享在 Speaker Deck 的15个精彩幻灯片,每个都是精华中的精华,真正的干货!相信你认真阅读之后一定会有收获!Addy Osmani 创建了 TodoMVC、jQuery UI Bootstrap、jQuery Plugin Patterns 和 Backbone Paginator,出版了《Learning JavaScript Design Patterns》和《Developing Backbone.js Applications》两本书籍,还是著名 jQuery、Modernizr 以及 Backbone.js 框架的贡献者。阅读全文
posted @ 2013-01-29 09:51 梦想天空(山边小溪) 阅读(14690) | 评论 (32) 编辑
摘要: 这篇文章是前端优秀讲座和讨论列表系列连载第二篇,包含未来的前端开发趋势和 CSS 开发两部分内容。前端领域发展迅速,只有时刻掌握前端发展趋势和技术动态,学习前沿的开发思想和理念才能让自己跟上时代的步伐,保持自己的技术优势。阅读全文
posted @ 2013-01-18 15:45 梦想天空(山边小溪) 阅读(5028) | 评论 (8) 编辑
摘要: 这是《CSS3 探索发现》系列文章的第二篇,分享一组闪亮的半透明 CSS3 按钮效果。CSS3 为网页设计引入了众多强大的新功能,让设计和开发人员能够轻松的创作出精美的界面效果。推荐阅读:《CSS3 探索发现系列一:一组梦幻般的 CSS3 动画按钮效果》。这些闪亮的按钮使用了两个 DIV 实现,一个是按钮主要部分,一个是用来显示光泽。下面是在线演示,很漂亮吧?把鼠标放在按钮上试试,有惊喜哦!(温馨提示:在 Chrome,Firefox 和 Safari 浏览器中效果最佳。阅读全文
posted @ 2013-01-17 09:46 梦想天空(山边小溪) 阅读(7473) | 评论 (10) 编辑
摘要: Profound Grid 是一个实现固定和流动布局的网格系统。内置 SCSS,带给你灵活性和全面的控制。你可以让让个流动或者固定,还可以根据需要为每个媒体添加布局。更改列和间隔宽度,并根据需要删除或添加列。这个网格系统让您的的标记语义化,没有任何“grid_x”类。除非你想使用它们,在这种情况下,它们也可以包括在内。深刻的网格使用负外边距计算列。与其他网格系统不同,流体布局在每一个浏览器看起来几乎完全一样。阅读全文
posted @ 2013-01-16 18:46 梦想天空(山边小溪) 阅读(4368) | 评论 (0) 编辑
摘要: 过去的这一年,CSS3 被更多的人关注和学习,应用得越来越多。这篇文章挑选出的2012年最值得关注的 CSS3 教程能够帮助你更好的掌握 CSS3 的实际使用。CSS3 提供了众多强大的视觉效果特性,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写 JavaScript 才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。阅读全文
posted @ 2013-01-13 15:34 梦想天空(山边小溪) 阅读(6049) | 评论 (31) 编辑
摘要: 2012年,Web 开发领域继续在快速的发展,HTML5 仍然在展示其跨平台的优越性,CSS3 被人们更多的应用到实际项目中,响应式设计(Responsive Design)技巧也被人越来越多的人熟知和使用。技术的快速发展让 Web 开发人员学习起来不知所措,幸运的是,很多优秀的开发者和设计人员在努力寻找各种有特色的解决方案。 因此,我们有了很多优秀的小工具和库,每一个都是用来解决特定的问题或维护一组特定的项目。这篇文章收集了2012年度新发布的最具有代表性 Web 前端开发工具和框架,这是一个非常值得收藏的工具列表。阅读全文
posted @ 2012-12-28 10:06 梦想天空(山边小溪) 阅读(14632) | 评论 (24) 编辑
摘要: 梦想天空博客即日起推出《CSS3 探索发现》系列文章,分享和展示各种让人惊奇的 CSS3 示例。梦天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具。阅读全文
posted @ 2012-12-20 15:47 梦想天空(山边小溪) 阅读(10998) | 评论 (14) 编辑
摘要: 2012年,Web 开发领域继续在快速的发展,HTML5 仍然在展示其跨平台的优越性,CSS3 被人们更多的应用到实际项目中,响应式设计(Responsive Design)技巧也被人越来越多的人熟知和使用。这篇文章收集了2012年度新发布的最具有代表性 Web 前端开发工具和框架,这是一个非常值得收藏的工具列表,从功能全面的 IDE 到美观、充满异国情调的小框架,小工具等等。他们能够帮助你降低 Web 开发过程中的复杂度,节省时间和精力。阅读全文
posted @ 2012-12-18 15:15 梦想天空(山边小溪) 阅读(31686) | 评论 (83) 编辑
摘要: 2012年涌现出众多独特的,令人印象深刻的 CSS 网站作品,要从中挑选出年度应用 CSS 的最佳网站列表一个严峻的挑战,因为 CSS 涵盖了媒体查询(CSS3 Media Queries)、CSS 动画和3D转换等众多特性。我根据过去 CSS 典型的应用场景挑选了其中的优秀作品组成一个列表,如果你有收藏更好的作品,欢迎留言向大家分享。阅读全文
posted @ 2012-12-14 13:26 梦想天空(山边小溪) 阅读(13537) | 评论 (29) 编辑
摘要: 2012年12月12日,【《Web 前端开发人员和设计师必读文章》系列十二】和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心推荐的文章能够帮助到您。阅读全文
posted @ 2012-12-12 14:30 梦想天空(山边小溪) 阅读(63974) | 评论 (46) 编辑
摘要: 在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能。你可以为媒介类型添加某些条件,检测设备并采用不同的样式表。例如,你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中,这样,在不改变文档内容的情况下,不同的设备可以使用不同的界面外观。阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 Media Queries 的优秀网站案例。阅读全文
posted @ 2012-12-04 14:13 梦想天空(山边小溪) 阅读(60093) | 评论 (26) 编辑
摘要: 之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 实现精美加载进度条动画效果的方案。加载动画和进度条在网站和 Web 应用中的使用非常流行,特别是在使用 Ajax 技术加载内容的应用场景中,使用时尚的加载动画和进度条告诉用户内容正在加载中是一种非常友好的方式。阅读全文
posted @ 2012-12-03 10:00 梦想天空(山边小溪) 阅读(35672) | 评论 (35) 编辑
摘要: 这篇文章收集了7个非常绚丽的 CSS3 效果应用演示,这些示例演示了 CSS3 各种新特性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择,以前需要使用 JavaScript 才能实现的各种很酷的界面效果和动画,如今使用纯 CSS 代码就可以很容易实现。相信下面这些 CSS3 演示会让你感到吃惊!阅读全文
posted @ 2012-11-22 13:56 梦想天空(山边小溪) 阅读(14271) | 评论 (45) 编辑
摘要: CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写复杂的 JavaScript 代码才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。今天这篇文章就向大家分享14个让人惊叹的 CSS3 特性应用演示,让大家感受一下 CSS3 的魅力。阅读全文
posted @ 2012-11-08 09:22 梦想天空(山边小溪) 阅读(10062) | 评论 (42) 编辑
摘要: 这篇文章继续给大家带来最近两个月发布在《梦想天空》的优秀文章,特别推荐给 Web 开发人员和设计师阅读。梦天空博客关注 前端开发 技术,展示前沿 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐优秀的 网页设计 案例,共享精美的 设计素材 和优秀的 Web 开发工具。希望这些文章能帮助到您。阅读全文
posted @ 2012-11-06 09:22 梦想天空(山边小溪) 阅读(9427) | 评论 (29) 编辑
摘要: 作为 CSS 的下一个版本,CSS3 给 Web 开发带来了革命性的影响。例如,以前很多需要图片呈现的界面效果,现在使用 CSS3 结合 HTML 就可以实现,CSS3 甚至还可以实现需要 JavaScript 才能实现的复杂动画效果。下面向大家展示 CSS3 圆角、渐变、旋转和变换等特性在网页设计中的惊艳应用,一起欣赏这些精美的网页作品。阅读全文
posted @ 2012-10-17 09:19 梦想天空(山边小溪) 阅读(8207) | 评论 (15) 编辑
摘要: 今天这篇文章向大家推荐十款非常有用的在线 CSS3 代码生成工具,这些工具能够帮助你方便的生成 CSS3 特效。CSS3 是对 CSS 规范的改善和增强,增加了圆角、旋转、阴影、渐变和动画等众多强大的特性,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写 JavaScript 才能实现的效果,如今只需几句简单的 CSS3 代码就能实现。阅读全文
posted @ 2012-09-27 14:24 梦想天空(山边小溪) 阅读(33460) | 评论 (43) 编辑
摘要: Bootstrap 是基于 HTML,CSS,JavaScript 的简洁灵活的流行前端框架及交互组件集,由微博的先驱 Twitter 在2011年8月开源的整套前端解决解决方案。Bootstrap 有非常完备和详尽的开发文档,Web 开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。为了能够充分利用 Bootstrap 的强大功能,下面向打击推荐12款各种各样工具和资源来配合 Bootstrap 使用。阅读全文
posted @ 2012-09-11 14:11 梦想天空(山边小溪) 阅读(112842) | 评论 (61) 编辑
摘要: 边框效果常用于给图片添加照片效果或增强内容片断的整体性,在一些团购网站和使用瀑布流布局的网站也经常会运用边框效果。简单的边框效果使用CSS 可以轻松实现,但是用到弯曲和阴影等复杂效果的时候,我们以前只能使用图片来实现。如今借助 CSS3 的圆角、阴影和旋转特性,我们完全可以使用纯CSS代码实现精美的边框效果。下面给大家分享的这些示例就是精心编写的,相信您一定会有收获。阅读全文
posted @ 2012-09-10 15:00 梦想天空(山边小溪) 阅读(17398) | 评论 (8) 编辑
摘要: 今天这篇文章向大家分享几份对学习 CSS3 非常有帮助的手册,大家记得收藏起来。CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写 JavaScript 才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。阅读全文
posted @ 2012-09-07 09:05 梦想天空(山边小溪) 阅读(5570) | 评论 (10) 编辑
摘要: 作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,帮助 Web 开发人员快速实现可用性和用户体验更佳的功能,让访问者对网站留下非常好的印象。而 CSS3 作为 CSS 的下一个版本,增加了圆角、旋转、阴影等强大的特性,甚至还可以实现需要 JavaScript 才能实现的复杂动画效果。阅读全文
posted @ 2012-09-03 14:51 梦想天空(山边小溪) 阅读(13058) | 评论 (40) 编辑
摘要: 边框效果常用来给图片添加照片效果或用于增强页面内容片断的整体性,在一些团购网站和使用瀑布流布局的网站也经常会使用边框效果。在以前,简单的边框效果使用 CSS 可以轻松实现,但是用到阴影、弯曲和旋转等复杂效果的时候,我们只能使用图片来实现。如今借助 CSS3 的圆角、阴影和旋转特性,我们完全可以使用纯CSS代码实现精美的边框效果。阅读全文
posted @ 2012-08-29 13:33 梦想天空(山边小溪) 阅读(60574) | 评论 (87) 编辑
摘要: 这篇文章给大家带来最近两个月发布在《梦想天空》的优秀文章,特别推荐给 Web 开发人员和设计师阅读。梦天空博客关注 前端开发 技术,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐优秀的 网页设计 案例,共享精美的 设计素材 和优秀的 Web 开发工具。希望这些文章能帮助到您。阅读全文
posted @ 2012-08-15 09:34 梦想天空(山边小溪) 阅读(15487) | 评论 (47) 编辑
摘要: 互联网经过这么多年的发展,已经出现了众多的 Web 开发技术,像 .Net/Java/PHP/Python/Ruby 等等。对于 Web 开发人员来说,不管是初学者还是有一定经验的开发人员都需要时刻学习新的开发技术。如今,网上有各种开发技术的相关网站,有大量开发资料可以参考。下面是我收集的15个非常优秀的学习 Web 开发技术的国外网站,如果大家有收藏更好的网站,欢迎推荐!阅读全文
posted @ 2012-08-10 09:17 梦想天空(山边小溪) 阅读(55633) | 评论 (54) 编辑
摘要: 过去的几年,网页设计和制作人员就已开始关注和使用 HTML5 了,如今 HTML5 得到了更加广泛的应用,国外已有很多基于 HTML5 制作的网站。所以,今天这篇文章给大家带来的是35款基于 HTML5 和 CSS3 的非常精致的网站模板,大家可以借助这些优秀网站模板制作出自己的 HTML5 网站。这些网站模板大部分都是免费的,虽然有些要付费,但是都提供了在线演示,所以……你懂的:)阅读全文
posted @ 2012-08-03 08:35 梦想天空(山边小溪) 阅读(207524) | 评论 (153) 编辑
摘要: 作为 CSS 的下一个版本,CSS3 给 Web 开发带来了革命性的影响。例如,以前很多需要图片呈现的界面效果,现在使用 CSS3 结合 HTML 就可以实现,CSS3 甚至还可以实现需要 JavaScript 才能实现的复杂动画效果。下面向大家展示的23幅精美 LOGO 就是使用纯 CSS3 制作的,应用到了 CSS3 圆角、渐变、旋转和变换等特性,惊叹吧!阅读全文
posted @ 2012-07-25 08:54 梦想天空(山边小溪) 阅读(13450) | 评论 (11) 编辑
摘要: 本文向大家推荐来自 isobar(全球顶级数字公司)的前端开发编码标准和最佳实践。这份文档涵盖 HTML、CSS 和 JavaScript 编码标准,可访问性,性能优化,浏览器兼容和测试和搜索引擎优化支持等众多内容,下面是全文目录:阅读全文
posted @ 2012-07-24 13:06 梦想天空(山边小溪) 阅读(3020) | 评论 (1) 编辑
摘要: 这篇文章向大家分享9个很酷的挑选自 DemoStudio 的 CSS3 和 JavaScript 实现的精美效果。DemoStudio 是 Mozilla Developer Network(MDN)用于展示一些非常优秀的 CSS3 和 JavaScript 效果的网站,Google 也有一个 Chrome Experiment,用于展示最新的 Web 技术应用。相信下面展示的这些效果会给你留下非常深刻的印象,让你体会到Web的美妙!阅读全文
posted @ 2012-07-06 09:37 梦想天空(山边小溪) 阅读(11731) | 评论 (13) 编辑
摘要: 这篇文章主要收录了最近两个个月发布在梦想天空的优秀文章,特别推荐给Web开发人员和设计师阅读。梦天空博客关注 前端开发 技术,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐优秀的网页设计案例,共享精美的设计素材和优秀的 Web 开发工具。希望这些文章能帮助到您。阅读全文
posted @ 2012-06-19 09:02 梦想天空(山边小溪) 阅读(10918) | 评论 (28) 编辑
摘要: CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写 JavaScript 才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。今天这篇文章就向大家分享2012年最新最酷的25个 CSS3 效果,让大家感受一下 CSS3 的强大。阅读全文
posted @ 2012-04-24 09:04 梦想天空(山边小溪) 阅读(8927) | 评论 (13) 编辑
摘要: 这篇文章主要收录了最近三个月发布在梦想天空的优秀文章,特别推荐给Web开发人员和设计师阅读。梦天空博客关注前端开发技术,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐优秀的网页设计案例,共享精美的设计素材和优秀的 Web 开发工具。希望这些文章能帮助到您。阅读全文
posted @ 2012-04-09 09:04 梦想天空(山边小溪) 阅读(6130) | 评论 (7) 编辑
摘要: 这篇文章收集了20个非常绚丽的 CSS3 效果应用演示,这些示例演示了 CSS3 各种新特性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择,以前需要使用 JavaScript 才能实现的各种很酷的界面效果和动画,如今使用纯 CSS 代码就可以很容易实现。相信下面这些 CSS3 演示会让你感到吃惊!阅读全文
posted @ 2012-03-05 09:12 梦想天空(山边小溪) 阅读(18445) | 评论 (6) 编辑
摘要: 今天这篇文章向大家推荐14款非常有用的 CSS 网格系统生成工具,它们能够帮助你构建适合你网站项目的 CSS 网格系统。一个系统化、结构合理的布局使得能够更快更轻松的组织网站的内容。网格系统为网页设计师们提供了一种快速构造网页内容布局的方法,帮助设计师们节省了大量的时间和精力。阅读全文
posted @ 2012-01-12 09:07 梦想天空(山边小溪) 阅读(8700) | 评论 (2) 编辑
摘要: 这篇文章主要收录了十二月份发布在梦想天空的优秀文章,特别推荐给Web开发人员和设计师阅读。梦天空博客关注前端开发技术,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐优秀的网页设计案例,共享精美的设计素材和优秀的 Web 开发工具。希望这些文章能帮助到您。阅读全文
posted @ 2012-01-05 09:00 梦想天空(山边小溪) 阅读(17438) | 评论 (14) 编辑
摘要: 在制作网站的时候,你必须要确保有一个系统化、结构合理的布局使得能够更快更轻松的组织网站的内容。网格系统为网页设计师们提供了一种快速构造网页内容布局的方法。借助这个工具,设计师可以根据预制结构进行布局,节省了大量的时间和精力。今天这篇文章向大家推荐20个优秀的 CSS 网格系统,其中还有融合了最新的响应式设计理念的响应式 CSS 网格系统。阅读全文
posted @ 2012-01-04 08:56 梦想天空(山边小溪) 阅读(11392) | 评论 (4) 编辑
摘要: 这篇文字收集了45个让人觉得不可思议的 CSS3 应用示例,它们验证了 CSS3 Transform 和 Transition 等属性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择,以前需要使用 JavaScript 才能实现的各种很酷的界面效果和动画,如今使用纯 CSS 代码就可以很容易实现。阅读全文
posted @ 2011-12-29 09:05 梦想天空(山边小溪) 阅读(5510) | 评论 (6) 编辑
摘要: HTML5 和 CSS3 都是当前 Web 开发领域的热点,网上有很多用来验证 HTML5 和 CSS3 强大特性的应用示例,这篇文章从中选择了13个很炫的例子分享给大家。HTML5 可以说是近十年来 Web 标准最巨大的飞跃,而 CSS3 同样给 WEB 开发带来了革命性的影响,以前很多需要 JavaScript 实现的复杂效果,现在使用很简单的 CSS3 属性就能实现。阅读全文
posted @ 2011-12-21 09:08 梦想天空(山边小溪) 阅读(9990) | 评论 (6) 编辑
摘要: CSS3 作为 CSS 的下一代版本,同样引入了很多很酷的属性,以前很多需要 JavaScript 才能实现的复杂效果,现在使用 CSS3 就能简单的实现。而 HTML5 作为下一代网页语言,加入中众多更具语义的标签,例如video、audio、section、article、header 和 footer 等。CSS3 和 HTML5 都是现在Web开发领域的技术热点,它们给 Web 开发带来了革命性的影响。阅读全文
posted @ 2011-12-14 09:21 梦想天空(山边小溪) 阅读(7658) | 评论 (4) 编辑
摘要: HTML5 作为下一代网页语言,加入中众多更具语义的标签,例如video、audio、section、article、header 和 nav 等。而 CSS3 作为 CSS 的下一代版本,同样引入了很多很酷的属性,以前很多需要 JavaScript 才能实现的复杂效果,现在使用 CSS3 就能简单的实现。CSS3 和 HTML5 都是现在Web开发领域的技术热点,它们给 Web 开发带来了革命性的影响。阅读全文
posted @ 2011-12-09 09:57 梦想天空(山边小溪) 阅读(9185) | 评论 (4) 编辑
摘要: 这篇文章收录了十一月份发布在梦想天空博客的优秀文章,特别推荐给Web开发人员和设计师阅读。梦天空博客关注前端开发技术,展示最新HTML5和CSS3技术应用,分享实用的jQuery插件,推荐优秀的网页设计案例,共享精美的设计素材和优秀的Web开发工具。希望这些文章能帮助到您。阅读全文
posted @ 2011-12-06 09:00 梦想天空(山边小溪) 阅读(7725) | 评论 (9) 编辑
摘要: 你曾经考虑过想要加快 HTML 和 CSS 编码速度吗?不管你是否想过,都来看看这篇文章吧,你会从中学到很多东西。我们要讨论的不是 CSS 网格框架,也不是 CSS Reset。在这篇文章中,我们关注的是不同寻常的编码方式——CSS 编译器和 HTML 缩写编码技术。借助这些优秀的工具和技术,能够大大的减少开发时间,加快开发进度。阅读全文
posted @ 2011-12-01 08:56 梦想天空(山边小溪) 阅读(18888) | 评论 (37) 编辑
摘要: 本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力。CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择。如今,用纯 CSS 就可以实现各种各样很酷的效果,甚至是动画。阅读全文
posted @ 2011-11-22 08:52 梦想天空(山边小溪) 阅读(222095) | 评论 (26) 编辑
摘要: 今天分享的作品集网站有些特别,因为他们都是使用 CSS 技术制作的。对于设计师来说,为了吸引注意力,作品集必须展示出你的能力,这有点像制作简历,要让人们看到你所擅长的,突出的部分,这是一次推销自己的机会。如果你正想设计个人作品集网页,下面这些案例会对你很有帮助。阅读全文
posted @ 2011-11-14 21:20 梦想天空(山边小溪) 阅读(5069) | 评论 (10) 编辑
摘要: 本文继续向Web开发人员和设计师推荐优秀文章。梦想天空博客关注前端开发技术,展示最新HTML5和CSS3技术应用,分享实用的jQuery插件,推荐优秀的网页设计案例,共享精美的设计素材和强大的Web开发工具。本文特别推荐给Web设计师和开发人员阅读,希望这些资源能帮助到您。阅读全文
posted @ 2011-11-11 10:11 梦想天空(山边小溪) 阅读(8910) | 评论 (18) 编辑
摘要: CSS3 给 Web 开发带来了革命性的影响,以前很多需要 JavaScript 才能实现的复杂效果,现在使用 CSS3 就能简单的实现。今天这篇文章和大家分享16个优秀的 CSS3 表单开发教程。阅读全文
posted @ 2011-09-26 08:24 梦想天空(山边小溪) 阅读(6889) | 评论 (14) 编辑
摘要: HTML5 可以说是近十年来 Web 标准最巨大的飞跃,它的使命是将 Web 带入一个成熟的应用平台,而CSS3同样给WEB开发带来了革命性的影响,以前很多需要 JavaScript 实现的复杂效果,现在使用简单的 CSS3 就能实现。今天,本文向大家展示19个基于 HTML5 和 CSS3 开发的优秀应用程序。阅读全文
posted @ 2011-09-21 00:09 梦想天空(山边小溪) 阅读(8890) | 评论 (10) 编辑
摘要: 梦想天空博客专注于分享 Web 开发技术、资源和教程,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐优秀的网页设计案例,共享精美的设计素材和强大的 Web 开发工具。分享快乐,快乐分享,希望这些资源能帮助到您。阅读全文
posted @ 2011-09-19 09:13 梦想天空(山边小溪) 阅读(6340) | 评论 (8) 编辑
摘要: CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写 JavaScript 才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。今天这篇文章就向大家推荐20个很酷的CSS3导航菜单制作教程,展示一下 CSS3 的魅力。阅读全文
posted @ 2011-09-15 09:07 梦想天空(山边小溪) 阅读(13441) | 评论 (5) 编辑
摘要: 梦想天空博客专注于分享 Web 开发技术、资源和教程,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐优秀的网页设计案例,共享精美的设计素材和强大的 Web 开发工具。分享快乐,快乐分享,希望这些资源能帮助到您。阅读全文
posted @ 2011-08-31 08:04 梦想天空(山边小溪) 阅读(6816) | 评论 (15) 编辑
摘要: 这篇文章向大家推荐8款非常有用的 CSS 工具。对于Web开发人员来说,好用的CSS工具就像魔灯,可以让他那些枯燥的工作变得有趣。这些CSS工具中,有的用于帮助你学习 CSS3 属性,有的用于帮助你更高效的编写 CSS 代码,每个工具都非常有用,希望能帮助到你,记得分享和推荐一下哦。阅读全文
posted @ 2011-08-19 08:51 梦想天空(山边小溪) 阅读(21128) | 评论 (22) 编辑
摘要: 不久前,Adobe发布了一个展示HTML5和CSS3特性的网站项目:The Expressive Web,该网站以形象生动的例子演示了加入到现代Web中最有创造性和表现力的功能,另外还提供了众多具有视觉冲击力的HTML5和CSS3学习资源,Adobe推出该网站的目的是让Web设计人员和开发人员能够快速的了解HTML5和CSS3新特性,提供丰富的资源和链接让他们能够更深入的认识这些特性,了解它们的用处以及学会如何使用。阅读全文
posted @ 2011-08-16 08:56 梦想天空(山边小溪) 阅读(3542) | 评论 (6) 编辑
摘要: 梦想天空博客专注于分享 Web 开发技术、资源和教程,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐优秀的网页设计案例,共享精美的设计素材和强大的 Web 开发工具。分享快乐,快乐分享,希望这些资源能帮助到您。阅读全文
posted @ 2011-07-13 08:06 梦想天空(山边小溪) 阅读(13946) | 评论 (28) 编辑
摘要: CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。今天这篇文章收集了24个很棒的 CSS3 文本效果示例及教程分享给大家。阅读全文
posted @ 2011-06-22 00:30 梦想天空(山边小溪) 阅读(5784) | 评论 (10) 编辑
摘要: 梦想天空博客专注于分享 Web 开发技术、资源和教程,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐优秀的网页设计案例,共享精美的设计素材和强大的 Web 开发工具。分享快乐,快乐分享,希望这些资源能帮助到您。阅读全文
posted @ 2011-06-20 00:11 梦想天空(山边小溪) 阅读(54894) | 评论 (45) 编辑
摘要: 在开发中借助一些非常好用的工具可以帮助你节省大量的时间和精力。本文收集了20个非常有用的Web开发工具和框架,分享给大家,希望对你有帮助。阅读全文
posted @ 2011-06-10 00:09 梦想天空(山边小溪) 阅读(7625) | 评论 (15) 编辑
摘要: 各大浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准。就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已经接近完成,如果进展顺利,HTML5 将在 2012 年正式成为国际标准。本文是一份IE,Chrome,Firefox, Safari,Opera五大主流大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种特性支持情况的详细清单。阅读全文
posted @ 2011-05-26 08:20 梦想天空(山边小溪) 阅读(29669) | 评论 (57) 编辑
摘要: 对于Web开发人员来说,找到有用的CSS工具,就像找到一个魔灯,可以让他那些艰难的任务变得有趣。CSS工具帮助开发人员创造更加时尚,更有创意的网站。在这篇文章中收集了20个有用和强大的CSS工具,记得收藏起来哦。阅读全文
posted @ 2011-05-19 00:07 梦想天空(山边小溪) 阅读(7630) | 评论 (6) 编辑
摘要: CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。尽管如此,有几个工具可以在你使用 CSS3 制作网站的时候起到很好的帮助作用。在这篇文章中,收集了10款非常有用的工具推荐给大家。阅读全文
posted @ 2011-05-15 23:56 梦想天空(山边小溪) 阅读(19995) | 评论 (9) 编辑
摘要: 在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍。今天,本文收集了12个很不错的CSS3按钮方案并有相关的使用教程。阅读全文
posted @ 2011-05-12 00:03 梦想天空(山边小溪) 阅读(33037) | 评论 (26) 编辑
摘要: CSS3 和 HTML5 是现在Web开发领域的技术热点,它们的确给 Web 开发带来了革命性的影响。今天,要与大家分享的是50个 CSS3 应用的最佳例子,从中你能体会到 CSS3 中许多让人欣喜的特性,尽情欣赏吧。阅读全文
posted @ 2011-04-26 07:51 梦想天空(山边小溪) 阅读(21985) | 评论 (8) 编辑
摘要: 对于Web开发人员来说,找到有用的CSS工具,就像找到一个魔灯,可以让他那些艰难的任务变得有趣。CSS工具帮助开发人员创造更加时尚的网站。在这篇文章中收集了40个有用和强大的CSS工具,记得收藏起来哦。阅读全文
posted @ 2011-04-20 23:10 梦想天空(山边小溪) 阅读(22457) | 评论 (26) 编辑
摘要: 图片画廊用于在网站上显示系列图片,它已成为网站重要的组成部分。实现图片画廊有很多种方法,今天要与大家分享的是27个使用纯 CSS 实现的图片画廊,它们轻量、加载速度快。阅读全文
posted @ 2011-04-18 00:09 梦想天空(山边小溪) 阅读(8124) | 评论 (11) 编辑
摘要: CSS3 给 Web 开发带来了革命性的影响,以前很多需要 JavaScript 才能实现的复杂效果,现在使用 CSS3 就能简单的实现。如果你想了解 CSS3 可以做些什么的话,可以参考本文列出的 CSS3 能实现的很炫的应用。这些很酷的例子中有渐变、旋转、字体效果以及三维变换等等,尽情欣赏吧。阅读全文
posted @ 2011-03-30 09:23 梦想天空(山边小溪) 阅读(35132) | 评论 (42) 编辑
摘要: 对于Web设计和开发人员来说,CSS是非常重要的一部分,随着越来越多的浏览器对CSS3的支持及不断完善,设计师和开发者们有了更多的选择。如今,用纯CSS就可以实现各种各样很酷的效果,甚至是动画。本文精选了一些非常优秀的CSS3工具推荐给大家,欢迎大家分享更多更好的工具和资源。阅读全文
posted @ 2011-03-09 00:21 梦想天空(山边小溪) 阅读(39237) | 评论 (26) 编辑
摘要: 看到有些网站的代码十分优雅,心想自己什么时候也能写出这么好的代码。其实,这不是一朝一夕能达到的,需要的实践中不断锤炼和提高。我们可以分析别人写得好的网页代码,进而更加快速的提高,下面向大家推荐20个基于DIV+CSS标准布局的站点,供大家欣赏和研究。阅读全文
posted @ 2011-02-24 23:04 梦想天空(山边小溪) 阅读(6231) | 评论 (0) 编辑
摘要: 利用 CSS 框架,可以简化你的工作,提高工作效率。CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块。下面给你推荐了27款优秀的CSS框架,你可以选用。阅读全文
posted @ 2011-02-21 12:30 梦想天空(山边小溪) 阅读(6464) | 评论 (5) 编辑
摘要: 在网页中,我们可以用CSS的font-family属性来定义字体,然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体,而这些字体通常在用户的电脑中是没有安装的,所以用font-family属性就无法实现了,今天我们就介绍使用@font-face实现个性化字体。阅读全文
posted @ 2011-02-11 00:12 梦想天空(山边小溪) 阅读(35202) | 评论 (2) 编辑
摘要: 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍常用的Web字体格式及各浏览器兼容情况。阅读全文
posted @ 2011-02-10 00:21 梦想天空(山边小溪) 阅读(23023) | 评论 (7) 编辑
摘要: 作为一名前端,我们通常要做的就是让页面在各系统A-Grade浏览器,甚至网站浏览份额0.1%以上的浏览器上良好显示。当然,还有性能问题。不过,今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天,IE6-9/Mozilla(Gecko)系列/Chrome/Safari/Opera etc. 这些浏览器的兼容,无不让前端们头痛。阅读全文
posted @ 2011-01-04 00:19 梦想天空(山边小溪) 阅读(3018) | 评论 (8) 编辑
摘要: 1 Cantya Studio预览 | 下载 | 来自 indeziner2 Creative Media预览 | 下载 | 来自 indeziner3 SindromK预览 | 下载 | 来自 indeziner4 Sleek预览 | 下载 | 来自 Template Fusion5 Urban Artist预览 | 下载 | 来自 Styleshout6 Temper预览 | 下载 | 来自 My Free CSS Template7 Facing预览 | 下载 | 来自 My Free CSS Template8 Simple Life预览 | 下载 | 来自 Template Fush阅读全文
posted @ 2010-11-24 20:21 梦想天空(山边小溪) 阅读(1176) | 评论 (0) 编辑
摘要: 作为一个网站设计/开发人员,你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的css工具可以有效地节省你设计网站的时间。优化/格式化类CSSTidy – css Tidy是一个开源的css分析和优化工具; CleanCSS - CleanCSS是一个基于CSS Tidy的强大的CSS优化和格式化工具。 CSS Optimizer - CSS Optimizer可以通过优化压缩CSS样式文件大小。 CSS Analyzer – CSS Analyzer可以帮助你检查你的CSS样式是否符合W3C的认证。 字体类Em Ca阅读全文
posted @ 2010-11-05 20:37 梦想天空(山边小溪) 阅读(1185) | 评论 (0) 编辑
摘要: 由于IE系浏览器对标准的支持不够好,导致Web开发中经常需要去处理浏览器兼容性问题,特别有些莫名其妙的问题很让人头疼,今天要说这个问题就是这样的,先从插入CSS的三种方法说起阅读全文
posted @ 2010-09-19 17:40 梦想天空(山边小溪) 阅读(3322) | 评论 (4) 编辑
摘要: CSS3给WEB开发带来了革命性的影响,以前很多需要javascript实现的复杂效果,现在使用简单的CSS3就能实现。下面这些绚丽的图片画廊效果就是用CSS3实现的。还有件非常有趣的事就是很多人都在使用宝丽来效果。(提示:点击图片即可浏览Demo,为了能查看完整效果,请使用Safari、Chro...阅读全文
posted @ 2010-08-15 16:58 梦想天空(山边小溪) 阅读(6254) | 评论 (15) 编辑
摘要: 其实这篇文章不是这里的,只是,后台很傻B地进不了了。也不知道是什么乱七八糟的问题。先写在这里,当做这么久没更新的偷懒好了。(而且,挑出来的这些都是精华呢!),大家各取所需吧:1. 默认Web字体样式 & 再谈 Web 默认字体这两篇文章是要联一起看的,总的来说,前者的精华在两句话(行高:1.5倍中的第2点和第3点),而玉伯的文章,在秦歌的文章后看,相信可以让你更好地知道如何选择排版中的字体。2. jquery、prototype、mootools、YUI的继承的实现继承、原型,两个难搞的东西,看看这些天才们是怎么来解决的。看看作者的理解和你的理解是不是一致的。3. Pixel Perfect 阅读全文
posted @ 2010-07-27 12:37 梦想天空(山边小溪) 阅读(1107) | 评论 (0) 编辑
摘要: 每一个设计爱好者,几乎都会浏览Gallery画廊站点。在这些站点里面,你可以欣赏到最优秀,最具创意,最有技术性的网页设计。美,就是用来享受的。帕兰每次看到自己喜欢的设计,都忍不住小小的激动一下。在这篇文章里面,帕兰为你收集了个Gallery站点,并进行简短的介绍。 它们当中有好有坏,如果你仅限于欣赏,挑一些适合你自己的。如果你正准备自己创建一个Gallery站点,那你恐怕应该每个都好好的研究一下,取长补短。因为我个人平常就比较喜欢浏览Gallery站点,再加上这篇收集,总结一些小小的经验与大家分计和探讨,主要是做为一个收集展示画廊应该注意的一些地方:求量同时求精。如果你想要被搜索引擎大量收录,阅读全文
posted @ 2010-07-22 10:16 梦想天空(山边小溪) 阅读(1543) | 评论 (1) 编辑
摘要: Smashing Magazine 为了激发 Web 设计者对 CSS3 的兴趣,上月组织了一次 CSS3 设计赛,最终有 5 位设计师获奖,获奖作品体现了 CSS3 技巧的原创性与独特性,同时展示了 CSS3 的强大的功能,这些作品基于纯 CSS3 技术,并不借助 JavaScript 或其它技术。第一名: CSS3 图表CSS3 Charts [ 预览 | 下载 ]该设计试验了 CSS3 在图表方面的应用,不借助任何 JavaScript 和图片。用到了 CSS3 强大的选择器功能:nth-child 和 :target,同时用到了过渡,渐变等技术,由来自美国的 Sean Oh 设计。第二阅读全文
posted @ 2010-07-15 14:13 梦想天空(山边小溪) 阅读(400) | 评论 (0) 编辑
摘要: 加速的关键,不是降低重量,而是减少个数。如果重量在200K以内,只要网络不是特别慢,效率都差不多。但是,如果图片个数多一倍,效率将明显低一个档次。  传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按Byte计算。客户端每显示一张图片都会向服务器发送请求,所以,图片越多请求次数越多,造成延迟的可能性也就越大。因为一张图片的传输时间,通常远小于请求等待的时间。减少图片的三个技巧(CSS Sprite):1. 图片限制(Image Slicing)典型如文本编辑器,小图标特别多,打开时一张张跑出来,给用户的感觉很不好。如果用一张图解决,则不会有这个问题,比如百度空阅读全文
posted @ 2010-07-11 23:17 梦想天空(山边小溪) 阅读(1339) | 评论 (0) 编辑
摘要: 尽管人们期望在屏幕上有些改变,但是CSS和HTML对页面中的交互能做的实在太少了,而那些还需要用代码来实现。比如一个链接要么是这个颜色,要么是那个颜色;一个文本区域要么这么大,要么那么大;一张图片要么是透明的要么是不透明的;它们是从一个状态直接变到另一个状态——中间并没有过渡。  这导致大部分网页有些生硬,因为元素只会很死板的切换或改变。  是的,你可以使用DHTML、jQuery或者自己编写JS来实现过度,但是这需要更多的代码来实现本应该非常简单的功能。  我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中,你会发现很有用的关于CSS变换(transit阅读全文
posted @ 2010-07-09 00:10 梦想天空(山边小溪) 阅读(1117) | 评论 (0) 编辑
摘要: HTML5 的 Canvas 对象将改变 JavaScript 的使命,使之成为 HTML5 下强大的动画脚本编写工具。本文介绍了 8 个你从未见过的,基于 HTML5 Canvas 和 JavaScript 的动画,这些令人难以置信的效果将使你对 HTML5 彻底折服。需要指出的是,这些都是浏览器的原生动画,无需任何插件。Tunnelers纯 JavaScript + HTML5 Canvas 生成的交互动画,难以置信。The Mesmerizer在格子中移动鼠标,颜色随着改变并扩散到周围的格子,很迷幻。用鼠标点四角的格子,或按键盘,可以看到更奇妙的效果。Burn在页面上移动鼠标,或按下鼠标阅读全文
posted @ 2010-07-01 00:41 梦想天空(山边小溪) 阅读(1451) | 评论 (1) 编辑
摘要: Web 设计与开发师的一个重要工作环节是跨浏览器测试,谁让我们生活在这个既幸福又痛苦的时代,有那么多浏览器摆在我们面前,还有那个噩梦般总也摆脱不掉的 IE6。本文讲述了与跨浏览器测试有关的各种问题与知识,包括渲染,平台,设备以及 JavaScript 引擎。梦幻五组合IE 独霸天下的那些日子,Web 设计师不时陷入 IE 同它竞争者的口水战,然而,当一些新的,注重 Web 标准的浏览器出现时,事情...阅读全文
posted @ 2010-06-19 11:46 梦想天空(山边小溪) 阅读(477) | 评论 (0) 编辑
摘要: 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧。理解 CSS 盒子模型如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS ...阅读全文
posted @ 2010-06-19 11:40 梦想天空(山边小溪) 阅读(607) | 评论 (3) 编辑
摘要: 盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此,然而,任何美好的事物都有缺憾,盒子模型有两种不同的诠释,一种来自 IE6,一种来自 W3C 标准浏览器。盒子模型下图就是一个典型的盒子模型示意图在内容区外面,依次围绕着 padding 区,border 区,margin 区,这一模型结构在所有主流浏览器都是一致的。通过盒子模型,我们可以为我们的内容设置边界,留白以及边距,盒子模型最典型的应用是这样:我们有一段内容,可以为这段内容设置一个边框,为了让内容不至于紧挨着边框,可以设置 阅读全文
posted @ 2010-06-19 11:37 梦想天空(山边小溪) 阅读(504) | 评论 (0) 编辑
摘要: 支持 CSS3 和 HTML5 的浏览器越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 CSS3 和 HTML5 的W3C 规范都尚未形成。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点,至少要对各个浏览器对这两种新技术的支持情况有一个全面了解。 需要指出的是,即使同一个浏览器的同一个版本,在 Mac 和 Windows 两个平台,它们对 CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome, Safari, Firefox, Opera, IE 5 大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种功能.阅读全文
posted @ 2010-04-02 09:18 梦想天空(山边小溪) 阅读(656) | 评论 (1) 编辑
摘要: 一、跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同。因此使CSShack技术进行浏览器区分是实现跨浏览器访问一个好方法。CSSHack技术有很多,具体可以查看: 本文据说的主要是通过“.”,“>”,“*”,“_”来区分。以下是本人对这四种符号的测试结果: ———————IE6——IE7——IE8——FF2——FF3—Opera9.5 >property——Y——Y——Y——N——N——N .property——Y——Y——Y——N——N——N *property——Y阅读全文
posted @ 2010-01-26 15:46 梦想天空(山边小溪) 阅读(43581) | 评论 (3) 编辑
摘要: 现代 Web 设计与开发越来越看重浏览器兼容问题,IE 每个新版本的推出,都在 CSS 的标准化方面前进一大步,同时,也就不可避免地在 IE 的各个主要版本之间产生兼容问题,尽管 IE8 推出已有时日,使用 IE6的用户仍然相当可观。本文以速查手册的形式介绍 CSS (2.1 和 3)在 IE6,7,8 三个版本之间的兼容情况。这套速查手册可以打印成 A3 尺寸,共2页,以下是各种不同格式下载:高分辨率 GIF 图片格式,第一页,第二页PDF 格式,第一页,第二页阅读全文
posted @ 2009-11-09 18:51 梦想天空(山边小溪) 阅读(455) | 评论 (1) 编辑
摘要: Cheat Sheet 一词在中文中并没有很贴切的对译,大概是考试作弊条一类的东西,这要求 Cheat Sheet 必须短小精悍又覆盖广泛,作为 Web 开发与设计师,免不了在工作时查询大量资料,某个 Web 色值,某个 JavaScript 库的核心语法,这类资料如果攒齐了,怕有半间屋子那么多,如果用 Cheet Sheet 也许几十页纸就够了,本文收集了近百份用于 Web 开发与设计的 Cheet Sheet,你会发现他们非常实用。HTML, XHTML, CSS2CSS2 Cheat Sheet 不仅是一份完整的 CSS2 速查手册,还让你了解每个属性该怎么用。预览 | 下载 (PDF)阅读全文
posted @ 2009-07-09 14:34 梦想天空(山边小溪) 阅读(1121) | 评论 (0) 编辑
摘要: CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不应该用在正式的客户项目,它们更适合你的个人博客站点,Web 设计社区,或者不会有客户向你投诉的场合。1. 圆角效果CSS3 新功能中最常用的一项是圆角效果,标准 HTML 方块对象是90度方角的,CSS3 可以帮你实现圆角。-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px; 甚至单个角也可以实现圆角,不过 M.阅读全文
posted @ 2009-07-08 23:36 梦想天空(山边小溪) 阅读(915) | 评论 (3) 编辑
摘要: 关于top、clientTop、scrollTop、offsetTop等的介绍阅读全文
posted @ 2009-05-31 10:44 梦想天空(山边小溪) 阅读(724) | 评论 (0) 编辑
摘要: 半透明效果有时候会给页面增加不少色彩,特别是Vista盛行之后,半透明效果更加受推崇。在诸多可用于Web浏览的图片格式中,只有PNG格式和Gif格式可以实现半透明效果,不过Gif格式的半透明效果很有限,而且会大范围失真,所以目前最流行的方式就是使用PNG格式图片。不过可惜的是,在Internet Explorer 6及以下版本中都不支持PNG半透明效果(至少是不直接支持)。不过幸好Microsoft在这些浏览器中内置了其他的功能,可以帮助我们来实这种半透明的效果。一、我们看一下普通情况下在现代浏览器中半透明效果的实现首先要有一张半透明的PNG格式图片,这个制作很简单,在Photoshop中新建阅读全文
posted @ 2009-05-05 15:01 梦想天空(山边小溪) 阅读(5029) | 评论 (0) 编辑
摘要: CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.      CSS技巧      1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行      2. margin加倍的问题 设置为float的div在ie下阅读全文
posted @ 2009-05-02 01:48 梦想天空(山边小溪) 阅读(752) | 评论 (1) 编辑
摘要: *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签。所以要解决padding的兼容问题就要靠前面提到的标签。 以sccas-site为例,左侧导航栏在padding上产生了ie6、ie7以及ff浏览器不兼容,修改代码如下: #menu7 li a { height:25px; /*border-righ...阅读全文
posted @ 2009-03-11 15:23 梦想天空(山边小溪) 阅读(4227) | 评论 (0) 编辑
摘要: 在看js代码时,有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西,一直也没深究怎么回事,只是零零碎碎的有些概念,最近终于受不了这种似懂非懂的感觉,决定好好学习总结一下。 1、quirks mode和strict mode是浏览器解析css的两种模式,或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。 2、历史原因。 当早期的浏览...阅读全文
posted @ 2009-02-17 16:52 梦想天空(山边小溪) 阅读(2703) | 评论 (1) 编辑
摘要: 如果网页中定义的中英文字体不同,这会导致下划线不对齐。这种情况在IE浏览器中存在,Firefox浏览器无此问题。解决办法是: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->a:hover { border:none; tex...阅读全文
posted @ 2009-01-16 10:58 梦想天空(山边小溪) 阅读(855) | 评论 (1) 编辑