Canvas应用：图片压缩算法实现前端图片压缩应用场景前端页面限制用户只可以上传5MB大小的图片前端在接受到用户上传的图片之后，服务器只允许上传1MB大小的图片，此时需要前端将图片先进行压缩，压缩之后再调用图片上传接口将图片上传第一步：创建input元素，监听input表单域的change事件创建一个input元素，并且设置HTML5新增的type为file监听input元素的change事件，并通过e.target.files拿到用户上传的文件列表数组获取用户上传的...
这次给大家带来前端技术实现文本文字纹理叠加，前端技术实现文本文字纹理叠加的注意事项有哪些，下面就是实战案例，一起来看一下。本文这里所说的叠加，就是混合模式中的叠加，也就是说，本文要实现的效果是，文字本身的颜色和纹理进行叠加，而非直接填充纹理。CSS, SVG和canvas都能实现类似的效果，我们一个一个来看一下。一、CSS/CSS3实现文本纹理叠加HTML和CSS代码如下：<h2 class="pattern-overlay"><span data-text="CSS纹理叠...
我们曾经被几个读者问到同一个问题——如何将照片传到网上。我认为这是一个很有趣的问题，我决定在本文中解决掉这个问题。但是，我认为只是单纯的实现上传功能可能会有些单调，所以我决定添加一个很重要的元素—剪切功能。相信这样应该更有魅力的说。 html 第一步，我们先画一个表头 现在再描绘主体部分 CSS.bheader { background-color: #DDDDDD; border-radius: 10px 10px 0 0; paddin...
标签云是博客的标配功能，能够清晰的呈现博客的各个关键词和主题。在这个效果中，您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果。 作为实验项目，使用了 CSS3 渐变，阴影和最重要的的 CSS 变换特性。 效果演示 源码下载
在上一篇的文章中，总结了下用纯CSS制作圆角矩形框的知识，并且最终做出来自己想要的那个样式。在网页设计中，还有很多的可变宽度的圆角矩形框的使用，一些网页不可能用一些固定宽度的圆角矩形框来显示内容，可变宽度的圆角矩形框的使用地位是很重要的，那么现在来扩展下思维，能不能用纯CSS的技术来制作可变宽度的圆角矩形框呢？答案就是可以，而且非常简单。 在牛腩视频中，牛腩老师是通过截取一个现成的图片，然后通过5部分...
当下H5火的程度不用多说，各种各样的创意、效果层出不穷，然后关于H5技术实现文章却是很少，让很多同学望而生畏，摸不着头脑。本文从多屏CSS动画技术实现入手，相信能够给大家在H5技术实现上带来些思路。 当下css3应用已经相当广泛，其中重要成员之一就是css3动画。并且，随着CSS动画的逐渐深入与普及，更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动： 感谢shirley帮忙录制上面的视...
使用html+css+javaScript技术实现以下功能，输入起始数和终止数（注意：起始数小于终止数），计算其累加和，如下图所示：这里先说一下思路： 1，边框是两种颜色，而且是两层，说明至少要用两个div嵌套，而且设置边框颜色的时候需要分上下左右，不能直接一个border全部设置。 2，第一点说了两个div区块，所以两者的位置最好用父相子绝的模式固定位置 3，js简单操作DOM就能实现功能，注意的点是起始数要小于终止数，还有题目并没有说...