Skip to content

Instantly share code, notes, and snippets.

.selector {
font-feature-settings: "palt" 1;
}
filter: drop-shadow(0px 0px 10px rgba(0,0,0,.8));
.box {
position: relative;
width: 50%;
height: auto;
background: #444;
}
.ratio-1_1:before {
content: "";
display: block;
padding-top: 100%; /* 1:1 */
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
.boxA {
@include link-colors(#111, #222, #333, #444, #555);
}
@sou5534
sou5534 / base.css
Last active June 13, 2018 00:05
marginを使う方法 子要素に「margin: auto;」を定義します。必要に応じて「text-align:center;」 flexboxを使う方法 親要素に「display:flex;」「justify-content:center;」「align-items: center;」
.child {
display:inline-block;
font-family: Arial;
font-weight: bold;
color: white;
font-size: 1.5em;
text-align: center;
}
.parent.one {
<div class="target">aaaaa</div>
@sou5534
sou5534 / gulp
Created February 19, 2018 04:08
package.jsonにないプラグインを削除
npm prune
package.jsonと同じプラグインをインストール
npm install
@sou5534
sou5534 / price.html
Last active December 1, 2017 01:29
¥・税込・税抜表記
<span class="priceBox">3,990</span>
@sou5534
sou5534 / fadeIn.css
Last active November 14, 2017 05:31
可視範囲に入ってたらfadeIn ※要jQuery
.fadeinTp01{
opacity : 0.1;
transform : translate(0, 50px);
transition : all 500ms;
}
.fadeinTp01.scrollin {
opacity : 1;
transform : translate(0, 0);
}