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 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