Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

CSS 视觉 - 带形状的分割线

2019-08-02 描述使用一个 SVG 图形来对两个不同的块进行分割,创建一个比标准水平分割线更为有趣的视觉展现来进行分割。HTML<divclass="shape-separator"></div>CSS.shape-separator{position:relative;height:48px;background:#333;}.shape-separator::after{content:'';

CSS 视觉 - 重置所有样式

2019-08-01 描述重置所有的样式的属性为默认值。这将不会影响 direction 和 unicode-bidi 属性。HTML<divclass="reset-all-styles"><h5>Title</h5><p>Loremipsumdolorsitametconsecteturadipisicingelit.Iureidexercitationemnullaquirepellatlaborumv

CSS 视觉 - 漂亮的下划线

2019-07-31 描述一种较好的可选方案为 text-decoration:underline 或 <u></u>,但是下行字母不能被下划线所裁剪。但可以使用 text-decoration-skip-ink:auto 来进行解决,然而只有少数字母不会超过下划线。HTML<pclass="pretty-text-underline">Prettytextunderlinewithoutclippingdes

CSS 视觉 - 对溢出的内容进行渐变

2019-07-30 描述为溢出的元素添加一个渐变消失的效果,使用更友好的方式告知用户滚动后可以获取更多内容。HTML<divclass="overflow-scroll-gradient"><divclass="overflow-scroll-gradient__scroller">Loremipsumdolorsitametconsecteturadipisicingelit.<br/>Iurei

CSS 视觉 - 逃离屏幕

2019-07-29 描述使用一种安全的方法来隐藏一个元素的展现,需要使其在 DOM 中的位置可以被 JavaScript 所访问,除此外还必须让屏幕阅读器能够进行阅读。这种方法对于友好性(ADA)的开发非常有用,尤其是对于当有视觉障碍的人需要阅读更多内容时。可选的 display:none 不能被屏幕阅读器所识别,而 visibility:hidden 会占用 DOM 的物理空间。HTML<aclass="button

CSS 视觉 - :not 选择器

2019-07-28 描述当一组元素中的最后(或特定的)一个元素不需要样式时,:not 选择器就非常有用了。HTML<ulclass="css-not-selector-shortcut"><li>One</li><li>Two</li><li>Three</li><li>Four</li></ul>CSS.css-not-selector-shortcut{display:flex;}ul{paddi

CSS 视觉 - 细而明显的边框

2019-07-27 描述给一个元素设置一个宽度等于 1 个原始设备像素的边框,要让他看起来细的非常明显。HTML<divclass="hairline-border">text</div>CSS.hairline-border{box-shadow:0001px;}@media(min-resolution:2dppx){.hairline-border{box-shadow:0000.5px;}}@m

CSS 视觉 - 文本渐变

2019-07-26 描述给文本一个渐变的颜色。HTML<pclass="gradient-text">Gradienttext</p>CSS.gradient-text{background:-webkit-linear-gradient(pink,red);-webkit-text-fill-color:transparent;-webkit-background-clip:text;}DemoS

CSS 视觉 - 全屏

2019-07-25 描述当浏览器为全屏模式时,一个元素上使用 CSS 伪类:fullscreen 所设定的样式就会被展现出来。HTML<divclass="container"><p><em>Clickthebuttonbelowtoentertheelementintofullscreenmode.</em><buttononclick="varel=document.getElementById('e

CSS 视觉 - 图片适配

2019-07-24 描述在保留长宽比例的情况下对图片内部容器的位置和填充情况进行修改。以前只能使用背景图片和 background-size 属性来实现。HTML<imgclass="imageimage-contain"src="https://picsum.photos/600/200"/><imgclass="imageimage-cover"src="https://picsum.photos/

黑客派新 Logo

背景随着 B3log 开源社区的逐步发展,旗下已经有了十多个开源项目。我们为其主要产品设计了一系列的图标,他们主要以圆形、正方形、正方体为基础元素;使用二进制对齐来设定长度和角度;以红#d23f31、黑#3b3e43、蓝#4285f4、黄#f1e05a 为主要色值。https://b3log.org/brand-marking.html 设计内/外折叠的大写字母 H 和 P 的重叠仿佛一个程序员缓慢的打开笔记本,右

CSS 视觉 - 文本风化效果

2019-07-23 描述为文本创建一个风化效果或者嵌入背景的雕刻效果。HTML<pclass="etched-text">Iappearetchedintothebackground.</p>CSS.etched-text{text-shadow:02pxwhite;font-size:1.5rem;font-weight:bold;color:#b8bec5;background-color:#d

CSS 视觉 - 渐变阴影

2019-07-22 描述创建基于元素本身颜色的阴影,类似于 box-shadow。HTML<divclass="dynamic-shadow"></div>CSS.dynamic-shadow{position:relative;width:10rem;height:10rem;background:linear-gradient(75deg,#6d78ff,#00ffb8);z-index:1;}.

CSS 视觉 - 自定义文本选中样式

2019-07-21 描述改变文本选中的样式。HTML<pclass="custom-text-selection">Selectsomeofthistext.</p>CSS::selection{background:aquamarine;color:black;}.custom-text-selection::selection{background:deeppink;color:white;}D

CSS 视觉 - 自定义滚动条

2019-07-20 描述在有 WebKit 功能的浏览器中,为滚动属性为 overflow 的页面和元素定义他们滚动条的样式。HTML<divclass="custom-scrollbar"><p>Loremipsumdolorsitametconsecteturadipisicingelit.<br/>Iureidexercitationemnullaquirepellatlaborumvitae,<br

CSS 视觉 - 圆

2019-07-19 描述使用纯 CSS 创建一个圆形。HTML<divclass="circle"></div>CSS.circle{border-radius:50% ;width:2rem;height:2rem;background:#333;}DemoSeethePen<ahref='https://codepen.io/vanessa219/pen/BXyNGY/'>Circle</a>byVa

CSS 布局 - 文本截断

2019-07-18 描述如果文本的长度大于一行,那么他将在第 n 行被一个渐变的效果截断。HTML<pclass="truncate-text">IfIexceedoneline'swidth,Iwillbetruncated.</p>CSS.truncate-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:200

CSS 布局 - 多行文本截断

2019-07-17 描述如果文本的长度大于一行,那么他将在第 n 行被一个渐变的效果截断。HTML<pclass="truncate-text-multiline">Loremipsumdolorsitamet,consetetursadipscingelitr,seddiamnonumyeirmodtemporinviduntutlaboreet.</p>CSS.truncate-text-multi

CSS 布局 - 使用 transform 进行居中

2019-07-16 描述使用 position:absolute 和 transform:translate()水平垂直居中一个父元素中的子元素(这是除 flexbox 和 display:table 以外的另一种居中方案)。他类似于 flexbox,这种方案不需要你知道父元素或子元素的高和宽,因此他非常适用于有自适应需求的应用。HTML<divclass="parent"><divclass="child">Ce

CSS 布局 - 最后一个元素占满剩余可用高度

2019-07-15 描述在当前屏幕中,让最后一个元素占满可用的剩余空间,当窗口大小变化时也需如此。HTML<divclass="container"><div>Div1</div><div>Div2</div><div>Div3</div></div>CSShtml,body{height:100% ;margin:0;}.container{height:100% ;display:flex;flex