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

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

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 发布文章使用：只允许注册用户才可以访问！

---