现代 CSS

form

CSS3和jQuery制作翻转表单

CSS3中的Transform应用可以说比较广泛了,但其中的3D Transforms去年就听说了,但一直没有使用过。今天在Tutorialzine看到了一篇这方面的教程《http://tutorialzine.com/2012/02/apple-like-login-form/》。自己动手试了一回,效果蛮好的。现在贴上来与大家一起分享。

这篇教程主要使用了CSS3中的3D transform属性和jQuery制作了一个翻转表单的效果。

表单button的outline问题

outline的使用,大家都喜欢在reset样式表中直接重置:

    * {
      outline: none;
    }
  

Eric Meyers在他的CSS Reset是这样重置的:

表单button的text-indent问题

昨天在《表单button的行高问题》一文中简单的描述了一下表单中的“button”(包括input[type="submit"]/input[type="reset"]/button)行高在Firefox和Opera中不以按设置值解析。今天我想和大家一起来说表单中“button”的“text-indent”属性在IE中的bug。

首先我们来看一个实例:

HTML Markup

    <input type=”submit” value=”Submit” id=”btn” />
  

CSS Code

表单button的行高问题

昨天下午@为之给我发了一个有关于buttonline-height问题的文章——《The Firefox Input Button Line-Height Bug》。看后明白了许多,顺便整理了一下,与大家一起知道这个问题。

下面我们先来看一个Demo的实例:

HTML Code

    <input type="submit" id="button" value="engage"/>
  

CSS Code

自定义表单——美化你的文件载入框

表单的制作常常给我们带来无比的烦恼,比如说表单中的“input[type="radio"]、input[type="checkbox"]、select和input[type="file"]”之类,我们都无法直接通过样式来达到设计的设计要求,如果为了实现设计的设计的优美效果,我们必须通过CSS和js来实现。前面我们在《自定义表单——jQuery制作个性化Checkbox》一文中一起学习了通过jQuery和CSS3来美化表单中的“input[type="radio"]”和“input[type="checkbox"]”。

CSS3制作Login栏

今天在这篇教程中主要想和大家一起探讨一下登录和注册表单的制作方法,具体如何制作一个表单,我在此就不多说了,我主要想说的是如何使用CSS3的相关属性来制作一个美丽而有简洁的表单风格。这篇教程的思路主要来自于Red大师的两篇博文《Simple and effective dropdown login box》和《Slick login form with HTML5 & CSS3》这里我主要演示第一个案例效果,并在Red的基础上作了相应的修改。

使用jQuery和CSS控制元素对齐

上节在《自定义表单——jQuery制作个性化Checkbox》介绍了用jQuery美化表单中的checkbox。今天和大家一起探讨另一个表单制作中的对齐问题,这个我想大家在平时制作表单之时,关于对齐一定有碰到过,那么在这个简短的教程中主要尝试另一种解决方法,希望大家会喜欢。

在Web页面中创建一个Web表单时(比如说注册信息表单,或者联系表单),你都必须做出一个功能和视觉对齐的布局。如下图所示:

input 按钮在IE下兼容问题

这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结。所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下。

页面

返回顶部