Css - web秀

综合小程序服务器面试工具类ThreeJs比特币JavaScriptCssVue 展开

7月前

使用 CSS prefers-* 规范，提升网站的可访问性与健壮性

使用 CSS prefers-* 规范，提升网站的可访问性与健壮性

文本将介绍CSS媒体查询中新增的几个特性功能：prefers-reduced-motionprefers-color-schemeprefers-contrastprefers-reduced-transparencyprefers-reduced-data利用好它们，能够很好的提升我们网站的健壮性与可访问性！互联网发展到今天，对于我们的前端而言，我们的关注点不应该仅仅是我们产出的页面能不能用，也需要更多的去关注我们的页面好不好用，有没有照顾到更多的用户群体？要知道，截至2020年12月，中国网民规模达9

75 0 0

1年前

什么是响应式设计？响应式设计的基本原理是什么？如何做？

什么是响应式设计？响应式设计的基本原理是什么？如何做？

一、是什么响应式网站设计（ResponsiveWebdesign）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整描述响应式界面最著名的一句话就是“Contentislikewater”大白话便是“如果将屏幕看作容器，那么内容就像水一样”响应式网站常见特点：同时适配PC+平板+手机等标签导航在接近手持终端设备时改变为经典的抽屉式导航网站的布局会根据视口来调整模块的大小和位置二、实现方式响应式设计的基本原理是通过媒体查询检测不同的设备

508 0 0

2年前

CSS 3D世界，3D 透视照片墙

CSS 3D世界，3D 透视照片墙

有了前面2章内容，大家应该对CSS3D的构建，都有了一定认知了，动手能力强的小伙伴可能已经开始自己做好看的效果了。今天我们就来滚固一下前面学的知识，下面有一个"3D照片墙"示例来加深一下我们所学的知识。结构用一个容器div.photo，装六个面<divclass="photo"><divclass="example"></div><divclass="example"></div><divclass="example"></di

3042 58 0

7月前

3D 穿梭效果？使用 CSS 轻松搞定

3D 穿梭效果？使用 CSS 轻松搞定

背景周末在家习惯性登陆Apex，准备玩几盘。在登陆加速器的过程中，发现加速器到期了。我一直用的腾讯网游加速器，然而点击充值按钮，提示最近客户端升级改造，暂不支持充值（这个操作把我震惊了~）。只能转头下载网易UU加速器。打开UU加速器首页，映入眼帘的是这样一幅画面：瞬间，被它这个背景图吸引。出于对CSS的敏感，盲猜了一波这个用CSS实现的，至少也应该是Canvas。打开控制台，稍微有点点失望，居然是一个.mp4文件：再看看Network面板，这个.mp4文件居然需要3.5M？emm，瞬间不想打游戏了。这么个

61 0 0

4年前

CSS实现html指令式Tips文字提示

CSS实现html指令式Tips文字提示

前言一个小小tips，在网页中能有意想不到的效果，能很好的引导客户，说明功能等等。html代码<divclass="container"><divclass="top"><buttontooltip="上左">上左</button><buttontooltip="上边"placement="top">上边</button><buttontooltip="上右"placement="top-right">上右</but

16514 540 0

3年前

CSS3 filter滤镜详细介绍及示例

CSS3 filter滤镜详细介绍及示例

前言filter是css3的一个属性，大家应该都很少用到，很多人只是知道有这个属性。Webkit率先支持了这几个功能，不过现在大部分浏览器也都做了兼容性，下面大家就一起来学习吧。参数语法现在规范中支持的效果有：参数描述取值grayscale灰度值为0-1之间的小数sepia褐色值为0-1之间的小数saturate饱和度值为numhue-rotate色相旋转值为angleinvert反色值为0-1之间的小数opacity透明度值为0-1之间的小数brightness亮度值为0-1之间的小数...

10598 477 0

1年前

CSS3新增了哪些新特性？

CSS3新增了哪些新特性？

CSS3新增了哪些新特性？一、是什么css，即层叠样式表（CascadingStyleSheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的而CSS3也增加了很多新特性，为开发带来了更佳的开发体验二、选择器css3中新增了一些选择器，主要为如下图所示：三、新样式边框css3新增了三个边框属性，分别是：border-radius：创建圆角边框box-shadow：为元素添加阴影border-image：

460 0 0

1年前

如何实现单行／多行文本溢出的省略样式？

如何实现单行／多行文本溢出的省略样式？

如何实现单行／多行文本溢出的省略样式？一、前言在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号对于文本的溢出，我们可以分成两种形式：单行文本溢出多行文本溢出二、实现方式单行文本溢出省略理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现实现方式也很简单，涉及的css属性有：text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本white-space：设置文字在一行显示，不能

318 0 0

7月前

如何不使用 overflow: hidden 实现 overflow: hidden？

如何不使用 overflow: hidden 实现 overflow: hidden？

一个很有意思的题目。如何不使用overflow:hidden实现overflow:hidden？CSS中overflow定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。而overflow:hidden则会将超出容器范围内的内容剪裁。控制overflow:hidden的方向这源自一个实际的需求，在某个需求当中，要求容器内的内容，在竖直方向上超出容器会被裁剪，而在水平方向上超出容器，则不会被裁剪。类似这样：有意思，第一个想到的解法当然是在上述黄色背景元素本身之外再套用一层父元素，然后父元素才是

47 0 0

1月前

圆角大杀器，使用滤镜构建圆角及波浪效果！

圆角大杀器，使用滤镜构建圆角及波浪效果！

本文，将另辟蹊径，介绍一种使用滤镜去构建圆角的独特方式。首先，我们来看这样一个图形：一个矩形，没什么特别的，代码如下：div{width:200px;height:40px;background-color:#000;}如果，我们现在需要给这个矩形的两端加上圆角，像是这样，该怎么做呢：Soeasy，不过就是加个border-radius而已：div{width:200px;height:40px;+border-radius:40px;background-color:#000;}好，那如果，不再是直线，

32 0 0

下拉加载更多

最新文章