🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

0 篇文章

CSS 交互 - 选不中我

2019-08-14 描述让内容无法被选中。HTML<p>Youcanselectme.</p><pclass="unselectable">Youcan'tselectme!</p>CSS.unselectable{user-select:none;}DemoSeethePen<ahref='https://codepen.io/vanessa219/pen/KKPVJVZ/'>Disablesel

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;}DemoSeethePen<ahref=

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;}DemoSeethePen<ahref='

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