Skip to content

Instantly share code, notes, and snippets.

View synzhang's full-sized avatar

Syn synzhang

46 followers · 56 following
View GitHub Profile
@synzhang
synzhang / conditional.css
Created October 10, 2013 05:54
Conditional Loading
@media all and (min-width: 45em) {
body:after {
content: 'desktop';
display: none;
}
@synzhang
synzhang / adapt-width-height.html
Last active December 21, 2015 00:39
自适应剩余宽高
<!--
* @desc 自适应剩余宽高
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自适应剩余宽高</title>
<style>
@synzhang
synzhang / tabs-nav.html
Created August 13, 2013 14:26
Tabs 选项卡
<!--
* @desc Tabs 选项卡
* Emmet: (h2.tabs-nav>a*3)+(.tabs-content-wrap>.tabs-content*3)
* @see http://www.w3cplus.com/framework/page/demo.php
-->
<h2 class="tabs-nav">
<a href="#"></a>
…
</h2>
@synzhang
synzhang / tags-filter.html
Created August 13, 2013 14:25
标签过滤
<!--
* @desc 标签过滤
* Emmet: .tags-filter.clearfix>strong.tag-label+(p>a*3)
* @see http://www.w3cplus.com/framework/page/demo.php
-->
<div class="tags-filter clearfix">
<strong class="tag-label">女生</strong>
<p>...</p>
</div>
@synzhang
synzhang / min-height.css
Created August 13, 2013 14:24
CSS IE 6 中的最小高度
/**
* @desc CSS IE 6 中的最小高度
* @see http://www.w3cplus.com/solution/ellipsis/ellipsis.html
*/
.box {
min-height:500px;
height:auto !important;
height:500px;
}
@synzhang
synzhang / full-screen-background.css
Created August 13, 2013 14:23
全屏背景图片
/**
* @desc 全屏背景图片
* @see http://css-tricks.com/perfect-full-page-background-image/
*/
html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
@synzhang
synzhang / pullquote.css
Created August 13, 2013 14:22
引文
/**
* @desc 引文
* @see http://miekd.com/articles/pull-quotes-with-html5-and-css/
*/
.has-pullquote:before {
/* Reset metrics. */
padding: 0;
border: none;
@synzhang
synzhang / first-letter.css
Created August 13, 2013 14:20
首字下沉
/**
* @desc 首字下沉
*/
p:first-letter {
display: block;
margin: 5px 0 0 5px;
float: left;
color: #ff3366;
font-size: 5.4em;
@synzhang
synzhang / background-noise.css
Created August 13, 2013 14:19
CSS 噪点背景
/**
* @desc CSS 噪点背景
* @see https://coderwall.com/p/m-uwvg
*/
body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3c
@synzhang
synzhang / css-tooltip.css
Created August 13, 2013 14:17
CSS hover 工具条提示
/**
* @desc CSS hover 工具条提示
* @see http://www.impressivewebs.com/pure-css-tool-tips/
*/
a {
border-bottom:1px solid #bbb;
color:#666;
display:inline-block;
position:relative;