css3可以改变图片的颜色了。从此再也不用设计出多张图，而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。 方式一：利用css3滤镜filter中的 drop-shadow代码如下：<style> .icon{display: inline-block;width: 180px;height: 180px;background: url(‘img/XXX.png‘) no-repeat center cover;overflow: hidden; } .icon:after{content: ‘‘;display: block;height: 100%;transform: translateX(-10...
早上没事干，感觉字体阴影的效果还是好看的，那么就来一个小demo吧！1、这是html 简单的有一个标签或者盒子都可以复制代码代码如下:<div class="demo11">我爱考试</div>2、css样式，用css3编写样式，感觉还不错。复制代码代码如下:.demo11 { border: 1px dashed #f2b; height: 150px; width: 250px; text-align: center; line-height: 150px; margin: 0 auto; font-size: 50px; color: orange; text-sh...
当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页，现在有手机，平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择，网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。效果预览 代码下载先看看它的效果在开始之前，点击最终预览来看看它的效果。改变浏览器...
CSS3的transform:scale()可以实现按比例放大或者缩小功能。CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果： 2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：代码如下：<!DOCTYPE html> <html> <head> <meta c...
之前为大家分享了那些创意有趣的404页面， html5和css3打造一款创意404页面， HTML5可爱的404页面动画很逗的机器人。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下：在线预览 源码下载实现的代码。html代码：<section class="center"><article><h1 class="header">404</h1><p class="error">ERROR</p></article><article><img src="vovg1x.png" alt="Funny Face"></article><article><p>Lost? Maybe I can help.</...
我们在做导航标签的时候，有时会出现空间过于拥挤需要隐藏部分内容的情况，所以在这里我自己写了一个鼠标悬停显示扩展内容的效果，如下图所示。 总的来说效果还是比较好实现，但是比较头疼的是三角部分使用了伪元素::after，而对父元素设置over-flow:hidden时也会把伪元素给隐藏掉。最后想的办法是把文字和图标用一个 <span> 包裹住然后对其设置over-flow属性。 HTML代码：1<div id="nav">2<a id="nav-main"><span><i class="icon-...
原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效，觉得效果非常棒，其实话说回来，这玩意儿的实现真的非常简单，主要是创意不错。先来看看效果图。如何，看上去挺不错吧，倾斜、阴影，让一张很普通的图片变得如此霸气。另外你也可以在这里查看DEMO演示，鼠标滑过图片时会出现这样的效果。那么接下来我们分析一下源码吧，显示html代码，非常简单：<div onclic...
效果如图。Ps、背景线条是背景图勒，和本文效果无关。。。 html代码如下： 复制代码代码如下:<div class="content"> <h3 title="专业技能">专业技能</h3> <div class="next"><!--其他内容--></div> </div> 有两种实现方式： 1.box-reflect (属性详情见http://css.doyoe.com/ 属性→边框→box-reflect) 复制代码代码如下:.content h3{ opacity:0.7; font:40px/50px ‘Microsoft yahei‘; -webkit-box-reflect: below 5px -webkit-gr...
新技能传授-哔哔哔哔search类型搜索框，设计师常常会设计一个叉叉图标，表示用户点之久可以清除输入的内容。比方说这个：这是不错的体验！当前现代浏览器中，Chrome浏览器下type=search的输入框会有清除按钮的动态呈现，不过搜索input框尺寸不太好控制(padding无视)；FireFox浏览器貌似任何类型的输入框都无动于衷；IE10+浏览器貌似任何输入框都会出现清除按钮，但是长得略微粗糙了点，设计师同学接受不了。貌似不和谐了，咋办？传...
原文:纯CSS3实现自定义涂鸦风格的边框今天我们要来分享一款基于纯CSS3的自定义边框应用，看上去它像一个Tooltip控件，因为下边框有一个小三角，就像很多地方的引用文本框一样。另外这款CSS3边框是涂鸦风格的，看起来很有个性。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。你也可以在这里查看在线演示下面我们来分享一下实现的方法，主要由HTML代码和CSS代码组成。HTML代码：<div><div><div>CSS3简单实现涂鸦风...
CSS3渐变色生成网站：http://gradients.glrzad.com/ 本文参考：前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3出来以前，想要显示一个渐变的效果，必须要专门制作一个图片。CSS3的出现，使得渐变色得以简单的实现。由于不是所有的浏览器都支持CSS3，所以不是所有的浏览器都能够显现出渐变的效果来。目前，Mozilla内核的(Firefox)和webkit内核的(Safari/Chrome)浏览器支持这一属性。不过，两者对于渐变的语...
1 圆点渐入渐出要点： 缩放和透明度的变化,循环变化<div class="demo1"></div>.demo1{width: 40px;height: 40px;margin: 0 auto;border-radius: 100px;background-color: red;opacity: 1;animation: fadeIn 1s infinite ease-in-out;}@-webkit-keyframes fadeIn{from{transform: scale(0);}to{transform: scale(1);opacity: 0;}}@keyframes fadeIn{from{transform: scale(0);}to{transform: scale(1);opacity: 0;}}2 线条loading图...
代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">html,body {height: 100%;width: 100%;}* {margin: 0;padding: 0;cursor: default;}ul,li {list-style: none;position: relative;}a {text-decoration: none;color: #FFFFFF;}li {min-height: 40px;}#nav {background-color: #000000;width: 210px;height: 100%;color: #FFFFFF;}#nav>ul>li {text-align: center;transition: 300ms...
CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. 第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了. 复制代码代码如下:.box { /* 首先定义要使用的4幅图像为背景图 */ backgrou...
本章给大家介绍css3-动画（animation）效果的实现，让大家了解一个简单的css3动画是如何实现的。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。css3-动画（animation）：具有以下属性：1、animation-name 自定义动画名称2、animation-duration 动画指定需要多少秒或毫秒完成，默认值是0;3、animation-timing-function 动画的时间曲线，linear 匀速， ease 先慢后快，结束前变慢 。4、animation-delay 动画在启动...