分类目录归档:CSS3 类别

根据宽度选择CSS

自适应站点的核心,就是一套代码可以在任何尺寸屏幕的设备上,恰当的展示信息。如何根据屏幕的宽度来选择性的使用 css,就尤为重要了。

总共有三种方法可以应用媒体查询:

1.样式表链接的媒体查询属性

直接在 HTML文件头部引入以下代码:

<link rel="stylesheet" media="screen and (max-width:500px)" href="1.css" />
<link rel="stylesheet" media="screen and (min-width:501px) and (max-width:599px)" href="2.css" />
<link rel="stylesheet" media="screen and (min-width:600px)" href="3.css" />

(max-width: 500px) 是指:屏幕尺寸 500px,即使用此 css。

(min-width:501px) and (max-width:599px) 是指:501px≤ 屏幕尺寸 ≤599px ,即使用此 css。

(max-width: 600px) 是指:600px≤ 屏幕尺寸,即使用此 css。

演示 Demo

1.css 的背景设置为  bisque 

即 当 屏幕尺寸 ≤500px,为      

2.css 的背景设置为  aquamarine 

即 当 501px ≤ 屏幕尺寸 ≤ 599px,为      

3.css 的背景设置为  aqua 

即 当 600px ≤ 屏幕尺寸,为      

按照代码,可以得到如下效果:

除此之外,还有以下两种方法可以实现。

2.在 @tag 标签嵌入

@media screen and (min-width: 500px) {
  body { background-color: green; }
}

3.在 @import 标签嵌入

@import url("1.css") only screen and (min-width: 500px);

但是因为性能的原因,我们应该避免使用 @import,这是一个代价和优先级都非常高的标签。

在网页设计中,你也要考虑 css 与 @media 的权衡,css引入的多了,HTTP请求次数也会增加,拖累整个网站的加载速度。要根据实际情况,合理的选择方法。

继续阅读根据宽度选择CSS

CSS设置选中文字高亮背景颜色

如果想让网站风格更加统一,有时候你会苦恼于浏览器默认的选中文字的蓝色背景,有时候真的与网站风格不相匹配,所以需要利用CSS来更改并统一显示效果。

在 Windows 中,Internet Explorer 与 Microsoft Edge,或者 Google Chrome等浏览器,都只是默认的蓝色选中背景。

而在 macOS 中,情况能好一些,因为用户可以自定义高亮显示颜色,但这也仅仅在本机上,无法对于所有用户统一的体验。

所以,就要在CSS文件中添加以下代码:(用 #FF9 演示)

::selection {
background:#FF9;  //更改颜色
color:#F00;
}
::-moz-selection {
background:#FF9;  //更改颜色
color:#F00;
}
::-webkit-selection {
background:#FF9;  //更改颜色
color:#F00;
}

选中效果:

继续阅读CSS设置选中文字高亮背景颜色

Apple的0.03em,却让你望其项背

 苹果在工业设计方面,一向是追求极致的,这无可争议。其实,在苹果中,处处都能找到用心的设计,这一次来看看苹果的网页设计是如何折服你的。

在苹果的 OS X EI Capitan 的介绍页面,下面有一句说明:OS_X_El_Capitan_logo_svg

“There’s more to love with every click”

点击 OS X 图标查看 Apple 镜像页面 →

很高兴你没有把 click 认成 dick,这这一定程度上,得益于苹果的用心设计。下面来细细看一下:

OS X EI

苹果非常用心的单独对 click 使用了一个 <span></span> HTML标签独立出来,单独使用CSS调整字符间距,使每一个字符间距增大0.03em,使得你不会将 d 分辨为 cl.

OS X EI3

CSS3修饰代码如下:

apple-osx-ei-css3-code

调整一下,取消掉 click 的0.03em增量,来看看对比的效果:

OS X comparison

我们再来调整为 -0.08,看一下夸张的效果:

OS X EI -0.08

不要在意这小小的0.03em,它可能让别人对你望其项背,这种对于设计一丝不苟的敬业精神,是很值得我们学习的!

继续阅读Apple的0.03em,却让你望其项背

CSS简单滚动条样式

浏览器的默认滚动条发展到今天,已经发展到很简约的风格了,但有时候为了更好的显示效果,我们可以利用CSS代码,简单的修改一下滚动条的样式。

展示效果:Demo

浏览器的支持:

仅支持 Internet Explorer,不支持 Chrome 和 Microsoft Edge

CSS代码规则如下:

先来看一下引入的CSS代码样式的格式:

SCROLLBAR-ARROW-COLOR: color; //箭头颜色
SCROLLBAR-FACE-COLOR: color;  //箭头和滚动条面板颜色
SCROLLBAR-DARKSHADOW-COLOR: color; //滚动条右下方颜色
SCROLLBAR-HIGHLIGHT-COLOR: color;  //滚动条左上方颜色
SCROLLBAR-3DLIGHT-COLOR: color;  //滚动条边缘左上颜色
SCROLLBAR-SHADOW-COLOR: color;   //滚动条边缘右下颜色
SCROLLBAR-TRACK-COLOR: color;  //滚动区域底层颜色

我们很容易可以看出每一条声明规则应用的范围;同时,还可以使用Scrollbar呈现出代码和结果:

scrollbar-settings

继续阅读CSS简单滚动条样式

使用视频做网页背景

使用简短的视频来替换以往的静态图片,可以使信息展现的更为丰富,也能给人们留下比较深刻的印象。

展示效果:Demogithub_link

 

注意考虑因素:
1) 视频应该设置为autoplay,但默认情况下应设为静音,或者不应该包括声音2) 视频应该显示是回落至浏览器不支持 HTML5 的静态背景图像的图像占位符。占位符图像也将在移动设备上使用背景,因为大多数的手机和平板电脑都不支持autoplay。Apple也在 WWDC17上 禁用了autoplay 属性。

3) 长度需要注意:太短视频能感觉到重复(像大多数这类的视频将设置为循环播放),时间太长而成为叙事归本身,因此值得要一个单独的设计元素。建议大约12-30秒的时长。

4) 可访问性是很重要:在视频上放置任何文本应在高对比度。用户应当能够轻松访问到 UI 控件以暂停视频;理想情况下,视频播放所要经过只有一次。 

5) 带宽是一个大问题视频需要较小,而且尽可能有效地压缩。同时,它需要在不同的设备和他们相关的屏幕之间进行缩放。尽量保持视频大小小于 5 MB,理想情况下500KB左右为佳。 

一、使用HTML5代码插入视频

<video autoplay loop poster="images/moon.jpg" id="moon"> 
<!--id保持一致-->
<source src="images/moon.webm" type="video/webm">
<source src="images/moon.mp4" type="video/mp4"> </video>

 二、全屏视频代码,引入CSS中

video#moon { /*id保持一致*/
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

注意:

对于不支持 HTML5 的浏览器,使用判断:

<!--[if lt IE 9]> 
<script> 
     document.createElement('video'); 
</script>
<![endif]-->

 之后还需将 video 标签插入到CSS中,来声明 video 是元素:

video { display: block; }

三、对于移动端的优化

特别是 iOS系统的设备,会拒绝HTML5视频的播放,需要用图片缩放来处理

将以下代码插入至CSS:

@media screen and (max-device-width: 800px) {
    html {
         background: url(moon.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}

这样就完成视频做网页背景的任务了!

继续阅读使用视频做网页背景