前端

yumefx - 2年前

SVG filter使用

前言 SVG(Scalable Vector Graphics)意为可缩放矢量图形，通过XML格式定义图像，在HTML开发中有广泛的使用。其中，SVG filter(SVG 过滤器)可以用来给图形添加一些特殊效果，例如模糊、阴影、色彩转换等等。相比于CSS的filter和Blend Modes，SVG filter……

来自分类：前端 / 技术

1.45k 0 1 阅读

yumefx - 2年前

CSS3之counter计数器

CSS 前端原创

前言在CSS3之前，只有ul和ol等列表元素中存在计数器，其他元素很难通过CSS实现计数功能。而CSS3之后，通过新增的counter属性，可以实现任意元素的计数。使用以本博客的代码行计数功能为例，代码标签构成方式如下：页面展示效果如下：可以看出，<pre>标签嵌套<span>标签……

来自分类：前端 / 技术

yumefx - 2年前

NPM使用技巧

NPM 前端学习笔记工具转载

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。本文记录一下常用……

来自分类：前端 / 技术

yumefx - 2年前

Flex布局浅析

HTML 前端原创学习笔记

传统的网页布局方案是基于盒子模型，依赖display、position、float等属性，这种布局方式对于特殊的布局来说比较难以实现，例如垂直居中等。 2009年，W3C提出了一种新的方案——Flex布局（CSS FlexBox），也就是弹性布局，用来为盒子模型提供最大的灵活性，成为了移动端Web开发的首选方案。兼容……

来自分类：前端 / 技术

1.45k 0 0 阅读

yumefx - 2年前

clip-path实现部分遮挡

HTML 前端原创

clip-path 直译过来就是裁剪路径，是使用SVG或形状定义一个HTML元素的可见区域的方法。原理类似于Photoshop中的形状工具，通过设置一个封闭的路径实现一种遮罩效果，封闭路径内部的区域正常显示，外部的区域隐藏，从而在方形的图层上绘制出形状各异的几何图形。而在clip-path中，封闭的路径可以来自于外……

来自分类：前端 / 技术

1.41k 0 0 阅读

yumefx - 2年前

网页布局之像素

HTML 前端原创学习笔记

本文想简单介绍一下CSS像素、物理像素、逻辑像素、设备像素比等概念，并记录一下自己对于网页在不同平台的不同设备中的显示效果以及处理逻辑的思考。概念介绍 CSS像素 CSS像素，顾名思义其实就是在网页开发中，用于CSS样式和Javascript代码中的px单位，是一个相对单位，在不同显示设备中可能显示为不同的物理像……

来自分类：前端 / 技术

1.78k 0 1 阅读

yumefx - 2年前

CSS样式表基础（二）

CSS HTML 前端原创学习笔记

这一篇主要说一下网页布局。网页布局的本质，其实就是用CSS来摆放盒子。 CSS提供了三种传统布局方式：普通流（标准流）、浮动、定位。普通流就是标签按照规定好的默认方式顺序排列。浮动（float）浮动可以改变标签的默认排列方式，最典型的应用就是让多个块级元素在一行中排列显示。 div { float: lef……

来自分类：前端 / 技术

yumefx - 2年前

CSS样式表基础（一）

CSS HTML 前端原创学习笔记

CSS和HTML一样，也是一种标记语言，主要用于设置HTML页面中的文本、图片以及版面的显示样式和布局。格式与书写 CSS格式如下：选择器 { 属性: 值; … } 主要有三种书写位置，一种是单独的css文件，叫做外部样式表，然后在html中引入。 <head> … <link rel……

来自分类：前端 / 技术

1.32k 0 0 阅读

SVG filter使用

CSS3之counter计数器

NPM使用技巧

Flex布局浅析

clip-path实现部分遮挡

网页布局之像素

CSS样式表基础（二）

CSS样式表基础（一）

标签云

文章归档