标签：css实用代码

html5+css3

css3 animation 制作闪烁的箭头

蒙奇·D·撸码客 发布于 2015-10-28 18:16:10

本案例主要实现箭头自相向上滑动，同时变大变透明的效果。一般在手机端起到引导用户向上滑动页面的作用。大概思路就是用到css3动画，动画分解成三个部分：1、位移，2、缩放，3、透明度变换。位移就是bottom或者top、left、right的变化，缩放就是width，height，透...

标签： /

html5+css3

css3透明渐变绘制两端透明渐变的分割线

蒙奇·D·撸码客 发布于 2015-09-22 10:57:26

项目需求：绘制一条两端透明渐变的分割线，样式如下：思路：当然可以用png格式的图片来代替，这样最兼容，但是最好是用css3来制作。用到的是css3的线性渐变属性：linear-gradient与颜色透明属性rgba的结合使用详细的css3代码很简单：.fgx{width:100%...

标签： /

html5+css3

一个关于@media screen and (max-width:)尺寸的问题

蒙奇·D·撸码客 发布于 2015-08-17 14:06:05

相信大家应该都知道使用@mediascreen能够解决移动web开发的多分辨率问题。可以在<head>里引用，也可以写在css里。不过今天我发现一个问题，就是ie浏览器跟其他浏览器对@mediascreen里设定的屏幕尺寸的识别是不一样的。比如@mediascreen...

标签：

html5+css3

css绘制梯形

蒙奇·D·撸码客 发布于 2015-07-16 12:35:32

用css绘制梯形或者其他多边形其实是巧妙利用border来实现的。首先我们先看一个图形其代码是.tixing{height:0;width:0;border-top:red70pxsolid;border-right:blue70pxsolid;border-bottom:gre...

标签：

html5+css3

超强大：用css在单个div上绘图

蒙奇·D·撸码客 发布于 2015-07-14 17:54:30

第一个就是一支绿色的蜡笔。蜡笔由两个基础图形构成：矩形的笔身和三角形的笔尖。我必须实现下面这些点来捕获真实蜡笔的感觉：纸质包装上不同的颜色印刷在包装上的形状和文字条纹暗示蜡笔是圆的明暗效果，暗示圆形的蜡笔和光源首先，我使用Div和background颜色制作蜡笔的身体部分，从顶部...

标签： /

html5+css3

浏览器 CSS Hack 收集

蒙奇·D·撸码客 发布于 2015-06-29 11:15:21

所谓的Hack就是只有特定浏览器才能识别这段hack代码。Hack不是什么好东西，除非没有办法，我们尽量还是不要用着玩意。下面是各个浏览器的CSSHack列表。Firefox浏览器@-moz-documenturl-prefix(){.selector{property:valu...

标签：

html5+css3

css阴影：box-shadow属性解析

蒙奇·D·撸码客 发布于 2015-06-18 10:44:42

box-shadow:h-shadowv-shadowblurspreadcolorinset;h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。color可选。阴影的颜色。请参阅...

标签：

html5+css3

css3背景色渐变

蒙奇·D·撸码客 发布于 2015-06-18 10:11:51

css3背景色渐变难是不难，就是麻烦。不同浏览器用法不同，还有个爱掺和的ie。。。一.Webkit浏览器(1)第一种写法：background:-webkit-gradient(linear,10%10%，100%100%，color-stop(0.14,rgb(255,0,0)...

标签：

html5+css3

css z-index属性不起作用的原因及解决方法

蒙奇·D·撸码客 发布于 2015-06-10 18:46:20

在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。1.第一种情况（z-index无论设置多高都不起作用情况）：这种情况发生的条件有三个：1、父标签...

标签：