现代 CSS

image-set实现Retina屏幕下图片显示

最近一直在学习Retina屏幕下图片的处理方法,从《走向视网膜(Retina)的Web时代》一文中知道了Retina这个新名词,同时知道了他是什么东东,同时也继续在探讨Retina方面的知识点,随后在《移动Web——CSS为Retian屏幕替换图片》和《使用css sprites来优化你的网站在Retina屏幕下显示》中学习了Retina屏幕下图片的设置方法,或者说技巧吧,接下来《Web设计师如何制作Retina图像》学习了Retina屏幕下的图片制作技巧。其实可以说,这几篇文章可以让我知道如何在Retina屏幕下处理图片的技巧和细节了。因为这几篇文章从概念到制作Retina屏蔽下的图片,以及Coding实现,可以说是一条龙了。这些都是自以为事,为什么呢?除了这些方法,其实还有更先进的方法,这也就是我接下来要说的事情了。

走向视网膜(Retina)的Web时代

Retina对我来说是一个全新的概念。初次接触还不知道是什么意,后来翻译后才知道“视网膜”,在互联网上海量搜索一翻,这是我们前端的一个新知识点——视网膜Web。的确是个NB的新事物,我一开始看简直不知道是什么东西,后来慢慢的看了一些专业术语,结合业务的高人写的博客,总算是对其有一点点的了解。同时把这几天看的东西做了一下学习笔记,希望对一些新接触 Retina的同学有许些的帮助。(因为自己对这一块知道的不多,有可能有写错的地方,希望这些地方不会误人子弟,罪过罪过),更希望有错的地方能得到同行朋友的指正。

藤藤每日一练——CSS3 Animation Breadcrumbs

藤藤每日一练——CSS3 Animation Breadcrumbs

Breadcrumbs(面包屑),在网站上也是常见的一种UI效果,但这种效果大家看到的都是很普通普通的效果,使用CSS3制作的一些特殊效果,可能很少见吧。虽然早前在《CSS 制作Breadcrumbs》一文中搜集和制作了一些效果,但这些效果都没有运用动画效果。今天这个案例使用CSS3的几个属性制作了一个带有动画的Breadcrumbs效果,感兴趣的可以看看。

藤藤每日一练——Pure CSS3 Create Pagination

藤藤每日一练——Pure CSS3 Create Pagination

Pagination(分页导航)效果,可以说每个网站都会有的效果,制作原理简单,今天我们也用css3制作了一个分页导航的效果,整个效果使用的CSS3属性很少,主要使用gradient来制作了渐变图片,使用border-radius来制作了圆角,不过藤藤在这个案例中为了模仿“active”效果,使用了“:target”属性来做的,实际生产中建议这么使用,因为active可以通过程序来控制,不是我们CSS的菜。详细的看代码吧,希望大家喜欢。

响应式导航菜单在移动端的制作方法与解决方案

Responsive设计现在是网页设计中的一种趋势,现在浏览网页不在是仅限于PC端,而是有很多类型的屏幕尺寸——桌面、笔记本电脑、平板电脑和智能手机等等。一个网页要能在这么多种类型屏幕上显示,Responsive设计似乎是一种完美的解决方案。因为他允许你创建一个网站,可以适应不同的分辨率。这是具有挑战性的,从桌面到移动端屏幕。为此,内容有需要隐藏的,图片必须能自动适应大小和一些其他网页元素需要相应的改变。详细的介绍可以阅读前面介绍的《Responsive Web Design》和《Responsive设计的十个基本技巧》。在这里,我们要看看网页设计中至关重要的UI组件之一网站导航菜单。因为导航也涉及到响应式设计的变化。

解决方案有许多种,比如说使用选择下拉框制作菜单、CSS下拉菜单、切换导航菜单等,(可以看看《20款Responsive Menu教程》,这里有近20种响应式导航菜单制作案例与相关教程的介绍)。当然这些解决方案都有自己的优缺点,至于使用哪种解决方案,就需要根据您的需求,从中找到一个完美的解决方案来适合你的项目。接下来为大家提供一些响应式导航菜单的制作方法和解决方案,希望能帮你完成更好的Responsive设计。

如何移除button在IE67下的黑边

好久没有处理过IE6下的兼容问题了,今天有朋友碰到过input[type="submit"]和button[type="submit"]在IE6-7下会出现黑边,就算是你在样式中重置了一个border属性也是如此。真是蛋疼的很。后来经过查找相关的资料,终于找到了解决方法,放上来与大家分享一下,这个问题有可能不只一个人会碰到。(^_^)

在介绍如何处理这个bug之间我们一起来回顾一下,在IE6-7下,input[type="submit"]和button[type="submit"]存在的问题还不仅是这个,常见的有:button在IE67下的宽度兼容问题button的行高问题(各浏览器下解析不一样)、button的outline问题,甚至submit在ios下也存在问题。这么多烦人的事,苦逼了前端人员,(具体解决方案可以点击这里查看)。今天就在为大家增加一个问题的解决方案——如何去除IE67下按钮的黑边框

Pure CSS3 Create Luminous Button

Pure CSS3 Create Luminous Button

这是一个很简单的按钮效果,其来源于鬼哥的鬼群,看到鬼大问这样的按钮怎么制作,默认效果就不说了,说一下点击时的效果吧。当你点击按钮时,中间会有发光,并向外扩散的淡光效果。看到效果大家在考虑是否使用text-shadow制作,或者说使用box-shadow效果制作。但思量过来,直接在button上使用这两个属性都无法实现,最后决定使用“:after”来制作发光的效果。经过尝试,效果还是制作出来了,只不过没有设计师的那么完美。希望大家能从中找到一点思路。

CSS3 Animation Dropdown Menu With Metrostyle Web UI

CSS3 Animation Dropdown Menu With Metrostyle Web UI

菜单效果在网上琳琅满目,w3cplus也制作了不少。今天根据Metrostyle的UI设计效果,配合CSS3的transform,aimation属性制作了一个下拉的动画导航效果。这个效果在webkit浏览器下得到较好的支持,在Firefox下有些卡。其中最关键的地方使用了两个额外标签控制翻转的前后效果,详细的制作过程看代码吧。

Responsive列布局

布局W3cplus说的也比较多了,但Responsive的列布局还是第一回说,(如果你是第一次听说Responsive这个词,建议你点击和先了解Responsive)。今天看到一篇有关于Responsive的列布局教程,觉得值得一读,将其译成中文,希望对有需要的同学有所帮助。

通常我们进行列布局,都需要在第一列添加一个类名“first”,在最后一列添加一个类名“last”,主要用来清除他们之间的margin,(有关这方面的介绍可以详细阅读为之写的《CSS解决方案》中的《项目列表解决方安》,这里详细介绍了类似于列布局的相关方法,或者点击这里了解如何避免重复列末尾的Margin。)而且还通过添加类名“clearfix”来清除浮动。这些都是比较古老的解决方案了,今天我们一起来看一个新方案,就是使用CSS3的伪元素选择器“nth-of-type”来实现一个简单的Responsive列布局效果。使用这种方法制作了一些WordPress主题模板。制作这些模板中,他没有使用“first”和“last”类名就实现了多列在不同设备下都能自适应,换句话说,他就是能实现四列、三列、两列等等之间的切换。

藤藤每日一练——Pure CSS3 Lavalamp Menu

藤藤每日一练——Pure CSS3 Lavalamp Menu

Lavalamp Menu是一种很好的效果,早期在国外的博客中看到过这种效果,是通过jquery插件制作的,一开始还不知道这种效果就叫Lavalamp呢?后来为之告诉我的,今天使用CSS3写了一个垂直的Lavalamp的导航效果,这个效果其实很简单,主要是ribbons的制作要点功夫,然手就是选择器的使用,如果你掌握了这两个部分的知识,那么制作这个效果只是一个思路问题,看看代码你就知道了。

页面

返回顶部