css3
曾经沧海难为水-除却巫山不是云
这个作者很懒,什么都没留下…
展开
-
CSS3 Gradient Buttons
css3 button多组渐变按钮样式css3 gradient属性制作渐变按钮样式关闭原创 2015-02-25 13:34:19 · 637 阅读 · 0 评论 -
CSS3 Object-fit和Object-position
在响应式设计(RWD)中,令大家最头痛的问题的是图片的自适应处理问题。往往我采取的处理方式是给图片的容器设置一个尺寸,然后给图片设置下面的代码:img { max-width: 100%; height: auto;}但往往需要处理的只止于此。你可能想要让图像长宽比例来填充他的整个容器,和想重新定位他的中心位置。或者,如果你想按长宽比例响应式调整iframe,你可能原创 2017-04-06 12:26:28 · 2056 阅读 · 0 评论 -
使用 position: sticky 达到粘性元素区域悬浮效果
在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。这种效果一直以来需要通过 JavaScript 实现。不过就在去年,这项结合了 Relative (在屏幕中时) 和 Fixed (移出屏幕时) 的样式效果被提案添加到原创 2016-07-14 12:09:22 · 3172 阅读 · 0 评论 -
移动端整体布局-解决ios下fixed定位抖动的问题
原文地址:http://www.w3cplus.com/mobile/mobile-terminal-refactoring-mobile-layout.html一般来说,header和footer部分都为fixed定位,中间的内容区域可滚动。fixed布局常规的结构如下:header class="header fixed-top">header>div c原创 2016-05-26 22:22:27 · 29822 阅读 · 2 评论 -
多屏复杂动画CSS技巧三则
当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画。并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动:感谢shirley帮忙录制上面的视频,虽然视频内容是手机上的显示效果,但是,这个“企业新年祝福活动”原本只针对桌面端,移动端是后来辅助增强(增加了相当于活动页面UV 5.7%的点击)。而目前大多原创 2016-02-02 17:08:06 · 669 阅读 · 0 评论 -
iPads和iPones的Media Queries
CSS3 Media Queries是一个强大的媒体查询功能,他的出现使用我们的站点可以随着不同的设备展现出不同的样多风格。紧随着Responsive设计的出现,Media Queries的功能是越来越得到前端人员的亲眯。我也不另外,跟着这股时尚流行风,从接触到学习,紧接的到应用,对这个属性有了基本上的了解和实战经验。为了大家方便使用Media Queries,W3cplus通过互联网原创 2014-09-09 16:48:10 · 759 阅读 · 0 评论 -
使用 CSS 媒体查询创建响应式网站
简介现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果,如何在各种大小的屏幕上提供一流的用户体验,答案是:采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。在本文中,将探索如何将媒体查询用于桌面转载 2014-10-11 15:35:58 · 1008 阅读 · 0 评论 -
CSS3 Transform——transform-origin
在CSS2.1中,我们的页面都是静态的,网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的,比如说,如何实际移动一些元素?如何更改元素的外观——旋转或缩放?多年来,Web设计师为了给修改页面的外观,都依赖于图片、Flash或JavaScript才能完成。不过,CSS3将要改变设计师这种思维,进入CSS3时代,借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。原创 2015-01-18 01:09:47 · 1266 阅读 · 0 评论 -
CSS3发光按钮
@-webkit-keyframes bigAssButtonPulse { from { background-color: #fdfdd3; -webkit-box-shadow: 0 0 25px #fdfdd3; } 50% { background-color: #fffea4; -webkit-box-shadow: 0 0 50px #fffea4; } to { backgr原创 2015-01-28 13:58:22 · 1817 阅读 · 0 评论 -
css3实现多行文字超出部分省略号代替
display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;overflow: hidden;原创 2015-03-09 11:31:38 · 3993 阅读 · 0 评论 -
完美的背景图全屏css代码 – background-size:cover?
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法需要的效果图片以背景的形式铺满整个屏幕,不留空白区域保持图像的纵横比(图片不变形)图片居中不出现滚动条多浏览器支持以图片bg.jpg为例最简单,最高效的方法 CSS3.0归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和cente原创 2015-03-26 14:41:44 · 41494 阅读 · 3 评论 -
总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.
[html]view plaincopyspanstyle="font-size:14px;border:0px;margin:0px;padding:0px">HTMLspan>,从HTML文档的开始到结束排列:metaname=”viewport”content=”width=device-width,initial-scale=1.0原创 2015-01-22 15:18:43 · 914 阅读 · 0 评论 -
使用CSS3开启GPU硬件加速提升网站动画渲染性能
先来说说遇到的问题: 网站本身设计初衷就没有打算支持IE8及以下版本浏览器,并不是因为代码兼容性问题,而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户,毕竟是我自己的网站,所以我说了算!哈哈~ 没有了低版本IE6浏览器,就不用顾虑他们的性能问题了,本以为开发会一帆风顺,结果”性能问题”竟然出现在了一直以性能出色著称的Chrome浏览器中。 Chrome下的动画比原创 2015-08-11 11:44:55 · 1362 阅读 · 0 评论 -
background-size:cover | contain;
background-size:cover | contain;原图不使用background-size第一张背景图片:600 × 431第二张背景图片:426 × 600每个元素的大小:350 × 350background-size:cover;背景铺满元素调整背景图片的宽度或高度(较小者),以铺满整个元素保持背景图片的宽高比原创 2015-04-12 00:21:17 · 1475 阅读 · 0 评论 -
css3 box-sizing属性
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。content-box,border和padding不计算入width之内padding-box,padding计算入width内border-box,border和padding计算入width之内,其实就是怪异模式了~ie8原创 2017-09-17 23:45:25 · 534 阅读 · 0 评论