随笔分类 - CSS3

样式设置
摘要: Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多。它简化了组织和维护 CSS 代码的成本。Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任何时候都更容易。在这篇文章中,我们已经收集了一组有用的 Sass 和 Compass 工具,将帮助您快速构建 Web 应用程序。阅读全文
posted @ 2016-06-02 21:59 梦想天空(山边小溪) 阅读(571) | 评论 (0) 编辑
摘要: CSS 代码是很难管理,尤其是在大型项目。 样式都写在一个全局作用域里,通过复杂的选择器来指向特定的页面元素。冗余、膨胀和维护可以成为前端开发人员的一场噩梦。幸运的是我们有一些 CSS 工具来帮助开发者克服这种情况。这里集合了15款用于管理 CSS 代码的优秀的 CSS 工具,分享给大家。阅读全文
posted @ 2016-05-15 22:31 梦想天空(山边小溪) 阅读(1383) | 评论 (4) 编辑
摘要: 之前给大家分了很多的在线工具和参考文档,这里又为大家搜集了前端开发必备的20个在线工具和指南。新的一周,你需要计划学习新的东西或者能够提升你的能力。相信你会在这个列表中发现对你很有用的资料。阅读全文
posted @ 2016-04-08 12:35 梦想天空(山边小溪) 阅读(3989) | 评论 (0) 编辑
摘要: CSS所能做的就是改变网页的布局、排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经。值得庆幸的是一些优秀的开发人员提供了很多在线的 Web 应用程序来帮助我们。阅读全文
posted @ 2016-03-07 12:25 梦想天空(山边小溪) 阅读(1699) | 评论 (0) 编辑
摘要: Foundation 6 让您的项目从原型到成平比以往任何时候都更有效!它包括了广泛的模块和灵活的组件。这些多功能就像轻便的积木,可以很容易地把你的想法实现。所有的代码片段支持ARIA属性和作用以及如何正确使用这些组件的说明。阅读全文
posted @ 2015-12-28 12:30 梦想天空(山边小溪) 阅读(3034) | 评论 (0) 编辑
摘要: 每一个网页设计师希望创建让用户能够赏识的网站。当然,这是不可能满足每个人的口味的。幸运的是,我们有最强大的工具和资源。实际上,我们有这么多的网站模板,框架,内容管理系统,先进的工具和其他的东西。这篇文章展示了使用一组使用 CSS3 制作的文本特效,快来欣赏。阅读全文
posted @ 2015-11-22 11:16 梦想天空(山边小溪) 阅读(4338) | 评论 (4) 编辑
摘要: 被请求的HTTP对象之间的延迟会有一个时间段,这个期间网页看起来不完整。Gradify 可以分析出图像中4个最常见的颜色,创建一个梯度(或纯色)作为图片占位符。Gradify 可以在在任何图像发现最突出的颜色并产生一个可伸缩的、响应式的 CSS 渐变。阅读全文
posted @ 2015-07-16 09:09 梦想天空(山边小溪) 阅读(3498) | 评论 (3) 编辑
摘要: Wee 包含许多开发人员在搭建响应的,互动的网站和应用程序时需要的组件。正如它的名字一样,Wee 是一个微小、移动优先的CSS 复位框架。Wee 组织在一个简单的、可扩展的层次结构,拥有一致的样式和脚本。阅读全文
posted @ 2015-06-19 12:56 梦想天空(山边小溪) 阅读(2956) | 评论 (2) 编辑
摘要: Primer 是一个 CSS 工具包,支撑着 GitHub 的前端设计。它的目的仅限于提供通用部件,为我们的开发者提供最大的灵活性,并保持 GitHub 的独特风格。它基于 SCSS 建成,可以通过 Bower 获取,所以很容易在自己的项目中包括全部或部分。阅读全文
posted @ 2015-06-04 11:45 梦想天空(山边小溪) 阅读(1755) | 评论 (0) 编辑
摘要: 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品。CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。阅读全文
posted @ 2015-05-26 09:50 梦想天空(山边小溪) 阅读(4524) | 评论 (5) 编辑
摘要: CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品。阅读全文
posted @ 2015-05-25 13:37 梦想天空(山边小溪) 阅读(7129) | 评论 (12) 编辑
摘要: CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理效果,例如灰度,模糊,饱和,老照片等。阅读全文
posted @ 2015-05-18 12:04 梦想天空(山边小溪) 阅读(2520) | 评论 (0) 编辑
摘要: 今天这篇是2015年第3期(总第34期),希望你能在这里发现有用的资料。梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具。阅读全文
posted @ 2015-04-15 13:48 梦想天空(山边小溪) 阅读(11509) | 评论 (3) 编辑
摘要: Codrops 给我们分享了一组新鲜的按钮样式和效果的集合。它们中的大部分效果都使用了 CSS3 过渡和伪元素,他们都有一个共同点,那就是简单性,没有太多的动画,而是尝试添加一些通过颜色和形状的变化呈现的效果。阅读全文
posted @ 2015-04-13 10:01 梦想天空(山边小溪) 阅读(3562) | 评论 (0) 编辑
摘要: AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现。您可以利用 Animate.css 中的转换或自行创建自己的过渡效果。支持 Firefox、Chrome、Safari、Opera 和 IE 10+ 浏览器。阅读全文
posted @ 2015-04-07 10:58 梦想天空(山边小溪) 阅读(4072) | 评论 (0) 编辑
摘要: 在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等。然而,这里我们要介绍的则是使用 CSS3 制作字体。CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下。阅读全文
posted @ 2015-03-25 09:24 梦想天空(山边小溪) 阅读(2641) | 评论 (5) 编辑
摘要: 下拉菜单是一个很常见的效果,在网站设计中被广泛使用。通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案。使用 HTML5 和 CSS3 可以更容易创造视觉上充满吸引力的下拉菜单。阅读全文
posted @ 2015-03-19 13:38 梦想天空(山边小溪) 阅读(7992) | 评论 (0) 编辑
摘要: 今天这篇是2015年第2期(总第33期),希望你能在这里发现有用的资料。梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具。阅读全文
posted @ 2015-03-12 13:47 梦想天空(山边小溪) 阅读(6380) | 评论 (4) 编辑
摘要: SpaceBase 是一个基于 Sass 的响应式 CSS 框架。SpaceBase 是可以在建立和定制您的需要的一个样板层,它结合最佳实践为今天的响应式网页与我们对每一个项目中使用的核心组件。阅读全文
posted @ 2015-02-10 14:39 梦想天空(山边小溪) 阅读(2141) | 评论 (2) 编辑
摘要: Titon Toolkit 是一个非常强大的用户界面组件,也是实现响应式,移动和现代网页的工具类的集合。每个组件封装了 HTML、CSS 以及为角色特定页面元素的 JavaScript 功能。Toolkit 使用了最新和最伟大的技术,包括 HTML5、CSS3、Sass、Gulp、包管理以及JavaScript的层强有力的新的浏览器的API 。阅读全文
posted @ 2015-02-05 13:47 梦想天空(山边小溪) 阅读(3758) | 评论 (0) 编辑
摘要: 今天,我们想给大家分享一些全屏遮罩效果的灵感。像任何其它的UI组件一样,网页设计不断有新的趋势和风格出现,我们想尝试的遮罩有一些微妙的,还有奇特的效果。这些遮罩的特别之处在于,他们没有像模态窗口那样固定大小而是占据整个屏幕,因此创建效果时,人们必须考虑到这一点。阅读全文
posted @ 2015-01-30 10:48 梦想天空(山边小溪) 阅读(5895) | 评论 (0) 编辑
摘要: 梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2015-01-28 15:06 梦想天空(山边小溪) 阅读(5438) | 评论 (3) 编辑
摘要: 在去年,我给大家分享了《基于 CSS3 的精美模态窗口效果》,而今天我要与大家分享一些新鲜的想法。风格和趋势变化,要求更加适合现代UI的不同的效果。这组新模态窗口效果包含了一些微妙的动画,还有一些应用了SVG变形技术。阅读全文
posted @ 2015-01-26 09:51 梦想天空(山边小溪) 阅读(5050) | 评论 (0) 编辑
摘要: 这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻。此外,子菜单框也可以与此集成起来以使其更具吸引力。导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容。阅读全文
posted @ 2015-01-18 12:35 梦想天空(山边小溪) 阅读(7488) | 评论 (0) 编辑
摘要: 在本教程中,我们将创建一个很好看的照片画廊效果。我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像。在照片堆栈视图,我们可以通过将最上面的图像移动到所有照片后面的方式浏览。阅读全文
posted @ 2015-01-08 09:50 梦想天空(山边小溪) 阅读(2518) | 评论 (0) 编辑
摘要: 产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响。Web 界面上交互的方式很多,只要你去探索,你会发现很多让你眼前一亮的想法。这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得我们去研究和使用。阅读全文
posted @ 2015-01-06 14:14 梦想天空(山边小溪) 阅读(6917) | 评论 (6) 编辑
摘要: 今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果。我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将关闭并重新打开一个更大的图像预览效果。阅读全文
posted @ 2015-01-05 09:15 梦想天空(山边小溪) 阅读(3053) | 评论 (3) 编辑
摘要: BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式。在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 来实现美观的按钮已没有太多的障碍。阅读全文
posted @ 2014-12-29 09:58 梦想天空(山边小溪) 阅读(2413) | 评论 (0) 编辑
摘要: 今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果。我们的想法是展现出样书状结构,使单一的色板或列表点击切换。当点击其中一项,我们就会旋转以显示所选择的项目。阅读全文
posted @ 2014-12-25 14:11 梦想天空(山边小溪) 阅读(3083) | 评论 (0) 编辑
摘要: 现在的网页设计风格正在朝着扁平化发展,力求布局简洁,突出主题内容。而另一方面,网页交互则变得越来越多样性,让用户在操作的时候可以更愉悦。当下很流行给网页元素添加动画,随着 Web 技术的发展,动画的实现方式有多种:JavaScript、CSS3、SVG 以及 Canvas。这篇文章挑选6款帮助前端开发人员实现元素动画的插件。阅读全文
posted @ 2014-12-24 15:14 梦想天空(山边小溪) 阅读(7662) | 评论 (9) 编辑
摘要: 在这个小实验中,我们创建了一个交互式的照片堆栈效果。提供了一些模拟现实的互动的可能性给用户。这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个动作类似现实世界的行为。阅读全文
posted @ 2014-12-19 11:11 梦想天空(山边小溪) 阅读(2084) | 评论 (0) 编辑
摘要: 在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式。但目前还没有像 ::nth-line、::nth-last-line 甚至 ::last-line 这样的选择器。实际上这期选择器在某些情况下是非常有用的,Lining.js 提供了这样的功能。阅读全文
posted @ 2014-12-18 15:38 梦想天空(山边小溪) 阅读(1343) | 评论 (0) 编辑
摘要: tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果。使用非常简单,使用 data 属性配置参数。可以自定义对焦点的位置、模糊半径、焦点的区域大小以及方向。阅读全文
posted @ 2014-12-12 10:00 梦想天空(山边小溪) 阅读(2512) | 评论 (2) 编辑
摘要: 今天我们要为您展示如何创建一些简单又不失时尚的图片说明悬停效果。我们的想法应用悬停效果来显示图片对应的标题,作者和链接按钮。对于一些的效果,我们将使用3D变换。这样做的目的是保持奇妙的效果,并为许多不同的变化提供了灵感。阅读全文
posted @ 2014-12-10 09:28 梦想天空(山边小溪) 阅读(3865) | 评论 (3) 编辑
摘要: 这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件。它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画。相信借助这些插件,你也可以让网站变得高大上起来。阅读全文
posted @ 2014-12-09 14:16 梦想天空(山边小溪) 阅读(10511) | 评论 (5) 编辑
摘要: 这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip、Rotation、Multi-flip、Cube、Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transition 属性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择。阅读全文
posted @ 2014-12-08 09:56 梦想天空(山边小溪) 阅读(4268) | 评论 (0) 编辑
摘要: Web 界面上交互的方式很多,只要你去探索,你会发现很多让你眼前一亮的想法。Codrops 最近发布了一组悬停效果,总共分为两组,多达30种不同的风格。为了让效果尽可能的平滑,最好不要在元素上使用变换以免影响布局。在第二组中采用了 SVG 动画,这也是目前比较流行的方式。阅读全文
posted @ 2014-12-05 10:27 梦想天空(山边小溪) 阅读(5931) | 评论 (3) 编辑
摘要: 《Web 前端开发精华文章推荐》自2011年6月20号发布第一期以来,历经三年半,总共发布了30期。今天这篇是2014年第10期(总第31期),希望你能在这里发现有用的资料。梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用。阅读全文
posted @ 2014-12-02 09:28 梦想天空(山边小溪) 阅读(6070) | 评论 (8) 编辑
摘要: 如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的。网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格。下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网页模板,相信会有你需要的。阅读全文
posted @ 2014-11-27 15:48 梦想天空(山边小溪) 阅读(7765) | 评论 (6) 编辑
摘要: Schema 是一个模块化的,响应式的前端框架,方便,快捷地帮助您迅速启动你的 Web 项目。Schema 配备完整的创建多个视图的能力。从桌面显示器到移动设备,它的12列网格提供强大的灵活性。Schema 借助了强大的 LESS,这使得代码结构干净简洁,超级容易维护。阅读全文
posted @ 2014-11-27 13:12 梦想天空(山边小溪) 阅读(2351) | 评论 (0) 编辑
摘要: 网络有很很多的 CSS 工具和教程可用,它可以帮助设计人员和开发人员轻松、快速地学习 CSS 技术。这些工具中在高效开发 Web 应用程序中发挥重要作用。在这篇文章中,我们收集了40个最好的 CSS 工具用于加速网站开发,如创建 CSS 菜单,动画,三维模型,响应式页面,动画按钮等等。阅读全文
posted @ 2014-11-19 10:29 梦想天空(山边小溪) 阅读(2702) | 评论 (0) 编辑
摘要: 如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加。这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果。阅读全文
posted @ 2014-11-12 09:38 梦想天空(山边小溪) 阅读(2307) | 评论 (0) 编辑
摘要: 最近给大家分享 CSS3 效果比较多,都是充分运用了 CSS3 来实现的。通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加。这篇文章中,我想与大家分享使用 CSS3 过渡特性实现的信封效果的联系表单。阅读全文
posted @ 2014-11-10 09:27 梦想天空(山边小溪) 阅读(2182) | 评论 (2) 编辑
摘要: 在这篇文章中,我们为大家推荐12个创建响应式布局的优秀网格框架。如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务。enjoy!阅读全文
posted @ 2014-11-07 09:15 梦想天空(山边小溪) 阅读(5895) | 评论 (7) 编辑
摘要: 通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加。这篇文章中,我想与大家分享一些 CSS3 动画按钮效果。我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活动状态。阅读全文
posted @ 2014-11-04 11:16 梦想天空(山边小溪) 阅读(2057) | 评论 (0) 编辑
摘要: 作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面。在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果。阅读全文
posted @ 2014-10-31 15:15 梦想天空(山边小溪) 阅读(4997) | 评论 (0) 编辑
摘要: CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果。例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣的效果。本教程将告诉你如何使用 CSS3 为元素创建一组漂亮的图片堆叠效果。阅读全文
posted @ 2014-10-28 12:52 梦想天空(山边小溪) 阅读(2894) | 评论 (0) 编辑
摘要: 这里是精选的12个很炫的 CSS3 效果。CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写复杂的 JavaScript 代码才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。阅读全文
posted @ 2014-10-21 15:14 梦想天空(山边小溪) 阅读(12813) | 评论 (16) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第9期(总第30期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-10-16 15:05 梦想天空(山边小溪) 阅读(6246) | 评论 (0) 编辑
摘要: Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布。虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路径排布相当的复杂,结合 Arctext.js 则可以轻松实现这个效果。阅读全文
posted @ 2014-10-16 10:27 梦想天空(山边小溪) 阅读(2689) | 评论 (0) 编辑
摘要: HTML5 和 CSS3 网站模板存在巨大的需求,网页设计师们都喜欢现成的网站模板,能够轻松地设计和开发美观,吸引眼球的网站。如果你正在寻找响应式的 HTML5 & CSS3 模板,那么你找对地方了,这里罗列了30套免费的响应式 HTML5 & CSS3 模板,可以免费下载。阅读全文
posted @ 2014-10-15 13:33 梦想天空(山边小溪) 阅读(19880) | 评论 (0) 编辑
摘要: 在平常的搜索中,我碰到过很多有趣的信息,应用程序和文档,我把它们整理在下面这个列表。这是收藏的遇到的有用内容的一个伟大的方式,可以在你需要的时候方便查阅。相信你会在这个列表中发现对你很有用的资料。阅读全文
posted @ 2014-10-14 13:45 梦想天空(山边小溪) 阅读(15584) | 评论 (2) 编辑
摘要: Csstyle 是一种现代的方式,用于制作精美的可维护样式表。这个 Csstyle 方法使用 SASS 混入,使你的 CSS 更具可读性和语义,并为你生成选择器,自动处理嵌套等事情。 Csstyle 使您的项目结构令人耳目一新。阅读全文
posted @ 2014-10-10 16:46 梦想天空(山边小溪) 阅读(1870) | 评论 (0) 编辑
摘要: 标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题。在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果。 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CSS 变换特性。阅读全文
posted @ 2014-10-09 09:56 梦想天空(山边小溪) 阅读(3314) | 评论 (0) 编辑
摘要: 作为 Web 开发人员,我想你一定见过各种各样的图片滑块效果。展示产品或者个人作品的方法有很多,其中之一是使用网格样式的滑块效果。在本教程中,我将分享如何使用 jQuery 和 CSS3 变换实现翻转的作品集滑块效果。阅读全文
posted @ 2014-09-28 08:50 梦想天空(山边小溪) 阅读(3170) | 评论 (0) 编辑
摘要: 今天,我们想分享一些动画背景的灵感。全屏背景图片的网站头部是最新的网页设计趋势,已经持续了一段时间。最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中,在这里我们想向您分享几个使用 JavaScript和 Canvas 创建不同页眉的动画示例。阅读全文
posted @ 2014-09-25 10:30 梦想天空(山边小溪) 阅读(12042) | 评论 (0) 编辑
摘要: 在这篇文章中,我们已经编制了30款最好的 Bootstrap 3.0 免费主题和模板清单,让您可以用在下一个项目中,我们希望你能找到有用的。这些主题包含了所有必要的 HTML 和 CSS 为基础的设计模板的版式,表单,按钮,导航和其它界面元件,以及任选的 JavaScript 扩展。阅读全文
posted @ 2014-09-23 15:00 梦想天空(山边小溪) 阅读(76254) | 评论 (28) 编辑
摘要: 今天我们想分享几个简单的款式的网站通知效果。有很多的方式来呈现消息给用户:从经典的咆哮般的通知到窗口顶部的通知栏。各个网站的通知样式和效果千篇一律,难得出现创意的通知效果。这里是实现一个应用 CSS3 动画实现各种风格的通知提示。阅读全文
posted @ 2014-09-23 09:34 梦想天空(山边小溪) 阅读(2610) | 评论 (0) 编辑
摘要: 苹果发布 iPhone 6 和 iPhone 6 Plus 有一段时间了,据说首日预定量达到了创纪录的1600万部,真是不可思议。苹果已经创建了一些指引,让开发者可以受益。他们已经发布了一组苹果官方的 iPhone 6 & Plus 产品图片。阅读全文
posted @ 2014-09-22 12:55 梦想天空(山边小溪) 阅读(1933) | 评论 (0) 编辑
摘要: Waves 点击效果的灵感来自于谷歌的材料设计,很容易使用。只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了。采用 touchstart 与 touchend 事件,支持移动设备。赶紧来体验吧!阅读全文
posted @ 2014-09-18 11:50 梦想天空(山边小溪) 阅读(3296) | 评论 (0) 编辑
摘要: 在互联网上提供很多免费的 Bootstrap 管理后台主题。所有你需要做的就是将它们下载并安装它们,这真的不是什么难事。问题是如何寻找到能够完美符合您的网站需求的主题。当然,你可以自己制作自定义的主题,但时间和资源都是很高贵的,所以在这里我们集合了互联网上一些最好的主题。阅读全文
posted @ 2014-09-15 15:11 梦想天空(山边小溪) 阅读(97583) | 评论 (4) 编辑
摘要: 今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果。您可以把这些效果用在你的作品集,博客或任何你想要的网页中。设置很简单。我们使用了下面这些工具库来实现这个效果。阅读全文
posted @ 2014-09-10 10:54 梦想天空(山边小溪) 阅读(4294) | 评论 (0) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第8期(总第29期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-09-01 23:06 梦想天空(山边小溪) 阅读(3964) | 评论 (0) 编辑
摘要: 这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中。支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效果。阅读全文
posted @ 2014-09-01 10:05 梦想天空(山边小溪) 阅读(2551) | 评论 (1) 编辑
摘要: 这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的、实用的功能,有的是先进的 Web 技术的应用演示。不管哪一种,这些案例中的技术都值得我们去探究和学习。阅读全文
posted @ 2014-08-19 10:08 梦想天空(山边小溪) 阅读(7137) | 评论 (16) 编辑
摘要: 今天给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。阅读全文
posted @ 2014-08-12 13:57 梦想天空(山边小溪) 阅读(5580) | 评论 (15) 编辑
摘要: 有时候,你只是想创造一些真正很酷的效果。例如我们网站常见的关于我们(About us),我们的历史(Our history)等你想暂展示出一些让你的品牌与众不同的页面。图标填充效果可以帮你设计出一个很酷的网页,只需要几个图标即可,让简单的页面看起来也充满活力。阅读全文
posted @ 2014-08-12 10:17 梦想天空(山边小溪) 阅读(2527) | 评论 (0) 编辑
摘要: HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情。所谓只有想不到,没有做不到,的确如此。下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的动画效果。阅读全文
posted @ 2014-08-08 09:12 梦想天空(山边小溪) 阅读(3700) | 评论 (0) 编辑
摘要: 今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果。对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊。阅读全文
posted @ 2014-08-07 13:17 梦想天空(山边小溪) 阅读(5006) | 评论 (0) 编辑
摘要: 每一个 CSS 项目开始时愿望都是很美好的,但不可避免地,多人协作的项目相互之间可能重复使用了相似的颜色,而你从来不知道它们的存在。CSS Colorguard 帮助您保持您想要的颜色设置,当你添加的颜色和那些已经存在的颜色相似的时候提示你。阅读全文
posted @ 2014-08-07 12:21 梦想天空(山边小溪) 阅读(1022) | 评论 (0) 编辑
摘要: ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果。特别适用于个人摄影作品,公司产品展示等用途,赶紧来围观吧。阅读全文
posted @ 2014-07-30 11:32 梦想天空(山边小溪) 阅读(2209) | 评论 (4) 编辑
摘要: 这篇文章给大家分享一组纯 CSS 绘制的《辛普森一家》人物头像。《辛普森一家》(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧。该剧通过对霍默、玛琦、巴特、莉萨和玛吉一家五口生活的描绘,用搞笑的方式自我嘲讽了美国的文化、社会、电视以及人类境况的诸多方面。阅读全文
posted @ 2014-07-22 14:41 梦想天空(山边小溪) 阅读(16002) | 评论 (32) 编辑
摘要: 作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握。前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身手。这篇文章挑选了8个前沿的 HTML5 & CSS3 效果,记得收藏哦:)阅读全文
posted @ 2014-07-17 15:12 梦想天空(山边小溪) 阅读(11888) | 评论 (23) 编辑
摘要: 在当今世界,有许多前端开发的框架。那么,为什么还要再造一个框架呢?Concise 建立的目的是使你有很多的开箱即用的选项,让你能够方便的搭建移动友好的网站和 Web 应用程序。另外还包括一个简单的网格系统,开发人员可以使用该框架来推动自己的创作。阅读全文
posted @ 2014-07-15 10:51 梦想天空(山边小溪) 阅读(2461) | 评论 (0) 编辑
摘要: 今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站。在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例。响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案。 HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览。阅读全文
posted @ 2014-07-14 15:44 梦想天空(山边小溪) 阅读(6302) | 评论 (4) 编辑
摘要: 大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现。而今天这里要分享的这款漂亮的多彩时钟效果大家不一定见过,赶紧来看看。阅读全文
posted @ 2014-07-10 10:34 梦想天空(山边小溪) 阅读(2652) | 评论 (0) 编辑
摘要: 在工作中,我们可能会用到各种交互效果。而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成只是整理的习惯是很有必要的。这篇文章收集了10个在网站开发中很有用的 CSS3 效果,记得收藏。阅读全文
posted @ 2014-07-08 10:39 梦想天空(山边小溪) 阅读(66225) | 评论 (69) 编辑
摘要: 响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案。 HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览。今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站。在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例。阅读全文
posted @ 2014-07-03 13:57 梦想天空(山边小溪) 阅读(7660) | 评论 (4) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第7期(总第28期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-07-01 23:11 梦想天空(山边小溪) 阅读(4997) | 评论 (4) 编辑
摘要: 今天,我们想向您展示如何创建平铺背景图像的幻灯片效果。其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看。这个幻灯片效果是由四个区域的独立移动构成,通过画面分割,同时显示出新的图片。这里需要组合使用 CSS3 的3D转换、过渡和动画功能。阅读全文
posted @ 2014-06-25 10:02 梦想天空(山边小溪) 阅读(7347) | 评论 (5) 编辑
摘要: 视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果。下面分享的这个图片滑块效果是难得一见的结合视差滚动的例子,之前的文章给大家分享过,这里再推荐一下。美女很养眼吧 :)阅读全文
posted @ 2014-06-19 10:38 梦想天空(山边小溪) 阅读(3266) | 评论 (2) 编辑
摘要: jQuery 和 CSS 可以说是设计和开发行业的一次革命。这一切如此简单,快捷的一站式服务。jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件。阅读全文
posted @ 2014-06-18 15:41 梦想天空(山边小溪) 阅读(11853) | 评论 (0) 编辑
摘要: Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果。只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代码。阅读全文
posted @ 2014-06-17 10:26 梦想天空(山边小溪) 阅读(4919) | 评论 (0) 编辑
摘要: 之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合。这些加载效果都是基于一个 DIV 元素实现的,十分强悍。阅读全文
posted @ 2014-06-16 10:42 梦想天空(山边小溪) 阅读(6250) | 评论 (8) 编辑
摘要: 网站或者应用系统的管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,下面分享的这个后台管理模板的设计非常漂亮,特别是导航部分,头部还有未读的短消息和提醒的条数显示。阅读全文
posted @ 2014-06-12 15:38 梦想天空(山边小溪) 阅读(5758) | 评论 (2) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第6期(总第27期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-06-11 23:38 梦想天空(山边小溪) 阅读(7124) | 评论 (2) 编辑
摘要: 在早期,我们都是通过使用 JavaScript 来实现占位符功能。而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能。这里向大家分享一个自适应的占位符效果(Adaptive Placeholder),当你输入的时候,提示文字不会消失,而是以动画的方式移动到了输入框的上方。阅读全文
posted @ 2014-06-11 14:51 梦想天空(山边小溪) 阅读(982) | 评论 (1) 编辑
摘要: 使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果。 利用 3D transforms(变换)属性来实现多种不同的效果。主要的想法是创建三维图像切片,作为三维物体的另一侧,旋转并显示下一个图像。若浏览器不支持3D变换,一个简单的滑块将作为后备方案。阅读全文
posted @ 2014-06-10 14:54 梦想天空(山边小溪) 阅读(11518) | 评论 (9) 编辑
摘要: Shine.js 是一个用于实现漂亮阴影的 JS 库。您可以设置动态光的位置,可定制的阴影。不依赖于第三方库,兼容 AMD。能在支持 textShadow 或 boxShadow 的浏览器中正常使用,如果有需要会自动添加前缀。阅读全文
posted @ 2014-06-09 16:16 梦想天空(山边小溪) 阅读(2855) | 评论 (2) 编辑
摘要: Bourbon 是一个简单易用的 Sass 混入(Mixin)库,无需配置。该混入包含用于支持所有现代浏览器的 CSS3 属性前缀。前缀需要确保在旧的浏览器支持优雅降级。Bourbon 使用 SCSS 语法。阅读全文
posted @ 2014-06-09 12:52 梦想天空(山边小溪) 阅读(1909) | 评论 (0) 编辑
摘要: Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,真的非常简单。提供了Default、Gradient、Sections 以及 Flash 四种效果,满足开发的各种场合需要。阅读全文
posted @ 2014-06-04 13:21 梦想天空(山边小溪) 阅读(3996) | 评论 (7) 编辑
摘要: 在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况。RWD Table Patterns 是一个很好的响应式表格解决方案。它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏览器会使用滚动条代替。阅读全文
posted @ 2014-05-28 14:41 梦想天空(山边小溪) 阅读(2575) | 评论 (2) 编辑
摘要: 如果你看过三星企业设计中心网站,你肯定已经注意到了时尚的网格加载效果。在这篇文章中,我们想向您展示了如何使用 Masonry 网格砌体插件,结合 CSS 动画重现这种效果。另外在这里,我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用。阅读全文
posted @ 2014-05-27 09:39 梦想天空(山边小溪) 阅读(8944) | 评论 (12) 编辑
摘要: 今天我们想与大家分享一个小的动画概念。这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​。实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容。我们试图模仿应用程序的行为,因此创建了两个演示,分别演示垂直和水平旋转网格项。阅读全文
posted @ 2014-05-26 10:46 梦想天空(山边小溪) 阅读(2559) | 评论 (0) 编辑
摘要: WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome、Safari 和 Firefox 浏览器。以文件输入控件的改进,使用 label 包裹在 input 的外贸,所以自定义控件可以正确触发文件浏览器,并且定义了点击时的样式,像复选框和单选框还有选中状态的样式。阅读全文
posted @ 2014-05-25 11:05 梦想天空(山边小溪) 阅读(2544) | 评论 (0) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第5期(总第26期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-05-22 09:35 梦想天空(山边小溪) 阅读(3567) | 评论 (7) 编辑
摘要: LESS 是一个编写 CSS 的很好的方式 ,使您可以使用变量,嵌套规则,混入以及其它许多有用的功能,它可以帮助您更好地组织你的 CSS 代码。最近我一直在研究 Node.js ,并想用 less-middleware 中间件,这样我可以很容易的在我的应用程序中使用 LESS 了。配置好以后,LESS-Middleware 能够自动处理编译你的 LESS 代码为 CSS 代码。阅读全文
posted @ 2014-05-19 15:41 梦想天空(山边小溪) 阅读(4720) | 评论 (2) 编辑
摘要: 对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西。唯一的问题是,你需要跟上这个领域的发展脚本,因此,你必须不断的学习,不断的前进。本文将分享能够帮助您快速掌握 HTML5 的实例教程,值得好好学习。阅读全文
posted @ 2014-05-13 10:08 梦想天空(山边小溪) 阅读(9735) | 评论 (12) 编辑
摘要: Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁。内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码。快速创建网站的布局响应式将变成一件轻而易举的事。阅读全文
posted @ 2014-05-09 15:44 梦想天空(山边小溪) 阅读(2211) | 评论 (2) 编辑
摘要: 今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果。虽然有些效果非常简单,只是简单的滑动动作,但另外的一些则是利用了视角和 3D 转换来创造一些立体动感的效果。阅读全文
posted @ 2014-05-08 14:09 梦想天空(山边小溪) 阅读(32262) | 评论 (47) 编辑
摘要: Jeet 是一个先进的,直观的 CSS 网格系统。通过使用预处理器的强大功能,我们现在可以通过实际分数(或者浮点数)来生成一个基于百分比宽度和间隔的网格。让你用更少的代码,更快的速度构建页面布局。阅读全文
posted @ 2014-05-06 15:44 梦想天空(山边小溪) 阅读(1394) | 评论 (0) 编辑
摘要: Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践。Twitter Bootstrap 框架包含了众多的预定义风格的组件,插件和加载项。在这篇文章中,我们想向大家介绍15款最好的 Twitter Bootstrap 开发工具以更好地满足要求以及帮助提高他们的 Web 开发的生产力。阅读全文
posted @ 2014-05-05 14:46 梦想天空(山边小溪) 阅读(14575) | 评论 (21) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第4期(总第25期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-05-05 09:31 梦想天空(山边小溪) 阅读(5536) | 评论 (7) 编辑
摘要: CSS 浮动,一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。阅读全文
posted @ 2014-04-30 17:03 梦想天空(山边小溪) 阅读(2778) | 评论 (12) 编辑
摘要: iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作。基于 SCSS 技术构建(包括文件),便于修改变量。有模块化的代码,无需包含整个文件。 把饭 30 多个悬停效果,满足各种需要。阅读全文
posted @ 2014-04-30 09:54 梦想天空(山边小溪) 阅读(5107) | 评论 (5) 编辑
摘要: Flexbox 布局模块目前是 W3C 候选标准,旨在提供一个更有效的方式进行布局,对齐和为容器里的项目分配空间,即使它们的大小是未知的或者动态的。这里分享一个基于 Knockout.js 构建的互动教程,让你5分钟就掌握 Flexbox 布局模式。阅读全文
posted @ 2014-04-29 10:46 梦想天空(山边小溪) 阅读(6681) | 评论 (0) 编辑
摘要: 今天我们想与大家分享另一套过渡效果。这一次,我们将探讨如何实现侧边栏的过渡动画,就像我们已经在多级推出菜单中使用的。我们的想法是,以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是。通常侧边栏滑入,把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果,而今天这篇文章能够给你一些启示。阅读全文
posted @ 2014-04-28 09:47 梦想天空(山边小溪) 阅读(14746) | 评论 (35) 编辑
摘要: 这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板。每一个细节都精心设计,以创建一个美妙的用户体验。这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及应用程序展示网站。阅读全文
posted @ 2014-04-26 12:27 梦想天空(山边小溪) 阅读(10700) | 评论 (0) 编辑
摘要: CSS 是前端开发必备技能,入门容易,深入难。比如像 Pseudo-class、Pseudo-element、Media query、Media type 以及 Vendor prefix 的概念,很多人都还很模糊。CSS Vocabulary 是一个很全的 CSS 词汇表,能帮助你轻松了解这些词汇的含义。阅读全文
posted @ 2014-04-24 10:51 梦想天空(山边小溪) 阅读(2518) | 评论 (0) 编辑
摘要: BFC 已经是一个耳听熟闻的词语了,网上有许多关于BFC的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BF阅读全文
posted @ 2014-04-23 22:47 梦想天空(山边小溪) 阅读(32255) | 评论 (33) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第3期(总第24期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-04-22 22:58 梦想天空(山边小溪) 阅读(6395) | 评论 (0) 编辑
摘要: 复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS3 实现,未使用任何图片。阅读全文
posted @ 2014-04-21 09:31 梦想天空(山边小溪) 阅读(13916) | 评论 (9) 编辑
摘要: EnjoyCSS 是一款先进的 CSS3 代码生成工具,可以让你摆脱日常的编码。它方便和易于使用的用户界面允许您快速,无需编码就可以调节出丰富的图形样式。您将能够玩转所有的 EnjoyCSS 参数,就像在 Photoshop 或 illustarator 中一样,结合所有可能的 CSS3 样式功能。所有必需的 CSS 代码将被 EnjoyCSS 自动生成。阅读全文
posted @ 2014-04-17 14:13 梦想天空(山边小溪) 阅读(4174) | 评论 (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 梦想天空(山边小溪) 阅读(8417) | 评论 (2) 编辑
摘要: Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架。它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途径。阅读全文
posted @ 2014-04-10 11:12 梦想天空(山边小溪) 阅读(6079) | 评论 (0) 编辑
摘要: 响应式的 Web 设计方法的目的是制作一个更加灵活的网站,能够为用户提供最佳的视觉体验——方便阅读和导航,只需最少的调整就可实现缩放和滚动,支持更广泛的设备,从移动电话到手持设备到台式电脑。下面是一个优秀的网格工具清单,能够帮助更好的创建响应式布局。阅读全文
posted @ 2014-04-09 14:56 梦想天空(山边小溪) 阅读(16291) | 评论 (0) 编辑
摘要: Codrops 最近分享了一些很酷的图片切换灵感。有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片。状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为。阅读全文
posted @ 2014-04-04 10:27 梦想天空(山边小溪) 阅读(8986) | 评论 (2) 编辑
摘要: 网站的加载速度在一定程度上来说是决定网站能否成功的关键。如果您是网站所有者,一定知道网站速度的重要性。因为没有人愿意为了打开一个网页而等老半天,换句话说,如果你的网站打开速度很慢,将流失大量的访客,甚至出现多米诺效应的不良影响。阅读全文
posted @ 2014-04-02 14:00 梦想天空(山边小溪) 阅读(10930) | 评论 (20) 编辑
摘要: skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序。让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS的快捷方式和插件系统。阅读全文
posted @ 2014-04-02 10:52 梦想天空(山边小溪) 阅读(3813) | 评论 (2) 编辑
摘要: 网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源。今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助你学习网站布局设计。enjoy!阅读全文
posted @ 2014-04-01 15:48 梦想天空(山边小溪) 阅读(3911) | 评论 (0) 编辑
摘要: Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站。这个框架采用流行的扁平化设计和响应式设计。除了布局和网格之外,所有的主要元素都有预定义的样式,例如按,表格,表单等,而且还有各种各样的 JavaScript 组件,像模态弹窗,工具提示等等。阅读全文
posted @ 2014-03-30 12:29 梦想天空(山边小溪) 阅读(2514) | 评论 (0) 编辑
摘要: 每天有数以百计的网站推出,其中很多优秀网站被推荐到 CSS 画廊供大家评分和评论,这对于网页设计师来说是很好的灵感来源。今天,我们选择了15个来自全球各地的 CSS3 网站设计作品, 它们都是赢得 CSS 奖项的。enjoy!阅读全文
posted @ 2014-03-28 09:59 梦想天空(山边小溪) 阅读(3625) | 评论 (0) 编辑
摘要: 使用 HTML5,CSS3 和 JavaScript 开发移动应用经过实践证明是一种可行的方式。这里收录了几款 iOS 风格的手机应用程序开发框架,帮助您使用擅长的 Web 技术来开发移动应用程序。这些工具大多都基于 HTML & CSS,而另一些则可能需要使用 JavaScript 库。阅读全文
posted @ 2014-03-25 15:09 梦想天空(山边小溪) 阅读(11100) | 评论 (14) 编辑
摘要: HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术。每一项技术都有简洁,在线演示以及详细的文档链接。这些技术将成为未来一段时间 Web 开发的顶尖技术,如果不想落伍的话就赶紧来看看吧。阅读全文
posted @ 2014-03-25 10:28 梦想天空(山边小溪) 阅读(3838) | 评论 (3) 编辑
摘要: 《Web前端开发精华文章推荐》2014年第二期(总第二十三期)和大家见面了。梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀jQuery插件,展示前沿的HTML5和CSS3技术应用,推荐优秀的网页设计案例,共享精美的设计素材和优秀的Web开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-03-18 15:20 梦想天空(山边小溪) 阅读(5902) | 评论 (0) 编辑
摘要: CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签,加上特定的 class 即可。阅读全文
posted @ 2014-03-11 09:38 梦想天空(山边小溪) 阅读(10467) | 评论 (0) 编辑
摘要: CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉。特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点。在开发中,选择好工具是非常重要的。这篇文章分享最好的20款 CSS 编辑器给开发人员,因为这些实用的工具将让你的工作更有效率。阅读全文
posted @ 2014-03-02 23:40 梦想天空(山边小溪) 阅读(17235) | 评论 (5) 编辑
摘要: 下拉菜单是一个很常见的效果,在网站设计中被广泛使用。通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案。使用 HTML5 和 CSS3 可以更容易创造视觉上充满吸引力的下拉菜单。阅读全文
posted @ 2014-02-24 13:10 梦想天空(山边小溪) 阅读(30636) | 评论 (0) 编辑
摘要: 《Web 前端开发精华文章推荐》2014年第一期(总第二十二期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2014-02-18 10:00 梦想天空(山边小溪) 阅读(7786) | 评论 (8) 编辑
摘要: modern.IE 是微软推出的一个开发人员中心,提供免费的工具和资源,旨在使您能够花更少的时间来测试各种版本的 Internet Explorer,并留出更多时间在现代 Web 上构建重要的内容。modern.IE 在支持旧版 IE 的同时,可使您更加轻松地利用 Web 标准(例如 HTML5 和 CSS3)构建创新体验,从而帮助推动 Web 的发展。阅读全文
posted @ 2014-02-17 09:51 梦想天空(山边小溪) 阅读(1642) | 评论 (0) 编辑
摘要: 在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。阅读全文
posted @ 2014-02-14 09:56 梦想天空(山边小溪) 阅读(11900) | 评论 (0) 编辑
摘要: 下拉菜单是一个很常见的效果,在网站设计中被广泛使用。通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案。使用 HTML5 和 CSS3 可以更容易创造视觉上充满吸引力的下拉菜单。阅读全文
posted @ 2014-02-11 14:49 梦想天空(山边小溪) 阅读(36051) | 评论 (12) 编辑
摘要: CodePen 是一个在线的 HTML、CSS 和 JavaScript 代码编辑器,能够编写代码并即时预览效果。你在上面可以在线展示自己的作品,也可以看到其他人在网页中实现的各种令人惊奇的效果。今天这篇文章就为大家挑选出8个超炫的 Web 效果演示,这些 Demo 可以说都是艺术品,让小伙伴们都惊呆了!阅读全文
posted @ 2014-01-23 14:24 梦想天空(山边小溪) 阅读(29149) | 评论 (75) 编辑
摘要: 这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具。对于每一项工作,开发人员需要特定的辅助工具,所以如果下面这些工具对于你来说都是新的领域,那么这篇文章是非常有用的,因为这些实用的工具将让你的工作更有效率。阅读全文
posted @ 2014-01-20 14:21 梦想天空(山边小溪) 阅读(12171) | 评论 (16) 编辑
摘要: 这是一篇全面介绍 Webkit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源),并花了很多时间来研读网络浏览器的源代码。阅读全文
posted @ 2014-01-10 14:11 梦想天空(山边小溪) 阅读(9180) | 评论 (11) 编辑
摘要: Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮、LOGO以及图片等元素。所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果,因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。阅读全文
posted @ 2014-01-08 22:44 梦想天空(山边小溪) 阅读(23115) | 评论 (0) 编辑
摘要: 响应式设计用于创建可在任何设备上进行查看,并可以从智能手机屏幕无缝地切换到台式电脑屏幕的网站的技术。它的重点是确保轻松导航和可读性,以最小的缩放,滚动或平移必需的。路已变得不那么的最近趋势和更多的必需品,作为可以跨多种操作系统和设备的增加迅速查看手机兼容的网站的需求。阅读全文
posted @ 2014-01-06 14:05 梦想天空(山边小溪) 阅读(5119) | 评论 (2) 编辑
摘要: 感谢大家在过去一年对《梦想天空》博客的支持,2014年我会继续向大家分享更多更好的前端开发相关的技术文章、资源和素材。祝大家在新的一年里心想事成,马到成功!这篇文章挑选了10篇2013年最受欢迎的前端开发博文,看看有没有你错过的精彩内容。阅读全文
posted @ 2014-01-02 14:35 梦想天空(山边小溪) 阅读(6354) | 评论 (10) 编辑
摘要: SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更加的技术实现方案和使用体验。阅读全文
posted @ 2013-12-28 15:17 梦想天空(山边小溪) 阅读(114253) | 评论 (42) 编辑
摘要: Myth 是一个预处理器,可以让你编写纯CSS,而无需担心速度慢的浏览器的支持。有点类似于 CSS polyfill 。Myth 让你写纯粹的 CSS,同时还让你可以使用类似 LESS 和 Sass 的工具。您仍然可以使用变量和数学函数,就像你在其它预处理器中使用的一样。阅读全文
posted @ 2013-12-26 14:13 梦想天空(山边小溪) 阅读(1410) | 评论 (0) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第九期(总第二十一期)和大家见面了。梦想天空博客关注前端开发技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的网页设计案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2013-12-25 09:53 梦想天空(山边小溪) 阅读(4138) | 评论 (4) 编辑
摘要: inuit.css 是一个强大的,可扩展的 CSS 框架,另外还是基于 Sass,面向对象的框架。inuit.css 是建立在 BEM 风格的命名约定,非常适合于想要专注于创意而不是代码的设计师以及喜欢抽象和面向对象方法的开发人员。它提供给你设计模式,而不是设计决策。阅读全文
posted @ 2013-12-21 11:45 梦想天空(山边小溪) 阅读(1904) | 评论 (0) 编辑
摘要: 今天的《优秀前端教程》给大家带来的是一组扁平风格的 3D 进度按钮样式,其中的按钮本身作为一个进度指示器。3D 样式是用于在按钮的一侧展示j进度。需要注意的是,这些效果都是借助于在伪元素上使用过渡特效,因此在某些浏览器(如 Safari 和移动 Safari 浏览器等)不支持。阅读全文
posted @ 2013-12-19 14:02 梦想天空(山边小溪) 阅读(2309) | 评论 (4) 编辑
摘要: 我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在图形绘制中的创新使用。阅读全文
posted @ 2013-12-17 22:55 梦想天空(山边小溪) 阅读(2309) | 评论 (10) 编辑
摘要: 由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能。这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力。这里分享的20个优秀的 CSS3 按钮效果制作教程,你可以学习这些技术并使用它们为您的作品创造更多的乐趣。阅读全文
posted @ 2013-12-11 20:24 梦想天空(山边小溪) 阅读(4101) | 评论 (0) 编辑
摘要: 在网站中,有很多地方会需要在图片上显示图片标题。使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果。没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作。您可以查看网页的源代码,了解动画是如何工作的。阅读全文
posted @ 2013-12-05 17:15 梦想天空(山边小溪) 阅读(2224) | 评论 (0) 编辑
摘要: 由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能。这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力。这里分享的20个优秀的 CSS3 按钮效果制作教程,你可以学习这些技术并使用它们为您的作品创造更多的乐趣。阅读全文
posted @ 2013-12-03 22:46 梦想天空(山边小溪) 阅读(2562) | 评论 (4) 编辑
摘要: 我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。阅读全文
posted @ 2013-11-29 14:19 梦想天空(山边小溪) 阅读(2449) | 评论 (2) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第八期(总第二十期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章和资源能够帮助到您。阅读全文
posted @ 2013-11-28 15:33 梦想天空(山边小溪) 阅读(4867) | 评论 (0) 编辑
摘要: 数以百万计的设计师和工程师采用 Foundation 作为他们的产品和网站设计的前端框架。Foundation 是第一个响应式、语义化和移动优先的开源框架。最近发布的 Foundation 5 建立了一个新的命令行工具,可以让你更快速的建立起 Foundation 项目,这些项目现在将使用 Libsass——后端的 Sass 编译库,这将大大加快执行速度。阅读全文
posted @ 2013-11-26 09:23 梦想天空(山边小溪) 阅读(6491) | 评论 (2) 编辑
摘要: 在 CSS 测量系统中,有好几种单位,如像素、百分比、英寸、厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用。很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行。《Which CSS Measurements To Use When》 这篇文章介绍了各种单位的使用场合,可以参考一下。阅读全文
posted @ 2013-11-20 23:17 梦想天空(山边小溪) 阅读(1220) | 评论 (2) 编辑
摘要: 我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制数学中的各种形状的砖石等。阅读全文
posted @ 2013-11-19 20:29 梦想天空(山边小溪) 阅读(3382) | 评论 (0) 编辑
摘要: Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架。可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型。阅读全文
posted @ 2013-11-16 15:04 梦想天空(山边小溪) 阅读(1964) | 评论 (0) 编辑
摘要: Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式。这是一个现代的,HTML5-ready 的 CSS 重置样式集。阅读全文
posted @ 2013-11-14 11:21 梦想天空(山边小溪) 阅读(21832) | 评论 (4) 编辑
摘要: Simptip 是一个简单基于 Sass 的 CSS 工具提示效果。帮助你在网站中加入在不同的方向(上、左、右、下)的工具提示,也可以设置不同的颜色如成功、信息、警告和危险。最后还有其他特性如软边、半箭头,活动效果,渐变效果和多行提示等等。阅读全文
posted @ 2013-11-13 11:55 梦想天空(山边小溪) 阅读(1563) | 评论 (0) 编辑
摘要: 《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制五角星、六边形、心形等等。我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。阅读全文
posted @ 2013-11-07 07:37 梦想天空(山边小溪) 阅读(9839) | 评论 (18) 编辑
摘要: 在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验。正如我们都知道的,CSS3 在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性。你可以学习这些教程和试验中的优秀技术并使用它们为您的作品创造更多的乐趣。阅读全文
posted @ 2013-11-02 22:31 梦想天空(山边小溪) 阅读(25986) | 评论 (6) 编辑
摘要: 我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制基本图形(圆、椭圆等)。阅读全文
posted @ 2013-11-02 10:21 梦想天空(山边小溪) 阅读(7105) | 评论 (2) 编辑
摘要: 当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。阅读全文
posted @ 2013-11-01 10:11 梦想天空(山边小溪) 阅读(7911) | 评论 (10) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第七期(总第十九期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2013-10-30 13:57 梦想天空(山边小溪) 阅读(7217) | 评论 (18) 编辑
摘要: 我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。今天这篇文章开始推出《百变 CSS 系列》,给大家带来 CSS 在网页中以及图形绘制中的使用。首先给大家打来的是流行的 CSS 三角形绘制方法。阅读全文
posted @ 2013-10-28 22:42 梦想天空(山边小溪) 阅读(26813) | 评论 (16) 编辑
摘要: 对于视差滚动(Parallax Scrolling),关注网页设计的朋友都不会陌生。在网页设计中,视差滚动是一种很特别的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动形成 3D 运动效果,有很强的视觉冲击力。 前阵子视差被用来提供一个漂浮在屏幕周围的元素,有很多的网站使用这种效果,有点势不可挡的趋势。阅读全文
posted @ 2013-10-21 22:34 梦想天空(山边小溪) 阅读(3936) | 评论 (5) 编辑
摘要: Clank 是一个自由和开放源码的 HTML/CSS 框架,可以帮助你轻松创建本地手机或平板电脑应用程序的原型。它着重于提供一致的用户界面,不会刻意去模仿一个特定的 OS 。该框架是基于组件的,这样我们就可以选择和使用所需的部分,组件包括按钮,表格,滑块,切换等等。阅读全文
posted @ 2013-10-20 13:30 梦想天空(山边小溪) 阅读(4331) | 评论 (0) 编辑
摘要: 如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难。 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手。这是一个基于 Web 的工具,使任何人都可以通过拖放创建一个具有响应性的布局原型。你可以简单地添加任意数量的页面,DIV,定义百分比的宽度,也支持嵌套网格,还可以自动生成下载文件。阅读全文
posted @ 2013-10-19 23:31 梦想天空(山边小溪) 阅读(2673) | 评论 (4) 编辑
摘要: 在网络上能找很多免费的 PSD 格式素材,但是很少有 HTML/CSS 界面组件下载。在这篇文章中,收集了14套免费的 HTML/CSS 界面源码分享给前端设计师和开发者们。这些组件包括按钮、滑块、表单、搜索栏、进度条等。阅读全文
posted @ 2013-10-14 10:01 梦想天空(山边小溪) 阅读(9150) | 评论 (0) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第六期(总第十八期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2013-09-17 15:22 梦想天空(山边小溪) 阅读(7500) | 评论 (14) 编辑
摘要: Screenfly 让你能够在各种设备的屏幕和分辨率下查看你的网站。输入网址,并点击GO开始浏览网页。Screenfly 可以使用代理服务器来模拟设备,当您查看您的网站,代理服务器模仿您所选择的设备的用户代理字符串。阅读全文
posted @ 2013-09-17 10:42 梦想天空(山边小溪) 阅读(4298) | 评论 (5) 编辑
摘要: CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画。所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类就可以了。阅读全文
posted @ 2013-09-12 09:51 梦想天空(山边小溪) 阅读(6572) | 评论 (0) 编辑
摘要: Bootstrap Magic 是一款基于 Bootstrap 和 AngularJS 的主题创建工具。您可以轻松地创建您自己的 Twitter Bootstrap 主题,可以立即看到你的内容变化。您还可以添加来自 Google Webfont 的很棒的网页字体。阅读全文
posted @ 2013-09-11 10:14 梦想天空(山边小溪) 阅读(10122) | 评论 (4) 编辑
摘要: Animo.js 是一个功能强大的小工具,用于管理 CSS 动画。它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等。Animo 还包括惊人的 animate.css,为您提供了近60个美丽的动画,还加入了一些辅助动画到库中。阅读全文
posted @ 2013-09-07 15:32 梦想天空(山边小溪) 阅读(3188) | 评论 (4) 编辑
摘要: 每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品。这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平,相信你可以得到很大的启发。阅读全文
posted @ 2013-09-02 14:05 梦想天空(山边小溪) 阅读(4102) | 评论 (6) 编辑
摘要: Intention.js 提供一个轻量级的和明确的方式,帮助你动态重组 HTML,成为响应式的方式。操作方法都放在了元素自己里面,所以灵活的布局看起来就似乎不会那么的抽象和凌乱。您可以轻松地增加布局的选择和灵活性,缩短开发时间和减少样式表覆盖媒体查询驱动的必要性。你可以轻松地添加自己的上下文或者创建自己的自定义组。阅读全文
posted @ 2013-09-02 09:42 梦想天空(山边小溪) 阅读(2520) | 评论 (0) 编辑
摘要: 优秀网页作品赏析《第四季》,精彩继续每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品。这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平,相信你可以得到很大的启发。阅读全文
posted @ 2013-08-29 10:09 梦想天空(山边小溪) 阅读(2924) | 评论 (0) 编辑
摘要: CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能。作为前端开发人员必须要掌握的一部分,可能基本的大家都知道。但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道。阅读全文
posted @ 2013-08-28 15:35 梦想天空(山边小溪) 阅读(2804) | 评论 (10) 编辑
摘要: Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状。它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果。使用 Tridiv 可以创造极其复杂的对象和动画。阅读全文
posted @ 2013-08-26 16:51 梦想天空(山边小溪) 阅读(1782) | 评论 (0) 编辑
摘要: Twitter Bootstrap 3.0 终于正式发布了。这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发。几乎一切都已经被重新设计和重建,更好的支持移动端设备。最新的 Twitter Booststrap 包含四层网格类​​——手机,平板电脑,台式机,和大型桌面,你可以做一些超级疯狂的布局。定制器进行了重新设计,现在在浏览器中编译,而不是 Heroku 上,有更好的依赖性支持,甚至有内置的错误处理。阅读全文
posted @ 2013-08-21 10:46 梦想天空(山边小溪) 阅读(20579) | 评论 (16) 编辑
摘要: 每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品。这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平,相信你可以得到很大的启发。阅读全文
posted @ 2013-08-20 15:27 梦想天空(山边小溪) 阅读(3555) | 评论 (8) 编辑
摘要: Codrops 给我们分享了一个多层菜单的实现教程。他们试图探索创建一个嵌套的多级菜单,是非常有用的东西,可以有很多的内容,如网上商店的导航菜单。 这个 Push Menu 效果理论上可以包含无限嵌套的子菜单。阅读全文
posted @ 2013-08-20 10:22 梦想天空(山边小溪) 阅读(2047) | 评论 (0) 编辑
摘要: 今天,我们想与您分享一个实验性的3D效果。它涉及到一个3D移动设备和一些移动应用程序截图。点击切换按钮时,我们将让移动设备转动并移动每个画面,使我们能看到一个分层的视图。你可能之前没见过这种应用程序演示模式,使用 CSS 来实现这样的效果是十分有趣的事情。阅读全文
posted @ 2013-08-19 14:10 梦想天空(山边小溪) 阅读(2602) | 评论 (0) 编辑
摘要: 在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航。教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式。不过不用担心,这里用到的数学知识真的是很简单的。教程使用浅显易懂的语言来介绍数学逻辑,让你能够清晰的理解背后的技术。阅读全文
posted @ 2013-08-17 14:34 梦想天空(山边小溪) 阅读(2642) | 评论 (0) 编辑
摘要: 前端开发并不容易,除了掌握基本的 HTML、CSS 和 Javascript 之外,因为不同版本的浏览器和平台,你需要知道如何做一个跨浏览器的网站。而最新的发展趋势——响应式设计,它不仅使 Web 项目开发更难,也需要花费更多的开发时间。不过,有很多优秀的框架可以帮助到你,这篇文章挑选了14个响应式的前端框架。我列出了它的 UI 组件和 Javascript 插件,几乎所有的都使用了响应式网格系统。阅读全文
posted @ 2013-08-07 14:48 梦想天空(山边小溪) 阅读(19315) | 评论 (25) 编辑
摘要: 今天,给大家分享来自 Quess 的如何实现图片的形状遮罩和放大动画效果。在很多作品集网站中,我们经常能看到这样的造型和效果。就个人而言,我觉得我们不能因为旧的浏览器不支持,我们就放弃在项目中使用 HTML5 或者 CSS3 技术。我们应该“奖励”使用现代浏览器的用户,给他们一个更好的用户体验。阅读全文
posted @ 2013-08-07 10:13 梦想天空(山边小溪) 阅读(4355) | 评论 (0) 编辑
摘要: 每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品。这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平,相信你可以得到很大的启发。阅读全文
posted @ 2013-08-02 14:49 梦想天空(山边小溪) 阅读(3344) | 评论 (3) 编辑
摘要: 使用 CSS,你能够以极高的效率和易用性创造出美丽的设计。CSS3 则更加强大,能够创造更多丰富的效果和功能,而不需要任何外部插件。今天,我为大家收集了25个很有用的 CSS 教程,技术和资源,能够帮助你提高技能。阅读全文
posted @ 2013-07-31 10:04 梦想天空(山边小溪) 阅读(4449) | 评论 (2) 编辑
摘要: 每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品。这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平,相信你可以得到很大的启发。阅读全文
posted @ 2013-07-29 14:37 梦想天空(山边小溪) 阅读(3703) | 评论 (4) 编辑
摘要: Cardinal 是一个适用于移动项目的 CSS 框架,包含很多有用的默认样式、矢量字体、可重用的模块以及一个简单的响应式模块系统。Cardinal 提供了一种在多种移动设备上实现可伸缩的字体和布局的新方法,值得关注。阅读全文
posted @ 2013-07-26 16:22 梦想天空(山边小溪) 阅读(4574) | 评论 (2) 编辑
摘要: 《Web 前端开发精华文章推荐》2013年第五期(总第十七期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。阅读全文
posted @ 2013-07-25 14:45 梦想天空(山边小溪) 阅读(24450) | 评论 (21) 编辑
摘要: 这个使用 CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站。你可以看到两种类型的书设计:精装书和平装书。这两个效果都可以很容易地使用 CSS 修改。赶紧体验一下吧。阅读全文
posted @ 2013-07-23 13:53 梦想天空(山边小溪) 阅读(1663) | 评论 (0) 编辑
摘要: Minimit Anima 是一个实现 CSS3 Transforms 和 Transitions 动画的 jQuery 插件。基于硬件加速的 CSS3 动画执行更快,而且它有一个类似于 jQuery 动画的 API。插件中包含的 jquery.transform.js 让你可以在不支持的 Transforms 的浏览器中实现缩放、旋转和倾斜效果。阅读全文
posted @ 2013-07-18 18:18 梦想天空(山边小溪) 阅读(1796) | 评论 (2) 编辑
摘要: Webydo 是一款专业的在线建站应用,使平面设计师可以创建和管理 HTML 网站,而无需编写代码。设计人员可以设计任何类型网站,只需要点击按钮,就能够发布先进的 HTML 网站。阅读全文
posted @ 2013-07-18 09:47 梦想天空(山边小溪) 阅读(3577) | 评论 (1) 编辑
摘要: S Gallery 是一款响应式的 jQuery 相册插件。使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用。这款插件它有一个特色功能:退出幻灯片模式回到网格视图模式,最后一张活跃的图片会以动画形式回到网格视图中的初始位置,因此用户知道他们浏览到画廊中的哪张图片上。阅读全文
posted @ 2013-07-17 16:29 梦想天空(山边小溪) 阅读(4727) | 评论 (10) 编辑
摘要: CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现球的效果。有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题;另外一种是使用 CSS3 渐变和阴影特性来实现。阅读全文
posted @ 2013-07-16 13:52 梦想天空(山边小溪) 阅读(17920) | 评论 (53) 编辑
摘要: CSS3 不仅仅用作界面效果补充,还可以用来替换传统的一些界面实现,而且效果更酷。Effeckt.css 收集了众多精妙的 CSS3 Transitions & Animations 效果应用,例如:弹窗、按钮、导航、列表、页面切换等等。阅读全文
posted @ 2013-07-12 13:46 梦想天空(山边小溪) 阅读(2732) | 评论 (4) 编辑
摘要: Pure 是一组轻量的,响应式的 CSS 模块,您可以使用在任何的 Web 项目中。充分考虑了移动设备中的使用,保持文件体积尽量小,每行 CSS 都进行了仔细的考虑。Pure 基于 Normalize.css 构建,并提供布局以及 原生 HTML 元素的风格,加上最常见的 UI 组件。相信这些都是你需要的。阅读全文
posted @ 2013-07-07 13:45 梦想天空(山边小溪) 阅读(3834) | 评论 (2) 编辑
摘要: Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示。这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动画)。阅读全文
posted @ 2013-07-02 10:11 梦想天空(山边小溪) 阅读(6135) | 评论 (4) 编辑
摘要: Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现。Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页面,包括图表、表格、地图、消息中心、监控面板等后台管理项目所需的各种组件。阅读全文
posted @ 2013-07-01 09:29 梦想天空(山边小溪) 阅读(245199) | 评论 (99) 编辑
摘要: Fries 是一个移动开发框架,让开发者仅使用 HTML,CSS 和 Javascript 创建出 Android 应用程序界面。Fries 的灵感来自于 Ratchet(开发 iPhone 应用原型的优秀框架),作者把根据 Ratchet 的思路把一些很酷的东西引入到 Android 开发中。令人惊讶的是,Fries 能够很好的兼容 PhoneGap。Fries 旨在使 Android 应用程序开发更快速,更容易。阅读全文
posted @ 2013-06-08 09:43 梦想天空(山边小溪) 阅读(4057) | 评论 (0) 编辑
摘要: 转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升;IE10 随着 Windows 8 在去年10月底正式发布,在 JavaScript 性能和对 HTML5 和 CSS3 的支持方面让人眼前一亮。这篇文章给大家带来《五大主流浏览器 HTML5 和 CSS3 兼容性大比拼》,让我们一起看看2013年的浏览器现状。阅读全文
posted @ 2013-06-05 15:41 梦想天空(山边小溪) 阅读(35664) | 评论 (32) 编辑
摘要: Ratchet 让移动开发人员仅使用简单 HTML,CSS 和 Javascript 组件就能够快速的制作出 iPhone 应用程序的原型。Ratchet 提供了众多效果类似原生应用的界面组件,另外 Push.js 可以帮助开发人员把页面链接起来并在 iPhone 上预览。阅读全文
posted @ 2013-06-03 10:09 梦想天空(山边小溪) 阅读(6530) | 评论 (2) 编辑
摘要: Sassaparilla 是一组创建响应式网站的规则和风格,Sassaparilla 使用 Sass 和 Compass 建立灵活的可重用的样式表。Sassaparilla 可以帮助简单、快速的创建出响应式网站。阅读全文
posted @ 2013-05-30 14:18 梦想天空(山边小溪) 阅读(2396) | 评论 (0) 编辑