CSS3 Share Button
首先非常感谢藤藤提供的代码,是她用CSS3写的一个分享按钮的效果,而且写得非常不错。结过她的同意,我稍加做了点点的修改,增加了ICON图标上去,让效果看上去更清晰一些。在这个效果中主要使用了:CSS3的伪类选择器(伪元素)、box-shadow和@font-face三个属性,结过颜色细腻的搭配,制作了这么一个完美的分享按钮。
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)
首先非常感谢藤藤提供的代码,是她用CSS3写的一个分享按钮的效果,而且写得非常不错。结过她的同意,我稍加做了点点的修改,增加了ICON图标上去,让效果看上去更清晰一些。在这个效果中主要使用了:CSS3的伪类选择器(伪元素)、box-shadow和@font-face三个属性,结过颜色细腻的搭配,制作了这么一个完美的分享按钮。
站上已经放了多个CSS3制作的表单效果了,但为增强大家的视野,继续跟大家分享一个CSS3制作的登录表单。这个案例其实很简单,主要使用box-shadow做了分层纸张效果,使用gradient制作渐变按钮效果,然后就是@font-face制作的icon效果。其实这些理论方面的知识在站上都能找到,如果你是第一次接触这些,不仿试着查找一下。
这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变。不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成的,整个案例中使用了:@font-face来制作icon图标,使用gradient来制作渐变的按钮效果,使用text-shadow来制作文字阴影效果等等,方便简单点,但细节与创意才是最重要的,喜欢的同学可以看看是怎么实现的吧。
今天这个案例是使用CSS3的常用属性制作的一个ICON圆开按钮效果,在这个案例中使用@font-face属性制作了三个浏览器的icon(chrom/firefox/ie),使用gradient制作的径向渐变效果,并且使用box-shadow实现立体效果,用text-shadow制作的icon发光效果,详细的可以看代码。
Codrops CSS3 Lightbox总供有三个效果,今天把第一个效果放上来与大家分享,这是一个完美的Lightbox效果,是有Codrops的Mary Lou制作的,真的很完美,不得不让人折服。能把CSS3运用到如此完美。在这个效果中把CSS3常用的属性几乎都用上了,比如说:@font-face制作特殊字体效果;border-radius制作圆角效果;box-shadow实出盒子阴影效果;text-shadow实现文字阴影效果;opacity制作透明效果;gradient制作的渐变背景图片;transition实现过渡的动画效果;animation制作的动画效果等等。而且最为精彩的部分,图片能随浏览器大小进对绽放,要是你对这个感兴趣,不仿看看。
这个案例是使用CSS3制作的一个媒体分享圆形按钮。效果看起来很简单,其实制作也非常的简单的,主要就是径向渐变的运用,以及@font-face实现的ICON效果,当然其中也离开不其他属性的点缀效果,比如说box-shadow制作的阴影,transition制作的动画效果等。
Colorful CSS3 Animated Navigation Menu是Martin Angelov制作的,今天看到这个效果很有意思,特意扒过来与大家分享。整个效果是CSS3使用了Bootstrap的Font Awesome字体图形制作了一个彩色的动画下拉菜单。其中运用到的CSS3属性有:nth-child()选择器,gradient制作渐变效果,@font-face配合:before伪选择器制作的ICON。其中最具特色的是使用max-height来控制下拉菜单的显示与隐藏。你有试过吗?没试过请继续吧!
这是一个纯CSS3制作的工具提示下拉菜单,当你鼠标悬浮在工具条上时,会自动的向下弹出下拉菜单项。整个工具条是通过@font-face来制作的icon,并使用了gradient给每个下拉菜单块制作了一个不同的渐变色,而下拉菜单的隐藏和显示并不是按照我们传统的制作方法,此处是控制下拉菜单的高度来实现显示与隐藏的效果。当你加载页面时,整个下拉菜单的高度为0,但当你的鼠标悬浮在对应的工具图标上时,此时下拉菜单的高度为180px,当然这个值是一个固定例的值,要完美一点的方法最好不要控制死他的高度,具体如何实现,大家自己想想,前面有讲过这样的案例哟。(^_^)。