欢迎光临
我们一直在努力

纯CSS实现的大型下拉菜单

shanhubei阅读(134)

展示:
http://demo.shanhubei.com/demo/megamenu/
这是一款纯CSS实现的大型下拉菜单。该大型菜单使用HTML和纯CSS代码制作,没有任何js代码,不依赖任意第三方插件。适合用于栏目分类较多的大型网站使用。

HTML结构

该大型菜单的HTML结构如下:

<nav>
  <ul class="container ul-reset">
    <li><a href='#'>Home</a></li>
    <li class='droppable'>
      <a href='#'>Category One</a>
      <div class='mega-menu'>
        <div class="container cf">
          <ul class="ul-reset">
            <h3>Heading 1</h3>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 2</h3>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 3</h3>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
            <li><a href='#'>Category One Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 4</h3>
            <li><img src="http://placehold.it/205x172"></li>
          </ul>
        </div><!-- .container -->
      </div><!-- .mega-menu -->
    </li><!-- .droppable -->
    <li class='droppable'>
      <a href='#'>Category Two</a>
      <div class='mega-menu'>
        <div class="container cf">
          <ul class="ul-reset">
            <h3>Heading 1</h3>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 2</h3>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 3</h3>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 4</h3>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
            <li><a href='#'>Category Two Sublink</a></li>
          </ul><!-- .ul-reset -->
        </div><!-- .container -->
      </div><!-- .mega-menu-->
    </li><!-- .droppable -->
    <li><a href='#'>Category Three</a></li>
    <li><a href='#'>Category Four</a></li>
    <li><a href='#'>Category Five</a></li>
    <li><a href='#'>Category Six</a></li>
  </ul><!-- .container .ul-reset -->
</nav>

CSS

为该大型菜单添加下面的CSS样式:

/* #Resets
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;  }
/* #Universal and Default Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
    background: url(../img/black-wood-small.jpg);
    color: #ddd;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
  line-height: 1;
  margin: 0;
  padding: 0;
  text-align: center;
}
a {text-decoration: none;}
h1 {
  font-size: 40px;
    font-weight: 700;
  margin-bottom: 20px;
    margin-top: 20px;
}
h2 {
  font-size: 15px;
    font-weight: 600;
  margin-bottom: 30px;
    margin-top: 10px;
}
.container {
  margin: auto;
  width: 940px;
}
.ul-reset {
  padding-left: 0;
   margin-top: 0;
   margin-bottom: 0;
  list-style: none;
}
/* #Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {
  background: #424242;
  font-size: 0;
  position: relative;
}
nav > ul > li {
  display: inline-block;
    font-size: 14px;
    padding: 0 15px;
    position: relative;
}
nav > ul > li:first-child {padding-left: 0;}
nav > ul > li:last-child {padding-right: 0;}
nav > ul > li > a {
  color: #fff;
    display: block;
    position: relative;
    padding: 20px 0;
    border-bottom: 3px solid transparent;
}
nav > ul > li:hover > a {
  color: #69aae0; 
    border-bottom: 3px solid #69aae0;
}
/* #Mega Menu Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mega-menu {
  background: #f0f0f0;
    display: none;
    left: 0;
    position: absolute;
    text-align: left;
    width: 100%;
}
.mega-menu h3 {color: #444;}
.mega-menu ul {
  float: left;
    margin-bottom: 20px;
    margin-right: 40px;
    width: 205px;
}
.mega-menu ul:last-child {margin-right: 0;}
.mega-menu a {
  border-bottom: 1px solid #ddd;
    color: #4ea3d8;
    display: block;
    padding: 10px 0;
}
.mega-menu a:hover {color: #2d6a91;}
/* #Droppable Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.droppable {position: static;}
.droppable > a:after {
  content: "\f107";
    font-family: FontAwesome;
    font-size: 12px;
    padding-left: 6px;
    position: relative;
    top: -1px;
}
.droppable:hover .mega-menu {display: block;}
/* #Browser Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cf:before,
.cf:after {
  content: " "; /* 1 */
   display: table; /* 2 */
}
.cf:after {clear: both;}

使用CSS3实现百叶窗式鼠标滑过hover图片动画效果

shanhubei阅读(96)

效果:
http://demo.shanhubei.com/demo/css3hover/
这是一款使用CSS3实现的百叶窗式鼠标滑过hover图片动画效果。该CSS3百叶窗式鼠标hover图片动画效果当鼠标移动到图片上时,通过伪元素来制作方块移动效果,形成百叶窗组合运动效果。
准备
示例基于bootstrap3,所以在页面中引入bootstrap和font-awesome字体图标文件。

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome.min.css">

HTML结构

该CSS3百叶窗式鼠标hover图片动画效果的HTML结构如下:

<div class="container>
    <div class="row>
        <div class="col-md-4 col-sm-6>
            <div class="box>
                <img src="images/img-1.jpg>
                <div class="box-content>
                    <div class="inner-content>
                        <h3 class="title>Williamson</h3>
                        <span class="post>Web Developer</span>
                    </div>
                    <ul class="icon>
                        <li><a href="#><i class="fa fa-search></i></a></li>
                        <li><a href="#><i class="fa fa-link></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6>
            <div class="box>
                <img src="images/img-2.jpg>
                <div class="box-content>
                    <div class="inner-content>
                        <h3 class="title>Kristiana</h3>
                        <span class="post>Web Designer</span>
                    </div>
                    <ul class="icon>
                        <li><a href="#><i class="fa fa-search></i></a></li>
                        <li><a href="#><i class="fa fa-link></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS样式

然后通过下面的CSS代码来实现百叶窗式鼠标hover图片动画效果,直接上代码。

.box{
    text-align: center;
    overflow: hidden;
    position: relative;
}
.box img{
    width: 100%;
    height: auto;
    transform: scale(1.6);
    transition: all 0.3s ease 0s;
}
.box:hover img{
    filter: grayscale(100%);
    transform: scale(1.2);
}
.box .box-content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: all 0.2s ease 0s;
}
.box:before,
.box:after,
.box .box-content:before,
.box .box-content:after{
    content: "";
    width: 100%;
    height: 25%;
    background: linear-gradient(to right,rgba(0,0,0,0.9),rgba(0,0,0,0.7),transparent,rgba(0,0,0,0.7),rgba(0,0,0,0.9));
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease 0s;
}
.box:before{ transform: translateX(100%); }
.box:after{
    height: 25.1%;
    top: 25%;
    transform: translateX(-100%);
    transition-delay: 0.05s;
}
.box .box-content:before{
    top: 50%;
    transform: translateX(100%);
    transition-delay: 0.1s;
}
.box .box-content:after{
    top: 75%;
    transform: translateX(-100%);
    transition-delay: 0.15s;
}
.box:hover:before,
.box:hover:after,
.box:hover .box-content:before,
.box:hover .box-content:after{ transform: translateX(0); }
.box .inner-content{
    padding: 7px 0;
    text-align: right;
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 2;
    transition: all 0.3s ease 0s;
}
.box .title{
    font-size: 22px;
    font-weight: 700;
    color: #faac01;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 3px 0;
    opacity: 0;
    transform: translateY(150px);
    transition: all 0.4s ease 0s;
}
.box .post{
    display: inline-block;
    padding: 0 5px;
    font-size: 16px;
    font-style: italic;
    color: #fff;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.4s ease 0s;
}
.box:hover .title,
.box:hover .post{
    opacity: 1;
    transform: translate(0, 0);
}
.box .icon{
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    top: -200px;
    left: 10px;
    z-index: 2;
    transition: all 0.4s ease 0.2s;
}
.box:hover .icon{ top: 15px; }
.box .icon li a{
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #faac01;
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
    position: relative;
    transition: all 0.3s ease 0s;
}
.box .icon li a:hover{
    text-decoration: none;
    border-radius: 30%;
    background: #fff;
    color: #faac01;
}
@media only screen and (max-width:990px){
    .box{ margin-bottom: 30px; }
}
@media only screen and (max-width:479px){
    .box .title{ font-size: 18px }
}

纯CSS3打造的lightbox图片弹层效果

shanhubei阅读(102)

效果:
效果示例
perfundo是一款纯CSS3 lightbox插件。使用它可以轻松创建单张或多张图片的弹出lightbox层效果,只需要构建HTML结构,CSS3直接调用,当然也可以和js结合一起使用。
使用方法

HTML结构

在页面中引入perfundo-icons.css文件。

<link href="dist/perfundo.css" rel="stylesheet">
HTML结构
单张图片的HTML结构如下:

<div class="perfundo">
  <style>
  #perfundo-single:target:before{background-image:url(large.jpg);}
  </style>
  <a class="perfundo__link" href="#perfundo-single"> <img src="small.jpg"> </a>
  <div id="perfundo-single" class="perfundo__overlay"> 
    <a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a> 
  </div>
</div>
多张图片的HTML结构如下:

<div class="perfundo">
  <style>#perfundo-img1:target:before{background-image:url(1.jpg);}</style>
  <a class="perfundo__link" href="#perfundo-img1">
    <img src="1.jpg">
  </a>
  <div id="perfundo-img1" class="perfundo__overlay">
    <a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a>
    <a class="perfundo__next perfundo__control" href="#perfundo-img2">Next</a>
  </div>
</div>
 
<div class="perfundo">
  <style>#perfundo-img2:target:before{background-image:url(2.jpg);}</style>
  <a class="perfundo__link" href="#perfundo-img2">
    <img src="2.jpg">
  </a>
  <div id="perfundo-img2" class="perfundo__overlay">
    <a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a>
    <a class="perfundo__next perfundo__control" href="#perfundo-img3">Next</a>
    <a class="perfundo__prev perfundo__control" href="#perfundo-img1">Prev</a>
  </div>
</div>
 
<div class="perfundo">
  <style>#perfundo-img3:target:before{background-image:url(3.jpg);}</style>
  <a class="perfundo__link" href="#perfundo-img3">
    <img src="3.jpg">
  </a>
  <div id="perfundo-img3" class="perfundo__overlay">
    <a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a>
    <a class="perfundo__prev perfundo__control" href="#perfundo-img2">Prev</a>
  </div>
</div>

结合JS的用法

你也可以结合js一起使用。

<!-- Put this inside the <head> section of your HTML. -->
<link rel="stylesheet" href="perfundo.min.css">

<!-- Put this before the closing </body> tag (optionally!). -->
<script src="perfundo.min.js"></script>
<script>
  perfundo('.perfundo');
</script>

您还可以到Github上了解更多有关该效果的使用情况:https://github.com/maoberlehner/perfundo

基于animate动画库的数字增长动画组件

shanhubei阅读(101)

这是一个基于anime动画库的数字增长动画组件,适用于动态图表统计中,可以设置动画效果时长、延时以及基于easing的动画效果。

安装

我们通过npm安装

npm install --save animated-number-vue

应用

<template>
    <animated-number 
    :value="value" 
    :formatValue="formatToPrice" 
    :duration="300"
    ></animated-number>
</template>
<script>
import AnimatedNumber from "animated-number-vue";

export default {
  components: {
    AnimatedNumber
  },
  data() {
    return {
      value: 1000
    }
  },
  methods: {
    formatToPrice(value) {
      return `$ ${value.toFixed(2)}`;
    }
  }
};
</script>

组件参数
只有value属性是必须的,其他选项可选。

属性 类型 说明
value Number, String 用于动画效果的数值
duration Number 动画效果时长
delay Number 动画效果延时
easing String 动画效果easing function
更多使用说明请查看项目地址:https://github.com/Leocardoso94/animated-number-vue

Html5+Jquery+css3发光动画字体特性

shanhubei阅读(101)

实现原理

1、加载了谷歌的漂亮的公共字体库。
2、加载jquery-1.11.0.min.js
3、设置css3动画特性。

Html结构

<div class="zzsc-content">
	<div class="first_neon">Enjoy NEON</div>
	<div class="second_neon">Enjoy NEON</div>
	<div class="third_neon">Enjoy NEON</div>
</div>

CSS代码

.first_neon {
    background: none repeat scroll 0 0 #000000;
    border: 1px solid;
    border-radius: 15px;
    color: #FFFFFF;
    cursor: pointer;
    float: left;
    font-family:"Warnes";
    margin: auto;
    padding: 26px 10px;
    text-align: center;
    text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE;
    transition: text-shadow 0.5s ease 0s;
    width: 250px;
}
 
.first_neon:hover {
    text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #00FFFF, 0 0 70px #00FFFF, 0 0 80px #00FFFF, 0 0 100px #00FFFF;
}
 
.second_neon {
    border: 1px solid;
    border-radius: 10px;
    color: #FFFFFF;
    cursor: pointer;
    display: table-cell;
    float: left;
    font-family:"Zeyada";
    margin-left: 20px;
	transition: text-shadow 0.5s ease 0s;
    padding: 45px 25px;
    text-align: center;
    text-shadow: 0 0 10px #FFFFFF, 0 0 15px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #008000, 0 0 70px #008000, 0 0 80px #008000, 0 0 100px #008000;
    width: 250px;
}
.second_neon:hover {
    text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FFFF00, 0 0 70px #FFFF00, 0 0 80px #FFFF00, 0 0 100px #FFFF00;
}
.third_neon {
    border: 1px solid;
    border-radius: 10px;
    color: #FFFFFF;
    cursor: pointer;
    display: table-cell;
    float: left;
    font-family:"Princess Sofia";
    margin-left: 20px;
	transition: text-shadow 0.5s ease 0s;
	padding: 13px 25px;
    text-align: center;
    text-shadow: 0 0 10px #FFFFFF, 0 0 15px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #00FFFF, 0 0 70px #00FFFF, 0 0 80px #00FFFF, 0 0 100px #00FFFF;
    width: 250px;
}
 
.third_neon:hover {
    text-shadow: 0 0 6px #FFFFFF, 0 0 15px #FFFFFF, 0 0 25px #FFFFFF, 0 0 40px #7FFF00, 0 0 70px #7FFF00, 0 0 80px #7FFF00, 0 0 100px #7FFF00;
}

完整代码:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery/CSS3 special effects DEMO演示</title>

<link rel="stylesheet" type="text/css" href="static/zzsc-demo.css" />
<link rel="stylesheet" type="text/css" href="static/normalize.css" />
<link type="text/css" rel="stylesheet" href="static/style.css" />
<link async href="http://fonts.googleapis.com/css?family=Warnes" rel="stylesheet" type="text/css"/>
<link async href="http://fonts.googleapis.com/css?family=Zeyada" rel="stylesheet" type="text/css"/>
<link async href="http://fonts.googleapis.com/css?family=Princess%20Sofia" rel="stylesheet" type="text/css"/>

</head>
<body>
<div class="zzsc-content">
	<div class="first_neon">Enjoy NEON</div>
	<div class="second_neon">Enjoy NEON</div>
	<div class="third_neon">Enjoy NEON</div>
</div>
	
<script src="static/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="static/neon_text.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.first_neon').neonText();
		$('.second_neon').neonText({
			textColor:'white',
			textSize:'40pt',
			neonHighlight:'white',
			neonHighlightColor:'#008000',
			neonHighlightHover:'#FFFF00',
			neonFontHover:'white'
		});
		$('.third_neon').neonText({
			textColor:'white',
			textSize:'40pt',
			neonHighlight:'white',
			neonHighlightColor:'#00FFFF',
			neonHighlightHover:'#7FFF00',
			neonFontHover:'white'
		});
	});
</script>

</body>
</html>

效果:http://demo.shanhubei.com/demo/special-effects/

了解@media与@media screen

shanhubei阅读(150)

在互联网的通知的今天,在移动端充斥我们生活的今天, 做一个自适应的网站是我们不二的选择,那么我们就学会不同屏幕下的布局,那么我们就必须了解@media与@media screen

了解Media Queries

Media Queries,其作用就是允许添加表达式用以媒体查询,以此来选择不同的样式表,从而自动适应不同的屏幕分辨率。

css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS,我们不去讨论。

css3的@media属性在CSS3里面已经演变成一种 media queries(媒体查询/匹配)了,在CSS3里面,可以用查询语句来匹配各种类型的屏幕。

@media与@media screen区别

@media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,那么就用@media ,否则,就用@media screen。

不过这只是笼统的做法,其实如果把“screen”换为“print”,写为@media print,那么该css就可用到打印设备上了,但要注意,@media print声明的css只能在打印设备上有效。

Media Queries工作方式:

在media属性里:

● screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
● and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
● (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media features部分

1、种是直接在link中判断设备的尺寸,然后引用不同的css文件:

意思是当屏幕的宽度大于等于400px的时候,应用styleA.css
“`
“`
意思是当屏幕的宽度大于600小于800时,应用styleB.css

2、另一种方式,即是直接写在 style 标签里:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

写法是前面加@media,其它跟link里的media属性相同。

Media使用说明举例

1、前端响应式布局最出名的框架莫过于 Bootstrap

下面我们看看min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢,那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768,这里有等于,所以我们判断更小的设备用@media (max-width: 767px)这边表示<=767就不会有冲突了。

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
 
/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
 
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

2、自适应代码

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序,如果你把@media (min-width: 768px)写在了下面那么就是错误的!!!
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

3、高级的混合应用

 @media screen and (min-width:1200px){} 
 @media screen and (min-width: 960px) and (max-width: 1199px) {  }
 @media screen and (min-width: 768px) and (max-width: 959px) {  }
 @media only screen and (min-width: 480px) and (max-width: 767px){  } 
 @media only screen and (max-width: 479px) {  }
/* Large desktop */
@media (min-width: 1200px) { ... } 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... } 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... } 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

基于视窗宽度的媒体查询断点设置

前提设置body的字体为100%。其具有一个简单的计算公式:100% = 16px = 1em = 14pt

/*Viewport = 1920px*/
@media screen and (max-width: 120em){}
/*Viewport = 1680px*/
@media screen and (max-width: 105em){}
/*Viewport = 1400px*/
@media screen and (max-width: 87.5em){}
/*Viewport = 1200px*/
@media screen and (max-width: 75em){}
/*Viewport = 1024px*/
@media screen and (max-width: 64em){}
/*Viewport = 960px*/
@media screen and (max-width: 60em){}
/*Viewport = 800px*/
@media screen and (max-width : 50em){}
/*Viewport = 768px*/
@media screen and (max-width : 48em){}
/*Viewport = 600px*/
@media screen and (max-width: 37.5em){}
/*Viewport = 480px*/
@media screen and (max-width: 30em){}
/*Viewport = 320px*/
@media screen and (max-width: 20em){}
/*Viewport = 240px*/
@media screen and (max-width: 15em){}
/*
High Resolution/Retina Display Media Queries
*/
/*Pixel Density 3*/
@media(-webkit-min-device-pixel-ratio: 3),(min-resolution: 192dpi){}
/*Pixel Density 2*/
@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){}
/*Pixel Density 1.5*/
@media(-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 124.8dpi){}
/*Pixel Density 1.25*/
@media(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi){}
/*
Printed Style Media Queries
*/
/*Print Resolution 300 dpi*/
@media print and (min-resolution: 300dpi){}
/*Print Resolution 144 dpi*/
@media print and (min-resolution:144dpi){}
/*Print Resolution 96 dpi*/
@media print and (min-resolution:96dpi){}
/*Print Resolution 72 dpi*/
@media print and (resolution:72dpi){}

Less还是Sass,Stylus我们到底选择谁

shanhubei阅读(124)

做前端 处理,那CSS是你的特长,随着工程的增大,CSS的预处理越来越重要,或者我们要维护我们的css,工作会越来越困难,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念这叫要我们选择一个预处理工具来 编译我们的css。

less

本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。像著名的Bootstrap框架3.0+前都是使用Less的,下面是一个简单的例子:
Less文件

@color: #4D926F; 
 #header { 
  color: @color; 
 } 
 h2 { 
  color: @color; 
 }

编译后Css文件

#header { 
  color: #4D926F; 
 } 
 h2 { 
  color: #4D926F; 
 }

从上面的例子可以看出,学习 LESS 非常容易,只要你了解 CSS 基础就可以很容易上手。
LESS 可以直接在客户端使用,也可以在服务器端使用。在实际项目开发中,我们更推荐使用第三种方式,将 LESS 文件编译生成静态 CSS 文件,并在 HTML 文档中应用。

Sass

sass是最早的css预处理语言,有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受,所以使用率不高,不过由于其强大的功能和Ruby on Rails 的大力推动,逐渐被更多开发者使用。
sass是采用的Ruby语言编写的一款css预处理语言,它诞生于2007年,是最早成熟css预处理语言。最初它是为了配合haml而设计的,因此有着和haml一样的缩进式风格。
sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的css代码,这一代的sass也被称为scss。

变量
sass中可以定义变量,方便统一修改和维护。

//sass style
//-----------------------------------
$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;
body {
  font-family: $fontStack;
  color: $primaryColor;
}
//css style
//-----------------------------------
body {
  font-family: Helvetica, sans-serif;
  color: #333;
}

嵌套
sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。

//sass style
//-----------------------------------
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
//css style
//-----------------------------------
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

导入
sass中如导入其他sass文件,最后编译为一个css文件,优于纯css的@import

//sass style
//-----------------------------------
// _reset.scss
html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
//sass style
//-----------------------------------
// base.scss 
@import 'reset';
body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}
//css style
//-----------------------------------
html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  background-color: #efefef;
  font-size: 100% Helvet

mixin
sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}
//css style
//-----------------------------------
.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

扩展/继承
sass可通过@extend来实现代码组合声明,使代码更加优越简洁。

//sass style
//-----------------------------------
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}
//css style
//-----------------------------------
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

运算
sass可进行简单的加减乘除运算等

//sass style
//-----------------------------------
.container { width: 100%; }
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}
//css style
//-----------------------------------
.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 62.5%;
}
aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

颜色
sass中集成了大量的颜色函数,让变换颜色更加简单。

//sass style
//-----------------------------------
$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}
//css style
//-----------------------------------
a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

Stylus

CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具,LESS, SASS都在这方面做了一些贡献。

Stylus 是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,所以 Stylus 是一种新型语言,可以创建健壮的、动态的、富有表现力的CSS。比较年轻,其本质上做的事情与 SASS/LESS 等类似,应该是有很多借鉴,所以近似脚本的方式去写CSS代码。

Stylus默认使用 .styl 的作为文件扩展名,支持多样性的CSS语法。

Stylus功能上更为强壮,和js联系更加紧密。

小结
1、LESS环境较Sass简单
2、有同学说LESS使用较Sass简单
3、相对而言,国内前端团队使用LESS的同学会略多于Sass
4、从功能出发,Sass较LESS略强大一些
5、Sass在市面上有一些成熟的框架,比如说Compass,而且有很多框架也在使用Sass,比如说Foundation
6、就国外讨论的热度来说,Sass绝对优于LESS
7、就学习教程来说,Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网,而Sass的中文教程,慢慢在国内也较为普遍。
8、Bootstrap4.0已结弃用了less改用Sass了。
最后,你自己使用哪一种,不应该根据国内对哪一种使用的人多来做出发参考,而是哪种更适合自己的团队。

纯css调节透明度

shanhubei阅读(94)

很不错的CSS透明效果,本实例是用CSS控制外层DIV不透明,而内层DIV透明,这样实现的效果是意想不到的,还不错吧,其实代码也是很简单的,也很好理解,主要是div2层用了CSS的滤镜,并把它的显示层数设置的高一点,这里设置为100,背景颜色设置为白色,效果更好一点。

源码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>半透明div</title>
<style>
#div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(/jscss/demoimg/wall3.jpg);}
#div2 { height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff;}
</style>
</head>
<body>
<div id="div1"> 
 <div style="padding:20px;"><div id="div2">这里是透明的DIV</div></div>
</div>
</body>
</html>

CSS的属性选择器lang使用说明

shanhubei阅读(90)

CSS 2 引入了属性选择器,属性选择器可以根据元素的属性及属性值来选择元素,今天我们来学习特定属性选择器lang的使用方法。

css :lang选择器定义用法介绍
lang 向带有指定 lang 属性开始的元素添加样式。

注意: 值是整个单词,单独像lang=“en”,或者使用连字符(-)如lang =“en-us”。

语法:

:lang {
   style:属性;
}

lang使用举例:
每个

元素lang属性值等于”abstract”背景颜色设置为red.

p:lang(abstract)
{ 
background:red;
}

请再看下面的例子:

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:

<p lang="en">段落en</p>
<p lang="en-us">段落en-us</p>
<p lang="en-au">段落en-au</p>
<p lang="fr">段落fr</p>
<p lang="cy-en">段落xy-en</p>

lang完整例子

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        :lang(en) { 
         color:blue;  
        } 
        </style> 
    </head> 
    <body> 
        <a lang="en-us" href="http://www.phpstudy.net"> phpstudy </a> 
        <a lang="en-uk">HTML</a>
        <a lang="en" href="http://www.shanhubei.com">珊瑚贝</a> 
    </body> 
</html>

纯css实现图片放大

shanhubei阅读(90)

图片 鼠标指向时放大功能,便于产品展示,可以通过Js,jquery来实现,但最好的方法还是纯css来实现,下面的代码轻松实现了这一功能。

1、html结构

<ul>
  <li><a  href=""><img scr="/images/1.jpg"></a></li>
  <li><a  href=""><img scr="/images/2.jpg"></a></li>
  <li><a  href=""><img scr="/images/3.jpg"></a></li>
  <li><a> href=""<img scr="/images/4.jpg"></a></li>

2、Css

img{
      display: block;  
      width:100%;   
      transform: scale(1);  
      transition: all 1s ease 0s;  
      -webkit-transform: scale(1);  
      -webkit-transform: all 1s ease 0s; 
      -webkit-transform-origin:50% 50%; 
      transform-origin:50% 50%;
      overflow:hidden;
     }
a:hover img{
	transform: scale(1.3);  
        transition: all 1s ease 0s;  
        -webkit-transform: all 1s ease 0s;  
        -webkit-transform: scale(1.3); /*放大1.3倍*/
	transition-duration: .5s;
	overflow:hidden;
	}