写点什么

CSS小技巧

0 人感兴趣 · 22 次引用

  • 最新
  • 推荐
https://static001.geekbang.org/infoq/6f/6f3f9fce29556785604636e1c6b00cbe.jpeg?x-oss-process=image/resize,w_416,h_234

CSS 技巧 | 前端开发需要知道的 10 个 CSS 技巧

用户头像
devpoint6 月 14 日

个人觉得 CSS 是每个前端开发人员都必须掌握的基础,以完成相应的交互和终端设备的响应。在项目开发中,有些容易被忽略的小问题带来项目后期的胶水代码。本文总结一些项目开发中CSS的10个小技巧。

CSS 学习笔记 (一) 选择器

用户头像
U+26474 月 13 日

元素选择器是最基本的选择器。也是最简单的选择器。可以选择某个或者某些标签

https://static001.geekbang.org/infoq/76/7688346f82df69f36a4b1c0b44cc36f0.jpeg?x-oss-process=image/resize,w_416,h_234

【CSS】css 控制鼠标点击事件(pointer-events)

用户头像
学习委员2 月 3 日

pointer-events  是CSS3的一个属性,支持的值非常多,其中大部分都是和SVG有关。对于前端日常开发而言,只要了解 none 这个值就已经够我们玩一段时间了。

https://static001.geekbang.org/infoq/33/3359540ae8bac1ebbf475b676ab0ab56.jpeg?x-oss-process=image/resize,w_416,h_234

【CSS】不规则阴影

用户头像
学习委员1 月 28 日

利用css3的滤镜(filter)实现。纯css,不需要插图!

https://static001.geekbang.org/infoq/36/363b54e562b6ba486464eb95b6be2b84.jpeg?x-oss-process=image/resize,w_416,h_234

CSS 实现数据统计

用户头像
学习委员1 月 28 日

使用CSS也能给后台提交信息。

https://static001.geekbang.org/infoq/27/27c905bb9f92a045f09ab1ca104768fd.jpeg?x-oss-process=image/resize,w_416,h_234

【Skeleton】按钮

用户头像
学习委员1 月 27 日

Skeleton - 一个只有400多行代码的CSS库

https://static001.geekbang.org/infoq/6b/6b7d143bf9227bcf8155fc5ae3b94552.jpeg?x-oss-process=image/resize,w_416,h_234

【纯 CSS】画 多国国旗

用户头像
学习委员1 月 26 日

分享一个纯CSS实现多国国旗的网站:CSS Flags

https://static001.geekbang.org/infoq/d2/d206929c935ea3a76990d20bdd93e5ee.jpeg?x-oss-process=image/resize,w_416,h_234

【CSS】文字毛玻璃效果(简单版)

用户头像
学习委员1 月 25 日

用文本阴影和字体透明颜色就可以做出毛玻璃的效果。这是一个纯css的方式。

https://static001.geekbang.org/infoq/39/39bb4a1ed79e33b0b1536fb3b1b113a2.jpeg?x-oss-process=image/resize,w_416,h_234

【CSS】页面顶部阴影

用户头像
学习委员1 月 24 日

纯css,利用伪元素实现。不需要使用图片。

https://static001.geekbang.org/infoq/9f/9f66a651500b9c9e93e0a0601a1fd3e0.jpeg?x-oss-process=image/resize,w_416,h_234

【CSS】格仔背景

用户头像
学习委员1 月 24 日

主要通过 background-image 的渐变来实现这种效果,用2个三角形合并成一个正方形。

https://static001.geekbang.org/infoq/99/9908fe08f6d7452a6977190ea8428479.jpeg?x-oss-process=image/resize,w_416,h_234

【CSS】红砖背景

用户头像
学习委员1 月 23 日

主要是通过两个不同颜色的三角形,合成一个长方形。再通过做2层这种长方形,调整好相应的位置。

https://static001.geekbang.org/infoq/1b/1b77cc512d9ad8668832bb09c07e421e.jpeg?x-oss-process=image/resize,w_416,h_234

【CSS】内圆角(box-shadow、outline)

用户头像
学习委员1 月 22 日

box-shadow 和 outline 的使用方法:【CSS】多重边框(box-shadow、outline)

https://static001.geekbang.org/infoq/7c/7c14ae47ed4fb73c3e241c493aac87b6.jpeg?x-oss-process=image/resize,w_416,h_234

【CSS】带边框的三角形(position)

用户头像
学习委员1 月 21 日

思路是将2个三角形叠加起来,外层的三角形稍微大一些。

https://static001.geekbang.org/infoq/d5/d5c1a4e26cdd59acf167875c54e7137a.jpeg?x-oss-process=image/resize,w_416,h_234

【CSS】画三角形 (8 个角度及其原理)

用户头像
学习委员1 月 20 日

用CSS画三角形,利用border属性,把一个边设置成看到的样式,其他两边或三边用transparent方法变成透明。

https://static001.geekbang.org/infoq/52/52d5b344c2565ee8be878ad855c06aa3.jpeg?x-oss-process=image/resize,w_416,h_234

【CSS】多重边框

用户头像
学习委员1 月 17 日

css多重边框的2中实现方式及各自利弊

https://static001.geekbang.org/infoq/2b/2b7eeb0ed044374381fb60bc6745f6d1.jpeg?x-oss-process=image/resize,w_416,h_234

【CSS】文字特效(text-shadow)

用户头像
学习委员1 月 16 日

以下案例都需要有一定的 html 和 css 基础。

https://static001.geekbang.org/infoq/d4/d4278884738d29a0546e17d337001c80.png?x-oss-process=image/resize,w_416,h_234

《css 大法》之使用伪元素实现超实用的图标库(附源码)

用户头像
徐小夕2020 年 12 月 10 日

今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。

https://static001.geekbang.org/infoq/2f/2f9740332e09ebaefa2cab18af48f170.png?x-oss-process=image/resize,w_416,h_234

手撸一个在线 css 三角形生成器

用户头像
徐小夕2020 年 12 月 7 日

为了提高 前端开发 效率, 笔者先后写了上百个前端工具, 有些是给公司内部使用的, 有些单纯是因为自己太“懒”, 不想写代码, 所以才“被迫”做的. 接下来介绍的一款工具——css三角形生成器也是因为之前想要解放设计师的生产力, 自己又懒得切图或者写css代码,

https://static001.geekbang.org/infoq/78/78d03e59c167db0495e47f26c1891cb3.png?x-oss-process=image/resize,w_416,h_234

《前端实战总结》之使用 CSS3 实现酷炫的 3D 旋转透视

用户头像
徐小夕2020 年 12 月 4 日

3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,css3 3D动画必不可少。

https://static001.geekbang.org/infoq/e9/e99308919372a05b678ef420684a3cea.png?x-oss-process=image/resize,w_416,h_234

如何用 CSS 实现图像替换链接文本显示并保证链接可点击

用户头像
陈北2020 年 11 月 25 日

一个很普通的网页中显示LOGO图像,按照以往的页面制作经验,基本是在页面中插入图像即可(<img src="logo.gif" />),不过以新WEB标准进行CSS布局,首先就对该XHTML源码进行改造,设置为纯文本

https://static001.geekbang.org/infoq/18/18463b6560a8f32d6765e9512ec4cc02.jpeg?x-oss-process=image/resize,w_416,h_234

CSS 常用样式——绘制各种角度的三角形(1)

用户头像
程序员学院2020 年 9 月 4 日

在制作前端项目时,我们经常会遇到制作下拉功能时有个小三角,除了我们用图片背景或者iconFont之外,我们可以用CSS来实现。

CSS小技巧_CSS小技巧资料文章-InfoQ写作平台