css useful skills blogs
css useful skills blogs
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
不规则边框，clip-path
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://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 发布文章使用：只允许注册用户才可以访问！
css useful skills blogs的更多相关文章
- js useful skills blogs
js useful skills blogs blogs https://davidwalsh.name/tutorials/javascript https://www.ruanyifeng.com ...
- html5 useful skills blogs
html5 useful skills blogs preload & prefetch https://www.30secondsofcode.org/snippet/ary blogs h ...
- 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果
利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...
- python的6种基本数据类型--字典
python的6种基本数据类型--字典 字典 字典的定义与特性 字典是Python语言中唯一的映射类型. 定义:{key1:value1,key2:value2} 1.键与值用冒号":& ...
- Flutter 学习路径
Flutter 学习路径 docs https://flutter.dev/docs https://flutter.dev/community/china https://flutter-io.cn ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS skills: 6) auto hide the top bar javascript
//jquery $(document).ready(function(){ $(window).scroll(function() { $(this).scrollTop() > 10 ? $ ...
- CSS skills: 5) jquery hover(over,out)
$(":div[name=div_edit]").each(function() { $(this).hover(function() { $(this).find("& ...
- CSS skills: 4) goto page head script
//返回顶部 $(document).on('click', '.backTop', function (e) { $('html, body').animate({scrollTop: 0}, 50 ...
随机推荐
- 微信小程序--使用云开发完成支付闭环
微信小程序--使用云开发完成支付闭环 1.流程介绍 2. 代码实现和逻辑思想描述 云函数统一下单 对应云函数 unipay [CloudPay.unifiedOrder] 函数思路 : 调用云函数封装 ...
- Java并发包源码学习系列：阻塞队列实现之SynchronousQueue源码解析
目录 SynchronousQueue概述 使用案例 类图结构 put与take方法 void put(E e) E take() Transfer 公平模式TransferQueue QNode t ...
- MIT 6.S081 Lab File System
前言 打开自己的blog一看,居然三个月没更新了...回想一下前几个月,开题 + 实验室杂活貌似也没占非常多的时间,还是自己太懈怠了吧,掉线城和文明6真的是时间刹手( 不过好消息是把15445的所有l ...
- 一：优化Docker中的Spring Boot应用：单层镜像方法
优化Docker中的Spring Boot应用:单层镜像方法 1.Docker关键概念 2.镜像层内容很重要 3.镜像层影响部署 4.Docker中的Spring Boot应用 5.单层方法 5.1 ...
- JavaWeb——Ajax与MVC学习总结
Ajax: 什么是Ajax? 为什么使用Ajax? 使用jquery Ajax实现登录 Ajax实例练习: 设计模式 设计模式的定义: 设计模式的作用: MVC设计模式 MVC设计模式的模块组成: M ...
- spark-submit提交spark任务的具体参数配置说明
spark-submit提交spark任务的具体参数配置说明 1.spark提交任务常见的两种模式 2.提交任务时的几个重要参数 3.参数说明 3.1 executor_cores*num_execu ...
- hbase远程api调用, 远程连接开发，环境构建相关问题总结
平时在开发的过程中,都是将hbase的环境装在虚拟机或者双系统上的,开发是直接在unix或者linux上进行的,这样对于使用上,有些繁琐. 下面我将介绍我在使用windows远程开发过程中的一些总结: ...
- 菜鸟初学Linux——Ubuntu系统中，用root权限进行复制粘贴操作
long long ago,积累了一些Linux的小知识,拿出来分享一下,希望以后能够在工作上带来一些帮助. 方法一 第一步:打开终端,在命令行里输入sudo nautilus 第二步:输入你的用 ...
- xml——dom&sax解析、DTD&schema约束
dom解析实例: 优点:增删改查一些元素等东西方便 缺点:内存消耗太大,如果文档太大,可能会导致内存溢出 sax解析: 优点:内存压力小 缺点:增删改比较复杂 当我们运行的java程序需要的内存比较大 ...
- Codeforces Round #529 (Div. 3) C. Powers Of Two (二进制)
题意:给你一个数\(n\),问是否能有\(k\)个\(2\)次方的数构成,若满足,输出一种合法的情况. 题解:从高到低枚举二进制的每一位,求出\(n\)的二进制的\(1\)的位置放进优先队列中,因为\ ...