现代 CSS

藤藤每日一练——Pure CSS3 Checkbox

Pure CSS3 Checkbox

这个案例是使用了CSS3制作了六种不同风格的checkbox效果。表单的checkbox自定义效果,在webkit内核下,我们可以随心所意的进行自定义样式的美化,但在其他浏览器下还是有些麻烦,早期使用jQuery插件或者别的JavaScript脚本代码来实现,今天的CSS3属性能让你解决这个难题。当然你要知道制作的思路,不然还是有难度的。在整个效果中,最关键的是标签的配合以及":before"和“:after”等CSS3选择器的应用,特别声明一下,由于input的伪类选择器在部分浏览器下还不支持,所以需要添加一些标签来辅助实现":before"这样的伪类选择器的效果,详细的请看藤藤是怎么制作的吧。

Colorful CSS3 Animated Navigation Menu

Colorful CSS3 Animated Navigation Menu

Colorful CSS3 Animated Navigation Menu是Martin Angelov制作的,今天看到这个效果很有意思,特意扒过来与大家分享。整个效果是CSS3使用了BootstrapFont Awesome字体图形制作了一个彩色的动画下拉菜单。其中运用到的CSS3属性有:nth-child()选择器,gradient制作渐变效果,@font-face配合:before伪选择器制作的ICON。其中最具特色的是使用max-height来控制下拉菜单的显示与隐藏。你有试过吗?没试过请继续吧!

藤藤每日一练——Social Media Buttons

Social Media Buttons

这个案例是使用CSS3制作的一个媒体分享圆形按钮。效果看起来很简单,其实制作也非常的简单的,主要就是径向渐变的运用,以及@font-face实现的ICON效果,当然其中也离开不其他属性的点缀效果,比如说box-shadow制作的阴影,transition制作的动画效果等。

Codrops CSS3 Lightbox 2

Codrops CSS3 Lightbox 2

Codrops CSS3 Lightbox总供有三个效果,今天把第二个效果放上来与大家分享,这是一个完美的Lightbox效果,是有CodropsMary Lou制作的,真的很完美,不得不让人折服。能把CSS3运用到如此完美。这个案例与第一个区别其实很小,只是在对图片缩放做了一下不同效果处理。在这个效果中把CSS3常用的属性几乎都用上了,比如说:@font-face制作特殊字体效果;border-radius制作圆角效果;box-shadow实出盒子阴影效果;text-shadow实现文字阴影效果;opacity制作透明效果;gradient制作的渐变背景图片;transition实现过渡的动画效果;animation制作的动画效果等等。而且最为精彩的部分,图片能随浏览器大小进对缩放。要是你对这个感兴趣,不仿看看。

藤藤每日一练——Pure CSS3 Select

藤藤每日一练——Pure CSS3 Select

表单元素向来是前端人员最为头痛的一件事情,众说周知,表单元素的兼容性是最为难处理的,而且想制作一个美丽好看的表单元件,都需要依赖于脚本来实现自定义。其实我们抛开低版本的浏览器,使用CSS3来美化还是可以的,她不需要依赖任何脚本代码,能将表单的元件美化的很靓丽。今天就给大家推荐一个纯CSS3美化的表单中的下拉选择框(select)的效果。这个效果很简单,使用渐变制作了表单select的背景色,同时使用label标签的伪元素“:after”来制作向右的三角。其中最为有特色的是,使用渐变制作了一个美丽的背景方格效果,详细的请看代码。

Codrops CSS3 Lightbox

Codrops CSS3 Lightbox

Codrops CSS3 Lightbox总供有三个效果,今天把第一个效果放上来与大家分享,这是一个完美的Lightbox效果,是有CodropsMary Lou制作的,真的很完美,不得不让人折服。能把CSS3运用到如此完美。在这个效果中把CSS3常用的属性几乎都用上了,比如说:@font-face制作特殊字体效果;border-radius制作圆角效果;box-shadow实出盒子阴影效果;text-shadow实现文字阴影效果;opacity制作透明效果;gradient制作的渐变背景图片;transition实现过渡的动画效果;animation制作的动画效果等等。而且最为精彩的部分,图片能随浏览器大小进对绽放,要是你对这个感兴趣,不仿看看。

Full CSS3 Lightbox

Full CSS3 Lightbox

Full CSS3 Lightbox从标题上就知道是一个CSS3制作的一个全屏显示的Lightbox效果。这个效果是在前一个效果的基础做了一定的改良,修改的最显示的地方就是添加了一个假的关闭按钮,其实给Lightbox的全屏图片显示时添加了一个动画效果,有0.9放大到1,而图片居中效果依然使用的是table和table-cell属性。详细的请参考下面展示的案例代码。

Pure CSS3 Lightbox

Pure CSS3 Lightbox

这个Lightbox效果也是一个纯CSS3写的效果,这个效果的制作方法也不算复杂,相对来说比较简单。主要使用了CSS3的“:target”属性来控制对应大图的显示与隐藏,而且配用了transition属性来制作了动画效果,而且还有意思的是使用了table和table-cell来实现图片的居中效果。具体效果请看看详细代码。

Lightbox effect with Tabindex and CSS3

Lightbox effect with Tabindex and CSS3

这个Lightbox效果实现原理很简单,就是点击图片或者使用tab键,当图片得到焦点(:focus)时,图片会在当前位置被放大,同时移动Y轴的距离。整个制作过程中使用了HTML5的新标签figure和figcaption,包含图片以及图片标题,同时在figure相邻位置设置一个span标签,通过选择器来控制span标签制作一个overlayout的朦板效果。这个效果中仅用到CSS3属性也非常的简单,利用border-radius制作了图片边框的圆角效果,使用box-shadow制作了图片的阴影效果,最主要的是使用CSS3的选择器配合transition和transform属性制作了一个类似于Lightbox的效果。

CSS3 Gallery Lightbox

CSS3 Gallery Lightbox

这个Gallery Lightbox同样没有使用js脚本代码仅使用了CSS代码实现,这个效果初看有些许复杂,一开始不太清楚其实现原理,但仔细看看代码,还是能整明白的。功能主要依赖于css的选择器,以及配合锚点定位来实现。其中很关键一步是HTML的结构,特别是图片的点击播放效果,顺序不能搞错,不然效果无法实现。不过这个效果有一个致命的缺点,那就是对图片的大小有所限制,无法实现图片的自应大小,如果你够有信心的话,可以尝试一下不限制宽度,能否实现这个效果。另外一点,CSS实现的效果,当然没有js实现的效果那么流畅,不过当作挑战性的学习,还是不错的,你不仿一试。

页面

返回顶部