Skip to content

Instantly share code, notes, and snippets.

@Phalacrocorax

Phalacrocorax/snippets-layout.md

Last active September 15, 2020 15:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Phalacrocorax/e6e2efd99e9bf558b324122ea58485df to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Phalacrocorax/e6e2efd99e9bf558b324122ea58485df to your computer and use it in GitHub Desktop.
Download ZIP
[snippets] css
Raw
snippets-layout.md

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=divice-width">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>website</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css"><!--semantic css-->
</head>
<body>
	...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js" type="text/javascript"></script>
</body>
</html>

TOC(table of content)

/* It's about the trick of sticky table 
** I used the Toc jQuery plugin http://projects.jga.me/toc/ 
** But it exludes the sticky function, And I found this feature on Qiita & segmentfault.
*/
.tocTree{
  width: 270px;postition: relative;top: 0px;
}
/* When scroll close to the toc, it got changed by js*/
.tocTree{
  width: 270px;postition: fixed;top: 0px;
}
/* And Another thing should be paid attention is the whole article should layout flex
** e.g. row column80 column10
** The TOC should conclude in column10, and before there shoud have a div placeholder, when TOC become fixed, it could work.
*/
.toc-placeholder{
  position: relative; top: 0px; height: 10px;width: 270px;
}

jQuery TOC

这里做js时需要考虑到header和footer的情况(>300 hearder高度， -240 footer高度)

var stickyTop = '200';
	$(window).on('scroll', function(argument) {
		if ($(window).scrollTop() >= 300) {
			$("#toc").css('position','fixed').css('top','5rem');
			if ($(window).scrollTop() > ($(document).height()-$(window).height()-240)) {
				$("#toc").css('position','fixed').css('top','auto').css('bottom','260px');
			}
		}else{
			$("#toc").css('position','relative').css('top','10rem');
		}
	});

TOP / BOT

<div id="back-to-top">
    <a href="#"><div>TOP</div></a>
    <a href="javascript:window.scrollTo(0,document.body.scrollHeight);">BOT</a>
</div>

#back-to-top {text-align: center;position: fixed;right: 10px;bottom: 10%;width: 40px;background: white;border: 1px solid #60a773;color: #60a773;}

Line Clampin’ (Truncating Multiple Line Text) ellipsis

https://css-tricks.com/line-clampin/

.overflow {
  --max-lines: 3;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 1rem; /* space for ellipsis */
}
.overflow::before {
  position: absolute;
  content: "...";
/*   inset-block-end: 0;
  inset-inline-end: 0; */
  bottom: 0;
  right: 0;
}
.overflow::after {
  content: "";
  position: absolute;
/*   inset-inline-end: 0; */
  right: 0;
  width: 1rem;
  height: 1rem;
  background: white;
}

.fade {
  position: relative;
  height: 4.2rem; /* exactly three lines */
  overflow-y: hidden;
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
@Phalacrocorax
Copy link
Author

Phalacrocorax commented Feb 16, 2017 •
edited
Loading

COMMON CSS

.fl{float: left;}
.fr{float: right;}
.text-center{ text-align: center;}
.text-right{text-align: right;}
.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{zoom: 1;}
::placeholder {
	color:#bcbcbc;
	font: 300 1em/1.8 Lato, "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Helvetica, sans-serif;
  }
select {
	-webkit-appearance: none;/* ベンダープレフィックス(Google Chrome、Safari用) */
	-moz-appearance: none;	/* ベンダープレフィックス(Firefox用) */
	appearance: none;		/* 標準のスタイルを無効にする */ 
}
.text{
white-space; pre-wrap; /* wrap & \n */ 
}

Perfect Full Page Background Image

/* here is my method to build a single pic page */

-webkit-background-size: cover
-moz-background-size: cover
-o-background-size: cover
background-size: cover
background-image: url() 
height: 100vh  
weight: 100vw

CSS 属性选择器 模糊匹配的使用

img[title~="Figure"] {border: 1px solid gray;}
[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素
  • Limit to one row
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;

@Phalacrocorax
Copy link
Author

Phalacrocorax commented Feb 16, 2017 •
edited
Loading

SASS基础——十个常见的Mixins

centering-css-complete-guide

文字垂直居中

css3 flex

display: flex;
align-items: center;
justify-content: center;

unknow height

/* USEFUL */
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
/* FLEX */
 display: flex;
  flex-direction: column;
  justify-content: center;
/*  simplest */
margin: auto

文字与图像同时垂直居中

图片要设置 vertical-align: middle

clearfix

.clearfix:after
  content: ""
  display: block
  height: 0
  clear: both
  visibility: hidden  
.clearfix
	zoom: 1

inputs-placeholder

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}
// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

25 Incredibly Useful CSS Tricks You Should Know

/*3. Print Page Breaks*/
.page-break{ page-break-before:always; }  

/*Highlight links that open in a new window*/
a[target="_blank"]:before,  
a[target="new"]:before {}

/*Drop Caps Using CSS*/
p:first-letter{ float: left; display: block}

/*Attribute-Specific Icons*/
a[href$='.doc'] {  background: url(icons/doc.gif) no-repeat center right ; }

/*Tableless Forms Using labels*/
label{ float:left; } // div-label-input

/*Highlight Acronym and Abbr Tags*/
acronym, abbr{cursor:help; }

text-align:justify

两端对齐，似乎一般就是text-align: justify, 中文还需要 text-justify: distribute;

.div {
      text-align:justify;
      text-justify: distribute;
      text-justify:distribute-all-lines;/*ie6-8*/
  }

@Phalacrocorax
Copy link
Author

Phalacrocorax commented Feb 18, 2017 •
edited
Loading

字体FONTTYPE

看到一个很棒的中文字体设置！ from aotu.io
英文上还是Lato最高，所以在前面加了Lato，最后加了Helvetica保险。

// FOR CN & EN
font: 300 1em/1.8 Lato,"PingFang SC","Lantinghei SC",
                                "Microsoft Yahei","Hiragino Sans GB","Microsoft Sans Serif","WenQuanYi Micro Hei",
                                 Helvetica, sans-serif;
// FOR JA
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka, "メイリオ","ＭＳ Ｐゴシック","MS PGothic",sans-serif

// code
font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif

CN

Yu Gothic

从youtube copy title 到onenote的时候突然发现，字体很漂亮，看了一眼是 Yu Gothic， 游黑体，日系中文字，偏瘦。忧伤的是果然没有简体。
中文字体站： 搜字网

李旭科书法 v1.4

很漂亮的手写书法字体

EN

Gotham Narrow A

The font of this page is awsome - Singapore’s vision for high-tech city planning

font-family: "Gotham Narrow A","Gotham Narrow B","Segoe UI","Myriad Pro",Helvetica,Arial,sans-serif

试了一下发现还不错，再check，发现safe font只到Helvetica........Helvetica 大法好

WEB SAFE CSS FONT STACK

A complete collection of web safe CSS font stacks.
sad to find the rate of Mac is low for Consolas, my favorite Monospaced font.

@Phalacrocorax
Copy link
Author

Phalacrocorax commented Feb 19, 2017 •
edited
Loading

SVG

三看 SVG Web 动效 | 很不错的svg教程

一些SVG指令： alt

svgtrick.com

vgtrick.com 是一个专注于分享 svg 使用经验、技巧、以及教程的网站。
当然，这里不止于SVG，对于SVG动效设计的最佳搭档的GreenSock、Snapsvg、Mojs等动效js也会进行涉猎。

@Phalacrocorax
Copy link
Author

Phalacrocorax commented May 16, 2017 •
edited
Loading

兼容性

position+transform/font-weight

position: relative;top: 50%;在IE11上失效。
目的是居中，所以改为flex column, height设置100%。这里盒子模型设计到flex-direction。分为column和row，水平居中和垂直居中分别依靠justify-content和justify-align。

windows下，font-weight:300和font-weight:400没差，似乎设置成500有时候浏览器也不行，还是直接用bold保险。

在ipad，kindle等移动设备上万能的position+transform居中似乎会有问题。

flexbox

flex在IE11以下，chrome某些版本，safari7以下均有不兼容现象。
prefix解决。

.slide {
    display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari（PC）用 ---*/
    display:flex;
    -webkit-box-pack:center;/*--- Androidブラウザ用 ---*/
    -ms-flex-pack:center;/*--- IE10 ---*/
    -webkit-justify-content:center;/*--- safari（PC）用 ---*/
    justify-content:center;
    align-items: center;
}

Viewport units: vw, vh, vmin, vmax

支持>IE 11, > Chrome 49, > Safari 10.1, > Firefox 52
js解决

var clientHeight = $( window ).height();
$('#slides').css('height', clientHeight);

@Phalacrocorax
Copy link
Author

Phalacrocorax commented Jun 1, 2017 •
edited
Loading

HTML

标签的 enctype 属性

enctype="multipart/form-data"

input file

accept="application/pdf"

@Phalacrocorax
Copy link
Author

Phalacrocorax commented Apr 18, 2019

Menu Animation in whatcode.cc

#sidebar nav > ul > li {
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -moz-transition: opacity 0.15s ease, -moz-transform 0.75s ease;
    -webkit-transition: opacity 0.15s ease, -webkit-transform 0.75s ease;
    -ms-transition: opacity 0.15s ease, -ms-transform 0.75s ease;
    transition: opacity 0.15s ease, transform 0.75s ease;
    margin: 1.5em 0 0 0;
    opacity: 1;
    padding: 0;
    position: relative;
 }
    #sidebar nav > ul > li:first-child {
        margin: 0;
    
    #sidebar nav > ul > li:nth-child(1) {
        -moz-transition-delay: 0.45s;
        -webkit-transition-delay: 0.45s;
        -ms-transition-delay: 0.45s;
        transition-delay: 0.45s;
    
    #sidebar nav > ul > li:nth-child(2) {
        -moz-transition-delay: 0.65s;
        -webkit-transition-delay: 0.65s;
        -ms-transition-delay: 0.65s;
        transition-delay: 0.65s;
    
    #sidebar nav > ul > li:nth-child(3) {
        -moz-transition-delay: 0.85s;
        -webkit-transition-delay: 0.85s;
        -ms-transition-delay: 0.85s;
        transition-delay: 0.85s;
    }
    ......
#sidebar nav a {
    -moz-transition: color 0.2s ease;
    -webkit-transition: color 0.2s ease;
    -ms-transition: color 0.2s ease;
    transition: color 0.2s ease;
    border: 0;
    color: rgba(255, 255, 255, 0.80);
    /*color: #91cfa1;*/
    display: block;
    font-size: 0.8em;
    letter-spacing: 0.25em;
    line-height: 1.75;
    outline: 0;
    padding: 1em 0;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
}
    #sidebar nav a:before, #sidebar nav a:after {
        border-radius: 0.2em;
        bottom: 0;
        content: '';
        height: 0.2em;
        position: absolute;
        right: 0;
        width: 100%;
    }
    #sidebar nav a:after {
        background-image: -moz-linear-gradient(to right, #5e42a6, #b74e91);
        background-image: -webkit-linear-gradient(to right, #5e42a6, #b74e91);
        background-image: -ms-linear-gradient(to right, #5e42a6, #b74e91);
        /*background-image: linear-gradient(to right, #5e42a6, #b74e91);*
        background-image: linear-gradient(to right, #60a773, #91cfaa);
        -moz-transition: max-width 0.2s ease;
        -webkit-transition: max-width 0.2s ease;
        -ms-transition: max-width 0.2s ease;
        transition: max-width 0.2s ease;
        max-width: 0;
    }
    #sidebar nav a:hover {
        color: rgba(255, 255, 255, 0.55);
    }
    #sidebar nav a.active {
        color: white;   
    }   
        #sidebar nav a.active:after {
                max-width: 100%;
        }

@Phalacrocorax
Copy link
Author

Phalacrocorax commented Jan 27, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment