前军教程网

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

CSS 伪元素:用来创建文档树之外的抽象元素

什么是伪元素

让我们先看看W3的伪元素官方定义:

伪元素用来创建HTML文档语言指定之外文档树的抽象层。比如HTML没有提供文档元素内容的首字母或第一行的访问机制。CSS伪元素允许作者引用这些除此之外无法访问的信息。伪元素还提供一种方法来引用不存在于文档中的内容。(比如,::before 和 ::after )。

一个伪元素由2个冒号(::)加上伪元素的名字所定义。

:: 标记是CSS2.1新规范中引入的,用来区分伪类(pseudo-classes)和伪元素(pseudo-elements)。但出于现有样式表兼容性原因,用户代理必须也能支持CSS1和CSS2中引入的单冒号伪元素标记(也就是说,:first-line, :first-letter, :before 和 :after)。但是CSS2.1及以后版本新引入的伪元素不支持这种兼容语法。

一张图让你快速掌握CSS3倒影(css 倒影)

示例图片

在CSS3之前,想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式,而CSS3问世之后,想要实现这样的效果变得非常简单,只需一个CSS3属性就可以轻松实现了。

这就是今天所要提到的box-reflect属性。

咱们先看看W3C给出的box-reflect语法:

box-reflect:none | <direction> <offset>? <mask-box-image>? (?代表可缺省,也就是后俩属性可有可无)

用css实现内凹型箭头#css(css内凹矩形)

关于用 css 实现特定箭头的探讨!

1. 我以前的视频中有一期介绍用 css 实现这样的箭头,有同学提出看到过这样的箭头,那这个箭头如何实现呢?它这里是圆润且有弧度的,是内凹型弧度,与圆角效果不同,弯曲方向也不一样。

2. 这种箭头如何实现?先把这一块单独拿出,想到的实现方式是正方形加圆,这样能否拼凑出图案?主要要这一块图案,但仔细实现会发现有问题,就是单独这一块颜色不好设置。

CSS制作下雨动画效果教程,你学会了吗?

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

前言

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

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

下面进入主题,看下图:

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

这33个超级好用的CSS选择器,你可能见都没见过

作者:陈大鱼头

转发链接:https://mp.weixin.qq.com/s/tLD4Rfr2c-MAXXtbC7nEwQ

前言

CSS 选择器是 CSS 世界中非常重要的一环。

在 CSS 2 之后,所有的 CSS 属性都是按模块去维护的。

CSS 选择器也是如此,然而如今也已经发布了第四版 —— CSS Selectors Level 4 ,这一版最早的草案发布于2011年09月29日,最后更新是2018年11月21日。

干货分享!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

最终对图如下:

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

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言