css3
-
作者: Airen发布日期: 5月05,12点击量: 246今日浏览: 9前段时间在《@font-face制作Web Icon》一文收集了三种webfont通过CSS3的@font-face来制作Icon图标。现在在网上最为流行的是@robmadole和@supercodepoet两位大师制作的Font Awesome：两位大师给大家准备近两百种不同的Icon图标，都是使用@font-face应用自定义的字体实现的。但有一个不足之处，有很多图标，我们无法使用字符或者实体符来识别，如果需要使用，只能把所有标签都应用，有时我们只需要一两个，而使用这么一个庞大的字符系统，好像有点不太划算。那么今天我要给大家介绍的是使用网络工具Fontomas自定义需要的font...
-
作者: Airen发布日期: 4月12,12点击量: 639今日浏览: 5CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了，但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目，为了实现iPhone和iPad横板与竖板的风格，让我还是头疼了一翻。一开始按照CSS3 Media Queries模板中的介绍来运用，虽然帮我解决了iPad的横板与竖板的风格渲染问题，但在iPhone4上还是存在问题的。后来结过网上的查找，总算是问题解决了，下面就来看看问题是如何解决的。在具体开始之前，先来看看他的源码： <!DOCTYPE HTML...
-
作者: Airen发布日期: 4月06,12点击量: 409今日浏览: 6自从完成上次iPhone的几个页面效果后，一直在没有制作iPhone的页面效果了，今天在公司写了一个登录页面效果，让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子：初载入页面后，表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子：奇怪的是你点击以后就会正常：对比一下，你也会觉得怪，怪都算了，还不知道如何下手:或许很多同学会认为我的样式代码没写好，...
-
作者: Airen发布日期: 4月04,12点击量: 562今日浏览: 5@font-face是CSS3中有关于字体设置的属性，通过@font-face可以将本地字体设置为Web页面字体，并能兼容所有浏览器，使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上，不过这样一来很多人担心影响性能问题。鱼和熊掌不能兼得嘛，我们就不在为这个问题说太多的话了，不过我今天要与大家分享的主题和这个@font-face还是有很在关系的，使用他配合一定的字体来制作Web页面中的Icon图标。初一看有点不实际，以前的Icon都是依靠图片来完成，怎么可能用字体就能实现呢？如果你以前有用过HTML的实体符，我想就不会那么惊奇了。如果你以前关注过本站，...
-
作者: Airen发布日期: 4月04,12点击量: 405今日浏览: 3最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。随着Responsive的响应式设计的兴起，前面跟大家一起学习了：《Responsive设计和CSS3 Media Queries的结合》《了解Responsive网页设计的三个特性》《Responsive设计的关键三步》从这几篇文章中可以知道，在Responsiv的设计中，CSS3的Media是起着非常关键性的作用，也可以说没有CSS3 Media这个属性，Responsiv设计是玩不起来，也是玩不转的。...
-
作者: Airen发布日期: 4月03,12点击量: 456今日浏览: 1前面在CSS3 Ribbons一文中介绍了一个纯CSS3制作的“Ribbons”效果，今天收集了更多的“Ribbons”效果，以供大家参考与学习，希望大家能喜欢。在看具体每个demo之前，我们一起来看下面一个截图：上图是一个典型的“Ribbons”各部位的示意图，但每一个“Ribbons”并不会都使用上图示意的各个部分，在下面的实例中大家可以明显的看到或者说感受到。别的我就不多说了，我想上图能示意出“Ribbons”各个部位。那么每个部位我们可以使用一个“html”标签，当然有了CSS3的伪元素“::before”和“::after”后，我们可以省去一些标签。效果一：HTML Markup...
-
作者: Airen发布日期: 4月02,12点击量: 374今日浏览: 10前几天在W3cplus Demo站上放了一个CSS3 Sliding Form Helps效果。今天我们就一起来看看他是如何实现的。实现方法在表单制作中，往往都在一个input后面或者右边有一个提示框效果，特别是表单验证的制作上。有错误的，警告的，正确的等多种帮助信息。以前大多数看到的有提示信息一直显示，第二种，当表单验正完后显示提示信息，第三种就是input得到焦点时提示用户如何操作。而这些效果以前都是依附在jQuery的上面实现，今天我想和大家一起探讨的是使用CSS3来实现。实现原理也是来源于jQuery，在这个案例中，当表单载入时，所有提示信息都处理隐藏状态，一但input得到焦点，...
-
作者: Airen发布日期: 3月24,12点击量: 647今日浏览: 1最近一直在整理W3cplus Demo站点，收集和写了一些CSS3的Demo效果。今天整理了一下Mary Lou写的《How to spice up your menu with CSS3》效果，整理一下与大家一起学习。目的这是一个简单的列表菜单，当你鼠标移到菜单项时，有一张图片慢慢的从左边向右边移动，并淡淡显示出来，而且此时的菜单项背景色和字体色也同时会改变。下面我们一起来简单的学习这种效果的制作。HTML Markup制作上面的效果需要的HTML结构很简单，在每个列表项中放置两个span制作菜单的内容，并同时放置了一张图片，用来制作hover时图片显示出来的效果，具体的代码如下...
-
作者: Airen发布日期: 3月20,12点击量: 434今日浏览: 2iPhone上的UI的确是精致，让人爱不释手。今天用CSS3写了一个Checkbox的效果，采用了两种不同的方法来实现，另外在此基础上写了一个我们常用的checkbox的效果。众所周知，想要美化表单中的元件，都少不了jQuery的帮忙，有关于这方面的介绍，本站也有过几篇相关的文章，比如说《美化表单——自定义单选按钮和复选按钮》、《自定义表单——JQuery制作个性化Checkbox》和《美化表单——自定义Checkbox和Radio样式》。那么有没有办法不使用jQuery呢？就是大家所说的纯CSS？如果你看了这篇文章后，你就会说，原来也可以实现呀。今天这篇教程，我就想摆脱jQuery，...
-
作者: Airen发布日期: 3月20,12点击量: 516今日浏览: 1这两天制作了一个登入栏效果的案例，简单点说就是集成了以前本站介绍的几个效果。1、CSS3制作Login栏2、CSS3和jQuery制作翻转表单3、CSS3伪元素应用——CSS3 Button另个在这个案例增加了两部分新东西：BootStrap的基本样式和Tooltip效果CSS3的制作的下拉与收缩的panel效果自我感觉效果还可以，兼容所有现代浏览器，于是整理了一下，放上来与大家分享。HTML Markup <input type="checkbox" role="button" id="topBar"/> <label for="topBar" onclick...