css,Code片段,代码实例,代码示例,代码片段库

css 使用Dark Reader扩展程序时，更改Chrome中的默认滚动条颜色

foobar

/*
  1. Open Dark Reader developer tools
  2. Extend the * CSS rule
*/

*

CSS
// scrollbar colors: https://flatuicolors.com/palette/us
::-webkit-scrollbar {
    background-color: #2d3436;
}
::-webkit-scrollbar-thumb {
    background-color: #74b9ff;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #00cec9;
}

css 突出显示不同的布局深度

Highligh layout depth.css

// Source: https://dev.to/gajus/my-favorite-css-hack-32g3

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

css CSS：每个节点深度的渐进式突出显示

CSS hack由Gajus Kuizinas提供，https：//dev.to/gajus/my-favorite-css-hack-32g3 <br/>这使得每个元素的突出显示根据文档树中的深度而加剧。用于诊断布局问题。（访问链接截图）

diagnostic_highlighting.css

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

/* Courtesy of Gajus Kuizinas, https://dev.to/gajus/my-favorite-css-hack-32g3
This makes the highlighting of each element intensify according to how deep it is in the document tree. */

css CSS黑客突出布局

foobar.css

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

/*
Different depth of nodes will use different colour allowing you to see the size of each element on the page,
their margin and their padding. Now you can easily identify inconsistencies.

Source: https://dev.to/gajus/my-favorite-css-hack-32g3

As a bookmark: https://gist.github.com/olee/50f0ddac55418f705e0c5759e15e946d
*/

css CSS网格

grid.css

  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fill, minmax(250px,1fr))',
  gridGap: 20,

css CSS技巧，看到CSS布局不一致

CSS技巧，看到CSS布局不一致

hack.css

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

css CSS使标准的Divi下拉菜单更宽广

divi-dropdown-menu-widths

/* Main nav drop-down menu styles */
.nav ul.sub-menu {
	min-width: 20vw;
	right: 1vw;
}

#top-menu li li a {
	width: 100%;
	font-size: .9em;
}

css 在固定宽度的容器上扩展背景图像

参考lInk：https：//stackoverflow.com/questions/49325175/how-can-i-create-a-full-width-background-inside-a-fixed-container-with-bootstrap

extend.css

.bg-full {
  position: relative;
}

.bg-full:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX( -50%);
  height: 100%;
  width: 100vw;
  background: red;
}

html {
  overflow-x: hidden;
}

css 绝对定位水平滚动

style.css

1. add div wrapper directly inside body
2. give div overflow:hidden

css Flexbox垂直对齐

html.html

<div class="Aligner">
  <div class="Aligner-item Aligner-item--top">…</div>
  <div class="Aligner-item">…</div>
  <div class="Aligner-item Aligner-item--bottom">…</div>
</div>

css.css

.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  max-width: 50%;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}