前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

干货分享!Windows系统或Mac笔记本无线连接投影机实现投屏显示

笔记本电脑和投影机在日常企业会议室的应用发挥着不可替代的作用,小编参观过很多会议室,笔记本电脑和投影机之前的信号传输问题,一直是很多企业用户的痛点,一种是固定一台电脑连接投影机,需要会议时提前通过U盘拷贝到固定电脑进行投影显示,另一种则是直接接入参会人员自带的笔记本电脑,多台电脑轮番投影演示时,需要多次拔插连接笔记本端的信号线,如果笔记本的接口不一致,还得提前准备接口转接器,

Thinkpad笔记本无线连接投影机或电视,会议室应用企业级投屏方案

在小编走访过全国众多会议室中发现,联想Thinkpad笔记本电脑的使用率可以说是比重相当高的,伴随着也就是Windows系统的占使用率也高,和苹果MacOS系统比起来,Windows系统笔记本在商用领域的用户群体更大。

四步CSS3教你搞定小菊花 Loading 动画

作者: Lefex 素燕

转发链接:https://mp.weixin.qq.com/s/0klnoP6M90uU1g2g433swQ

前言

做动画最要的是思路,做多了,动画其实非常简单,我们今天来实现一个小菊花加载动画:

做动画的关键一步是「拆分」,这张图中包含了 12 根「小柱子」,每根小柱子的透明度不一样,让这 12 根「小柱子」旋转起来,就构成了整个动画:

CSS3线性渐变、阴影、缩放实现动画下雨效果

点击右上方红色按钮关注“web秀”,让你真正秀起来

前言

好雨知时节,当春乃发生。 随风潜入夜,润物细无声。

春节已经过去,新的一年刚刚开始,小伙伴们,今年你的目标是什么?定个小目标,挣它一个亿?分享一下我的目标,是让大家的web前端能力,更上一层楼。

下面进入主题,看下图:

这个动画效果,如果让你来做,你会选择什么方式?相信很多小伙伴都会用gif图片。其实用css实现也很简单。

手把手教你CSS grid布局「香」(cssdiv布局)


作者:lulu_up

转发链接:https://segmentfault.com/u/lulu_up

最终对图如下:

一. 到底能不能用在工程??(兼容性)

纯CSS实现『斑马纹理投影文字』(斑马的底纹)

效果展示


思路分析

层级思路

从展示的效果可以猜到这个效果由3层文字组成。

  • 表面一层黑色文字
  • 中间一层白色文字
  • 最低的一层是斑马条纹文字

要实现多层文字,我首先想到的是文字投影 text-shadow ,但通常 text-shadow 只能投个纯色出来。

CSS 奇技淫巧你掌握了吗?不知道请赶紧保存

大家都回答的使用 CSS 实现功能的奇淫巧技,我来分享一下 CSS 调试有什么奇淫巧技!

下面我将分享 CSS 开发必知必会的 16 个调试工具技巧:

大多数开发者基本都使用浏览器的开发者工具调试前端,但即使用了好几年 Chrome 的开发者工具,我仍然会遇到从未见过的技巧和功能。

在本回答中,我写了许多在开发者工具中与 CSS 相关的功能和技巧,我认为它们将把你的 CSS 开发水平提升至一个新的台阶。其中一些技巧不仅仅针对 CSS,但是我还是把它们放在了一起。

你所不知道的 CSS 负值技巧与细节

看到有网友使用负的 outline-offset 实现了加号。嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢?

使用负值 outline-offset 实现加号

假设我们有这样一个简单的结构:

<div></div>
div {
 width: 200px; height: 200px;
 outline: 20px solid #000;
 outline-offset: 10px;
}

每天一个CSS小技巧-单侧投影(css单边阴影)

大多数人使用box-shadow的方法是,指定三个长度值和一个颜色值

box-shadow: 2px 3px 4px rgba(0,0,0, .5);

这句话的意思就是:

  1. 以该元素相同的尺寸和位置,画一个rgba(0,0,0, .5)的矩形.
  2. 把它右移2px,向下移3px
  3. 使用高斯模糊算法或类似算法将它进行4px的模糊处理.这在本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过度,近似于模糊半径的两倍,比如在这里就是8px.

每天一个CSS小技巧 - 不规则投影(不规则div)

当我们想给一个矩形或者其他能用border-radius生成的形状加投影时,box-shadow的表现都很棒的。但是,当元素添加可一些伪元素或半透明的装饰之后,border-radius会无视这些。

这是原本的图形:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    div{
      position: relative;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      vertical-align: bottom;
      box-sizing: border-box;
      width: 5.9em;
      height: 5.2em;
      margin: .6em;
      background: #fb3;
      font: 200%/1.6 Baskerville, Palatino, serif;
      text-align: center;
      
    }

    .speech{
      border-radius: .3em;
    }

    .speech:before{
      content: '';
      position: absolute;
      top: 1em;
      right: -.7em;
      width: 0;
      height: 0;
      border: 1em solid transparent;
      border-left-color: #fb3;
      border-right-width: 0;
    }

    .dotted{
      background: transparent;
      border: .3em dotted #fb3;
    }

    .cutout {
      border: .5em solid #58a;
      border-image: 1 url('data:image/svg+xml,\
	                     <svg xmlns="http://www.w3.org/2000/svg"\
		                 width="3" height="3" fill="%23fb3">\
		     	         <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
		     	</svg>');
      background-clip: padding-box;
    }

  </style>

</head>
<body>
  <div class="speech">Speech bubble</div>
  <div class="dotted">Dotted border</div>
  <div class="cutout">Cutout corners</div>
</body>
</html>
<< < 1 2 >>
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言