saber酱的抱枕

努力变强

03/12
06:56
学习

flex 布局一列固定宽度一列自适应

占据剩余空间
固定

如上面的示例,左右两侧都可以输入文字,它们的宽度也可以改变,但始终保持在一行内,这算是两列自适应吧。如果给右侧设置个固定宽度,那么就是一列固定一列自适应了。

<style>
  .wrap {
    display: flex;
    flex-direction: row;  /* 左右排列 */
  }
  .wrap .a {
    flex: 1; /* 默认占满,如果空间不足,该项目将缩小 */
  }
</style>
<div class="wrap">
  <div class="a">占据剩余空间</div>
  <div class="b">固定</div>
</div>

flex 布局一列固定宽度一列自适应

03/8
02:05
学习

CSS3的灰度滤镜grayscale

测试文字测试文字测试文字

有时候网页上需要做一些黑白切换效果,比如分享按钮,原本是灰色的,鼠标放上去的时候再变成彩色的。

传统办法是准备两张图,一张灰色的一张彩色的,用切换图片或者背景定位(background-position)来实现。

在CSS3里就很方便了,只需要准备一张彩色图片,在需要用灰度的时候应用grayscale滤镜即可(并且grayscale滤镜还可以用于文字等其他元素)。

上面效果的代码:

<style>
	.css3_gray{filter: grayscale(100%);transition: all .3s ease;}
	.css3_gray:hover{filter:none;}
</style>
<p style="color:#ef457e;" class="css3_gray">测试文字测试文字测试文字</p>
<img src="/f/fenxiang1.jpg" alt="" class="css3_gray">

兼容性:
各大浏览器均可,除了IE全系列(没错,IE11也不支持css3滤镜)
Read More →

CSS3的灰度滤镜grayscale

07/14
03:53
学习

给WordPress文章里的图片添加放大效果

css3 javascript js scale wordpress 图片放大

昨天我在初音社(www.mikuclub.cn)看到了这个效果,有些地方的图片在鼠标经过时会放大,感觉很棒,整个网页似乎生动了不少,今天我也给自己的网站添加上了这个效果。

首先分析一下原理:在图片外层套了一个容器,这个容器和图片大小一样,设置超出隐藏。然后给图片添加上放大效果就可以了。

不过初音社应用这个效果的地方的宽高是固定的,但本站文章里的图片宽高是不一致的,所以需要用JavaScript来设定外层容器的宽高。

实现步骤如下:

首先添加css样式:

.img_scale_wrap{overflow: hidden;} /*外层元素*/
.post_t img{transition:1s;} /*设置过渡时间*/
.post_t img[data-scale]:hover{transform: scale(1.2);} /*放大效果*/

然后添加JavaScript代码:

var post_img = document.querySelectorAll(".post_t img");	// 获取所有图片
if (post_img.length > 0) {
    // 给图片添加缩放控制层
    function set_post_img_wrap(img) {
    	if (img.height>=500) {	// 大于一定尺寸的才添加放大效果
    		img.setAttribute("data-scale", "");	// 添加放大属性
    		var post_img_wrap = document.createElement("div");
    		post_img_wrap.className = "img_scale_wrap";
    		img.parentNode.insertBefore(post_img_wrap, img);
    		post_img_wrap.appendChild(img);
    		post_img_wrap.style.width = img.width + "px";
    		post_img_wrap.style.height = img.height + "px";
    	}
    }
    // 给图片添加事件
    for (var i = post_img.length - 1; i >= 0; i--) {
        if (post_img[i].complete) {
            set_post_img_wrap(post_img[i]);
        } else {
            post_img[i].onload = function() {
                set_post_img_wrap(this);
            }
        }
    }
}

本文的代码也可以用在其他类型的网站上,不只是WordPress里才能用。但是移植时要按自己情况修改css选择器和js选择器。

给WordPress文章里的图片添加放大效果

06/5
13:58
学习

使用CSS美化表单(checkbox、radio)

今天做的网站上有个地方的单选按钮是这样的:

 使用CSS美化表单(checkbox、radio)

这个需要做美化,我找到了一个办法,步骤如下:

1.先把按钮隐藏,然后放一个i标签来伪装成按钮。把我们自己做的按钮图片设置为i标签的背景图。

2.按钮被隐藏起来了,怎么选中/反选按钮的状态呢?这就需要用label标签把按钮、i标签以及文字包裹起来,这样点击i标签和文字就可以设置按钮的选中状态了。

html代码如下:

<label><input type="radio" name="sex" value="男" checked><i></i> 男</label>
<label><input type="radio" name="sex" value="女"><i></i> 女</label>

3.在按钮的选中状态改变后,css怎样能相应的改变图片呢?我原以为要用js来判断选中状态,不曾想css里也有对应的选择器了。

css代码如下:

input[type="radio"] {display:none;} /*隐藏按钮*/
label i {  } /*设置通用样式,如宽高等*/
input[type="radio"] + i {  } /*这里设置未选中时的背景图,内略*/
input[type="radio"]:checked + i {  } /*这里设置选中时的背景图,内略*/

这是什么操作?我查了下,原来这是 :checked 是一个css3的伪类选择器,可以匹配每个选中的输入元素(仅适用于单选按钮或复选框)。

除此之外还有个识别禁用状态的 :disabled 伪类选择器,这次我没有使用。

+号选择器则代表相邻的元素。
Read More →

使用CSS美化表单(checkbox、radio)

05/19
13:46
学习

使用css3动画制作网页底部走动的桌宠

在pc设备上,我的博客底部会有一个saber桌宠走来走去~这个效果大概是三年前博客建立不久就做了,但是当时是用JavaScript的定时器来改变桌宠的位置的。今天我把它用css3动画重做了一遍,效果基本上维持原样。

这次我依然用到了JavaScript,不过JavaScript已经不直接移动桌宠的位置了,它的作用是动态创建animation动画规则,这样桌宠的移动就由css3动画控制了。

其实我改成css3动画本来是想降低我的博客在浏览器里的资源占用,但是改了之后发现效果不明显,看来占用资源大头的另有原因,这个以后再查吧。
Read More →

使用css3动画制作网页底部走动的桌宠

03/8
00:00
学习

使用 ::before 和 ::after 伪元素来制作CSS3动画

我们经常对html元素使用hover选择器来做一些效果,比如当鼠标放在一个a标签上时改变文字颜色:

a{color: #F4A801}  //超链接的文字是橘黄色
a:hover{color: #FF0000}  //当鼠标经过时变成红色

如果加上css3的一些过渡属性就会出现变化的过程,成为简单的css3动画。

但是之前我没想到 ::before 和 ::after 这俩伪元素也可以用类似hover的选择器触发它们的动画。今天见识到了,感觉很棒。

如下效果,当鼠标放到这个按钮上时会在底部展开一条线:

查看更多

这个是怎么做的呢?

按钮是A标签,需要给它设置相对定位和超出隐藏:

a{position: relative;overflow: hidden;}

然后用::before伪元素在底部做一条线,只不过一开始没让这条线显示出来。::before伪元素需要设置绝对定位,这样可以让它位于按钮内部。

最后,当鼠标经过按钮时(hover)改变::before伪元素的css属性,如同文章开头的代码中改变a标签的属性一样,只是写法不同:

a:hover::before{
    /*css属性*/
}

最终实现的代码如下:

<a href="" id="more">查看更多</a>
<style>
	#more{display: inline-block;width: 150px;height: 48px;line-height: 48px;text-align: center;font-size: 20px;color: #fff;text-decoration: none !important;text-shadow:none !important;background: #8EE964;
		/*最后的por和ovh是必须的*/
		position: relative;overflow: hidden;
	}
	#more:before{
	  /*设置初始状态*/
	  content: "";
	  position: absolute;
	  left: 50%;
	  right: 50%;
	  bottom: 0;
	  background: #ff9d2e;
	  height:5px;
	  /*transition-property 设置过渡时要改变的属性 若不设置则为all*/
	  transition-property: left, right;
	  transition-duration: 0.3s;
	  transition-timing-function: ease-out;
	}
	#more:hover:before, #more:focus:before, #more:active:before {
		/*当鼠标经过、或按钮被焦点、被激活时对before的属性进行改变*/
	  	left: 0;
		right: 0;
	}
</style>

ps:
我这次没使用::after伪元素,大家可以按需使用。

伪元素前面写两个冒号是符合标准的写法,写一个冒号是为了兼容比较旧的浏览器,实际使用中写一个或两个均可。

如有需要,也在hover外部定义动画,然后在hover内引用。如:

#more:hover:before, #more:focus:before, #more:active:before {
  	animation:showUnderline .3s forwards;
}
@keyframes showUnderline {
	to{
		left: 0;
		right: 0;
	}
}

注意,@keyframes定义的动画和直接在样式里写的动画有区别:
以鼠标hover时执行动画为例,@keyframes定义的动画,当鼠标离开后没有逐渐恢复至原来状态的过程,而在元素样式内定义的则有。
以本文的按钮为例,@keyframes定义的动画,当鼠标离开按钮后那个底边不会逐渐向中间收缩,而是瞬间就消失了。

使用 ::before 和 ::after 伪元素来制作CSS3动画

11/24
08:00
学习

最近做的一个响应式布局网站

saber

最近做完了一个响应式布局的网站,现在我把它改成了demo站放上来,域名是saber.saber.love

这个网站对IE浏览器最低兼容到IE8。它有首页、频道页、列表页、文章页这四种类型的页面,根据屏幕宽度(以1020px、640px、320px为界限),在不的同宽度范围里会有不同的样式。如果使用pc上的浏览器查看的话,改变窗口宽度(拉动浏览器边框)就能看到不同的效果。

做这个站积累了不少经验,有些在本站也发过文章。这个月到现在为止发的网站相关的文章都是关于此的。

这个站我现在是完整的放上来了,有后台,有数据库。不过我的虚拟主机最多只允许放3个数据库,所以以后我也可能把它的数据库删掉,只留下静态页面╮( ̄▽ ̄)╭

ps:因为没有美工,所以这个站的设计稿也是我做的……所以美感可能比较欠缺……

pps:我的虚拟主机是不是太渣了,纯静态页面打开都时不时要等很久。

最近做的一个响应式布局网站