正文
css useful skills blogs
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
css useful skills blogs
https://caniuse.com/
https://css-tricks.com
https://css-tricks.com/almanac/properties/u/user-select/
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://www.smashingmagazine.com/category/css-grid
http://www.csstutorial.org/css-grid-tutorial.html
https://css3playground.com/3d-flip-cards/
语义化标签 & css triangle
https://es6.io/
http://wesbos.com/blog
不规则边框，clip-path
https://scotch.io/
https://scotch.io/courses/the-ultimate-guide-to-javascript-algorithms/array-chunking
text-rendering
text-rendering: optimizeLegibility
text-rendering: optimizeLegibility
http://www.csstutorial.org/css-grid-tutorial.html
https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
https://css-tricks.com/almanac/properties/t/text-rendering/
grid
https://alligator.io/
https://www.cnblogs.com/xgqfrms/p/11953522.html
@media only screen and (max-width: 30em) {
div.front-flex {
grid-template-columns: 1fr;
}
}
div.front-flex {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
svg animation
https://frontend30.com/free-video-thank-you/
<div class="c-text-group">
<svg id="c-text-line" xmlns="http://www.w3.org/2000/svg" width="696" height="137"><title>Thank you</title><g fill="none" stroke="#FFF" stroke-width="2" fill-rule="evenodd" fill-opacity="0" stroke-opacity=".6"><path d="M199.516 91.03c2.87 0 5.252-.616 7.143-1.846s3.247-2.62 4.068-4.17V73.188h-6.7c-8.02 0-12.03 3.6-12.03 10.8 0 2.097.705 3.794 2.118 5.093 1.413 1.299 3.213 1.948 5.4 1.948z" style="stroke-dasharray: 63, 65; stroke-dashoffset: 0;"></path><path d="M529.623 69.838c0 6.836 1.071 11.849 3.213 15.039 2.142 3.19 5.31 4.785 9.502 4.785 8.203 0 12.396-6.312 12.578-18.935v-2.325c0-13.261-4.238-19.892-12.715-19.892-7.702 0-11.872 5.72-12.51 17.158l-.068 4.17z" style="stroke-dasharray: 110, 112; stroke-dashoffset: 0;"></path><path d="M84.193 25.063H54.32v81.005H30.326V25.063H1V6.537h83.193z" style="stroke-dasharray: 366, 368; stroke-dashoffset: 0;"></path><path d="M115.775 40.033c4.922-6.198 11.211-9.297 18.868-9.297 8.157 0 14.31 2.416 18.457 7.246 4.147 4.831 6.266 11.963 6.357 21.397v46.69h-23.105V59.925c0-3.92-.798-6.802-2.393-8.648-1.595-1.845-4.307-2.768-8.135-2.768-4.74 0-8.089 1.504-10.049 4.511v53.047H92.738v-105h23.037v38.965z" style="stroke-dasharray: 454, 456; stroke-dashoffset: 0;"></path><path d="M213.94 106.068c-.82-1.504-1.55-3.714-2.188-6.63-4.238 5.332-10.163 7.998-17.773 7.998-6.973 0-12.898-2.108-17.774-6.324-4.876-4.215-7.314-9.513-7.314-15.893 0-8.021 2.962-14.082 8.886-18.184 5.925-4.101 14.538-6.152 25.84-6.152h7.11v-3.897c0-6.79-2.94-10.185-8.819-10.185-5.469 0-8.203 2.689-8.203 8.066h-23.037c0-7.155 3.042-12.965 9.126-17.431 6.084-4.467 13.843-6.7 23.276-6.7 9.434 0 16.885 2.302 22.354 6.905 5.469 4.603 8.271 10.914 8.408 18.935V89.32c.091 6.79 1.14 11.986 3.145 15.586v1.162h-23.038z" style="stroke-dasharray: 339, 341; stroke-dashoffset: 0;"></path><path d="M267.738 32.104l.752 8.681c5.104-6.7 12.145-10.049 21.123-10.049 7.702 0 13.456 2.302 17.261 6.905 3.805 4.603 5.776 11.53 5.913 20.78v47.647h-23.105v-46.69c0-3.736-.752-6.482-2.256-8.236-1.504-1.755-4.238-2.632-8.203-2.632-4.512 0-7.862 1.777-10.05 5.332v52.226h-23.036V32.104h21.601z" style="stroke-dasharray: 393, 395; stroke-dashoffset: 0;"></path><path d="M355.238 78.52l-6.494 6.494v21.054h-23.037V1h23.037v55.781l2.324-3.076 17.364-21.601h27.617l-25.908 30.42 27.617 43.544H371.37z" style="stroke-dasharray: 447, 449; stroke-dashoffset: 0;"></path><path d="M466.527 73.803l12.305-41.7h24.678l-30.147 86.338-1.299 3.145c-4.283 9.57-11.848 14.355-22.695 14.355-3.008 0-6.175-.455-9.502-1.367V118.1h3.008c3.236 0 5.708-.468 7.417-1.402 1.709-.934 2.974-2.609 3.794-5.024l1.846-4.922-25.703-74.648h24.609l11.69 41.699z" style="stroke-dasharray: 387, 389; stroke-dashoffset: 0;"></path><path d="M506.586 68.402c0-7.383 1.435-13.956 4.307-19.721 2.87-5.765 6.995-10.197 12.373-13.296 5.377-3.1 11.689-4.649 18.935-4.649 11.074 0 19.802 3.43 26.182 10.288 6.38 6.86 9.57 16.19 9.57 27.994v.82c0 11.53-3.201 20.679-9.604 27.446-6.403 6.768-15.074 10.152-26.011 10.152-10.528 0-18.981-3.156-25.361-9.468-6.38-6.312-9.821-14.868-10.323-25.67l-.068-3.896z" style="stroke-dasharray: 238, 240; stroke-dashoffset: 0;"></path><path d="M632.162 98.07c-4.876 6.244-11.461 9.366-19.756 9.366-8.112 0-14.253-2.359-18.423-7.076-4.17-4.716-6.254-11.495-6.254-20.337v-47.92h23.037V80.16c0 6.335 3.076 9.502 9.228 9.502 5.287 0 9.046-1.891 11.28-5.674V32.104h23.173v73.964h-21.601l-.684-7.998z" style="stroke-dasharray: 391, 393; stroke-dashoffset: 0;"></path><path d="M681.313 83.715c3.645 0 6.676 1.082 9.091 3.247 2.416 2.165 3.623 4.933 3.623 8.306 0 3.372-1.207 6.14-3.623 8.305-2.415 2.165-5.446 3.247-9.091 3.247-3.692 0-6.734-1.093-9.126-3.28-2.393-2.188-3.59-4.946-3.59-8.272 0-3.327 1.197-6.084 3.59-8.272 2.392-2.187 5.434-3.281 9.125-3.281z" style="stroke-dasharray: 77, 79; stroke-dashoffset: 0;"></path></g></svg>
<svg class="c-text-fill is-active" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="694" height="135"><g fill="#FFF" fill-rule="evenodd"><path d="M83.193 24.063H53.32v81.005H29.326V24.063H0V5.537h83.193z"></path><path d="M114.775 39.033c4.922-6.198 11.211-9.297 18.868-9.297 8.157 0 14.31 2.416 18.457 7.246 4.147 4.831 6.266 11.963 6.357 21.397v46.69h-23.105V58.925c0-3.92-.798-6.802-2.393-8.648-1.595-1.845-4.307-2.768-8.135-2.768-4.74 0-8.089 1.504-10.049 4.511v53.047H91.738v-105h23.037v38.965z"></path><path d="M212.94 105.068c-.82-1.504-1.55-3.714-2.188-6.63-4.238 5.332-10.163 7.998-17.773 7.998-6.973 0-12.898-2.108-17.774-6.324-4.876-4.215-7.314-9.513-7.314-15.893 0-8.021 2.962-14.082 8.886-18.184 5.925-4.101 14.538-6.152 25.84-6.152h7.11v-3.897c0-6.79-2.94-10.185-8.819-10.185-5.469 0-8.203 2.689-8.203 8.066h-23.037c0-7.155 3.042-12.965 9.126-17.431 6.084-4.467 13.843-6.7 23.276-6.7 9.434 0 16.885 2.302 22.354 6.905 5.469 4.603 8.271 10.914 8.408 18.935V88.32c.091 6.79 1.14 11.986 3.145 15.586v1.162h-23.038zM198.515 90.03c2.87 0 5.252-.615 7.143-1.845s3.247-2.62 4.068-4.17V72.188h-6.7c-8.02 0-12.03 3.6-12.03 10.8 0 2.097.705 3.794 2.118 5.093 1.413 1.299 3.213 1.948 5.4 1.948z"></path><path d="M266.738 31.104l.752 8.681c5.104-6.7 12.145-10.049 21.123-10.049 7.702 0 13.456 2.302 17.261 6.905 3.805 4.603 5.776 11.53 5.913 20.78v47.647h-23.105v-46.69c0-3.736-.752-6.482-2.256-8.236-1.504-1.755-4.238-2.632-8.203-2.632-4.512 0-7.862 1.777-10.05 5.332v52.226h-23.036V31.104h21.601z"></path><path d="M354.238 77.52l-6.494 6.494v21.054h-23.037V0h23.037v55.781l2.324-3.076 17.364-21.601h27.617l-25.908 30.42 27.617 43.544H370.37z"></path><path d="M465.527 72.803l12.305-41.7h24.678l-30.147 86.338-1.299 3.145c-4.283 9.57-11.848 14.355-22.695 14.355-3.008 0-6.175-.455-9.502-1.367V117.1h3.008c3.236 0 5.708-.468 7.417-1.402 1.709-.934 2.974-2.609 3.794-5.024l1.846-4.922-25.703-74.648h24.609l11.69 41.699z"></path><path d="M505.586 67.402c0-7.383 1.435-13.956 4.307-19.721 2.87-5.765 6.995-10.197 12.373-13.296 5.377-3.1 11.689-4.649 18.935-4.649 11.074 0 19.802 3.43 26.182 10.288 6.38 6.86 9.57 16.19 9.57 27.994v.82c0 11.53-3.201 20.679-9.604 27.446-6.403 6.768-15.074 10.152-26.011 10.152-10.528 0-18.981-3.156-25.361-9.468-6.38-6.312-9.821-14.868-10.323-25.67l-.068-3.896zm23.037 1.436c0 6.836 1.071 11.849 3.213 15.039 2.142 3.19 5.31 4.785 9.502 4.785 8.203 0 12.396-6.312 12.578-18.935v-2.325c0-13.261-4.238-19.892-12.715-19.892-7.702 0-11.872 5.72-12.51 17.158l-.068 4.17z"></path><path d="M631.162 97.07c-4.876 6.244-11.461 9.366-19.756 9.366-8.112 0-14.253-2.359-18.423-7.076-4.17-4.716-6.254-11.495-6.254-20.337v-47.92h23.037V79.16c0 6.335 3.076 9.502 9.228 9.502 5.287 0 9.046-1.891 11.28-5.674V31.104h23.173v73.964h-21.601l-.684-7.998z"></path><path d="M680.313 82.715c3.645 0 6.676 1.082 9.091 3.247 2.416 2.165 3.623 4.933 3.623 8.306 0 3.372-1.207 6.14-3.623 8.305-2.415 2.165-5.446 3.247-9.091 3.247-3.692 0-6.734-1.093-9.126-3.28-2.393-2.188-3.59-4.946-3.59-8.272 0-3.327 1.197-6.084 3.59-8.272 2.392-2.187 5.434-3.281 9.125-3.281z"></path></g></svg>
</div>
media (min-width: 46.25em)
.s-optin h1 > div {
display: inline-block;
font-size: 3.25rem;
}
@media (min-width: 46.25em)
.c-text-group {
transform: translateX(-50%) scale(0.7);
}
.c-text-group {
left: 50%;
position: absolute;
transform: translateX(-50%) scale(0.35);
}
mask
https://beginnerjavascript.com/
.sweet-code .wave, .transition .wave {
height: 101px;
background: #5c0dac;
background-image: url(/images/BJS/pattern.svg);
background-size: 500px;
background-position: top;
}
.wave.wave--top {
bottom: 100%;
bottom: calc(100% - 1px);
}
.wave {
display: block;
left: 0;
width: 100%;
height: 250px;
z-index: 2;
-webkit-mask: url(/images/BJS/dripsmask.svg);
mask: url(/images/BJS/dripsmask.svg);
position: absolute;
background: #fff;
z-index: -1;
background-image: url(/images/bank-note-rotated.svg);
background-size: 10px;
background-position: bottom left;
z-index: 2;
}
css var & dark mode
https://www.30secondsofcode.org/js
.page-container.dark {
--paginator-selected-color: #b0c3e3;
}
.page-container.dark {
--nav-bar-back-color: #434e76;
--nav-bar-border-color: #13151b;
}
.page-container.dark {
--toast-shadow-color: rgba(1,8,30,0.44);
}
.page-container.dark {
--tag-border-color: #2a3765;
--tag-fore-color: #bec1cb;
}
.page-container.dark {
--search-back-color: #434e76;
--search-fore-color: #e8e9f2;
--search-placeholder-color: #999ebd;
--search-shadow-color: rgba(1,8,30,0.24);
--search-shadow-focus-color: rgba(1,8,30,0.31);
}
.page-container.dark {
--nav-button-fore-color: #959aac;
--nav-button-active-fore-color: #cdd4ef;
}
.page-container.dark {
--card-back-color: #434e76;
--card-fore-color: #f0f0f0;
--card-fore-color-light: #d6d6d6;
--card-shadow-color-b: rgba(1,8,30,0.24);
}
.page-container.dark {
--a-link-color: #6dc7fd;
--a-visited-color: #5db7fe;
}
.page-container.dark {
--code-fore-color: #d1dafe;
--code-back-color: #4f5fa0;
--code-selected-color: #0dbcfb;
}
.page-container.dark {
--back-color: #2a314c;
--back-color-dark: #8993be;
--fore-color: #abafbf;
--fore-color-light: #949ab3;
--fore-color-lighter: #707899;
--fore-color-dark: #b4bcd9;
--fore-color-darker: #fcfcfd;
--scrollbar-back-color: #434e76;
--scrollbar-fore-color: #707899;
}
.page-container {
overflow: hidden;
transition: all .3s ease;
background: var(--back-color);
display: grid;
width: 100vw;
height: 100vh;
grid-template-areas:
"content"
"menu";
grid-template-columns: 100%;
grid-template-rows: calc(100vh - 56px) 56px;
}
font-variation-settings
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
https://caniuse.com/#search=font-variation-settings
https://webdesign.tutsplus.com/articles/how-to-use-variable-fonts-on-the-web--cms-30212
https://www.developerdrive.com/variable-fonts-best-tips/
:hov & change font animation
https://alligator.io/vuejs/basic-ssr/
h1,.foot-panel h3,.wrap-site-sponsors h3,.subscribe-follow h4,.footer-panels a,#_default_ a._default_ .default-title,#_default_ a._default_ .default-description,.vscode-pro h4,.vscode-pro a,.algolia__result-link {
font-family: Recursive, "Segoe UI", "Helvetica Neue", Helvetica, Roboto, 'Open Sans', FreeSans, sans-serif;
font-variation-settings: "CASL" 0, "slnt" -5
}
.file-desc,time[datetime],code,code.highlighter-rouge,.breadcrumbs>*,span.author,span.sponsored,.related-posts h4,.related-posts .front-teaser,.subfooter,blockquote p,.post-meta,footer a,.subfooter a {
font-family: Recursive, 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
font-variation-settings: "MONO" 1;
font-weight: 450
}
CSS3 loading
text spinners
text spinners
https://github.com/maxbeier/text-spinners
https://maxbeier.github.io/text-spinners/
https://github.com/xgqfrms/FEIQA/issues/31
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
