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

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

0 篇文章

  每天 30 秒系列之 CSS

精选常见交互,帮助您拥有简洁酷炫的站点布局清除浮动重置 box-sizing 宽高保持一致 table 居中显示平均分配子元素盒子模型居中垂直小技巧网格居中最后一个元素占满剩余可用高度使用 transform 进行居中多行文本截断文本截断视觉圆自定义滚动条自定义文本选中样式渐变阴影文本风化效果图片适配全屏文本渐变细而明显的边框: not 选择器逃离屏幕对溢出的内容进行渐变漂亮的下划线重置所有样式带形状的分割线系统字

CSS 交互 - 选不中我

2019-08-14 描述让内容无法被选中。HTML<p>Youcanselectme.</p><pclass="unselectable">Youcan'tselectme!</p>CSS.unselectable{user-select:none;}DemoSeethePenDisableselectionbyVanesssa(@vanessa219)onCodePen. 说明 user-select

CSS 动画 - 高度变化时的过渡效果

2019-08-09 描述在一个元素高度不确定的情况下,为其做一个高度从 0 到 auto 的过渡效果。HTML<divclass="trigger">Hovermetoseeaheighttransition.<divclass="el">content</div></div>CSS.el{transition:max-height0.5s;overflow:hidden;max-height:0;}.tr

CSS 动画 - 简单的变量

2019-08-08 描述为 transition-timing-function 属性构建比 ease,ease-in,ease-out 和 ease-in-out 更强大的可再次使用的变量。HTML<divclass="easing-variables">Hover</div>CSS:root{/*Placevariablesinheretouseglobally*/}.easing-variables{--

CSS 动画 - 🍩式的旋转

2019-08-07 描述创建一个🍩式的旋转,以其用于表示内容正在加载中。HTML<divclass="donut"></div>CSS@keyframesdonut-spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.donut{display:inline-block;border:4pxsolidrgba(0,0,0,

CSS 动画 - 按钮边框动画

2019-08-06 描述当鼠标移上时,创建一个边框的动画。HTML<divclass="button-border"><buttonclass="button">Submit</button></div>CSS.button{background-color:#c47135;border:none;color:#ffffff;outline:none;padding:12px40px10px;pos

CSS 视觉 - 斑马条纹列表

2019-08-05 描述创建一个背景色交替的条纹列表,这对于区分使用行来展示内容的兄弟节点很有用。HTML<ul><li>Item01</li><li>Item02</li><li>Item03</li><li>Item04</li><li>Item05</li></ul>CSSli:nth-child(odd){background-color:#eee;}DemoSeethePenZebrast

CSS 视觉 - 三角形

2019-08-04 描述使用纯 CSS 创建一个三角形。HTML<divclass="triangle"></div>CSS.triangle{width:0;height:0;border-top:20pxsolid#333;border-left:20pxsolidtransparent;border-right:20pxsolidtransparent;}DemoSeethePenTriangle

CSS 视觉 - 系统字体栈

2019-08-03 描述使用操作系统自带的原生字体,让其有更接近原生应用的感觉。HTML<pclass="system-font-stack">Thistextusesthesystemfont.</p>CSS.system-font-stack{font-family:-apple-system,BlinkMacSystemFont,'SegoeUI',Roboto,Oxygen-Sans,Ubu

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