Skip to content

Commit

Permalink
photo13-create
Browse files Browse the repository at this point in the history
  • Loading branch information
@shinyasato0728
shinyasato0728 committed Aug 25, 2018
1 parent 6ae6de6 commit db44437
Show file tree
Hide file tree
Showing 14 changed files with 1,019 additions and 6 deletions.
30 changes: 30 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,36 @@ h3 { font-size: 1rem; margin-bottom: 1rem;}
.margins { margin-top: 12px; margin-right: 24px; margin-left: 36px;}
```



- [postcss-instagram](https://www.npmjs.com/package/postcss-instagram)

Instagram風の加工を、PostCSSでできるようになる。

```
/* postcss.css */
.postcss__instagram { filter: 1977;}
/* build.css */
.postcss__instagram {
position: relative;
display: inline-block;
}
.postcss__instagram img {
filter: sepia(.5) hue-rotate(-35deg) saturate(1.6) contrast(.9);
}
.postcss__instagram:after {
box-shadow: inset 0 0 3em #222;
position: absolute;
top: 0;
right: 0;
bottom: 2px;
left: 0;
z-index: 1;
content: "";
}
```

---

# 画像の表示方法について
Expand Down
301 changes: 301 additions & 0 deletions content/photos/cn/photo13.cn.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,301 @@
---
title: "使用PostCSS制作类似Instagram的图片"
date: 2018-06-05
categories: ['photos']
caption: "PostCSS"
eyecatch: '/images/photos/photo13_firstview.png'
ogp: 'images/photos/photo13_firstview.png'
url: '/cn/photos/photo13/'
draft: false
---

<article class="post__page">
<div class="post__page__wrapper post__photos__wrapper">
<h3>使用PostCSS制作类似Instagram的图片</h3>
<small>PostCSS</small>
{{< figure src="/images/photos/photo13_firstview.png" alt="">}}
</div>
<div class="post__text--wrapper">
<h2 class="post__photos--title">准备原始图像</h2>
<figure>
<img class="lazyload" data-src="/images/photos/photo13_01.png" alt="">
</figure>
<p>这次我将使用这个图像，我想用PostCSS进行图像处理。</p>

<h2 class="post__photos--title">安装插件</h2>
<pre class="prettyprint">
<code>
npm install postcss-instagram
// or
yarn add postcss-instagram

// postcss.config.js
module.exports = (ctx) => ({
require('postcss-instagram')
]
});
</code>
</pre>

<h2 class="post__photos--title">1977</h2>
<figure class="postcss__fill__1977">
<img class="lazyload" data-src="/images/photos/photo13_01.png" alt="">
</figure>
<pre class="prettyprint">
<code>
/* PostCSS */
.postcss__instagram { filter: 1977;}

/* build */
.postcss__instagram {
position: relative;
display: inline-block;
}
.postcss__instagram img {
filter: sepia(.5) hue-rotate(-35deg) saturate(1.6) contrast(.9);
}
.postcss__instagram:after {
box-shadow: inset 0 0 3em #222;
position: absolute;
top: 0;
right: 0;
bottom: 2px;
left: 0;
z-index: 1;
content: "";
}
</code>
</pre>

<h2 class="post__photos--title">Amaro</h2>
<figure class="postcss__fill__amaro">
<img class="lazyload" data-src="/images/photos/photo13_01.png" alt="">
</figure>
<pre class="prettyprint">
<code>
/* PostCSS */
.postcss__instagram { filter: amaro;}

/* build */
.postcss__instagram {
position: relative;
display: inline-block;
}
.postcss__instagram img {
hue-rotate(-10deg) contrast(.9) brightness(1.1) saturate(1.5)
}
.postcss__instagram:after {
box-shadow: inset 0 0 3em #222;
position: absolute;
top: 0;
right: 0;
bottom: 2px;
left: 0;
z-index: 1;
content: "";
}
</code>
</pre>

<h2 class="post__photos--title">Brannan</h2>
<figure class="postcss__fill__brannan">
<img class="lazyload" data-src="/images/photos/photo13_01.png" alt="">
</figure>
<pre class="prettyprint">
<code>
/* PostCSS */
.postcss__instagram { filter: brannan;}

/* build */
.postcss__instagram {
position: relative;
display: inline-block;
}
.postcss__instagram img {
sepia(.5) contrast(1.3)
}
.postcss__instagram:after {
box-shadow: inset 0 0 3em #222;
position: absolute;
top: 0;
right: 0;
bottom: 2px;
left: 0;
z-index: 1;
content: "";
}
</code>
</pre>

<h2 class="post__photos--title">Earlybird</h2>
<figure class="postcss__fill__earlybird">
<img class="lazyload" data-src="/images/photos/photo13_01.png" alt="">
</figure>
<pre class="prettyprint">
<code>
/* PostCSS */
.postcss__instagram { filter: earlybird;}

/* build */
.postcss__instagram {
position: relative;
display: inline-block;
}
.postcss__instagram img {
sepia(.4) saturate(1.8) contrast(1.1) brightness(.9) hue-rotate(-20deg)
}
.postcss__instagram:after {
box-shadow: inset 0 0 3em #222;
position: absolute;
top: 0;
right: 0;
bottom: 2px;
left: 0;
z-index: 1;
content: "";
}
</code>
</pre>

<h2 class="post__photos--title">Inkwell</h2>
<figure class="postcss__fill__inkwell">
<img class="lazyload" data-src="/images/photos/photo13_01.png" alt="">
</figure>
<pre class="prettyprint">
<code>
/* PostCSS */
.postcss__instagram { filter: inkwell;}

/* build */
.postcss__instagram {
position: relative;
display: inline-block;
}
.postcss__instagram img {
grayscale(1) brightness(1.2) contrast(1.05)
}
</code>
</pre>

<h2 class="post__photos--title">Kalvin</h2>
<figure class="postcss__fill__kalvin">
<img class="lazyload" data-src="/images/photos/photo13_01.png" alt="">
</figure>
<pre class="prettyprint">
<code>
/* PostCSS */
.postcss__instagram { filter: kalvin;}

/* build */
.postcss__instagram {
position: relative;
display: inline-block;
}
.postcss__instagram img {
sepia(.3) saturate(2.2) brightness(1.3) contrast(1)
}
.postcss__instagram:after {
box-shadow: inset 0 0 3em #555;
position: absolute;
top: 0;
right: 0;
bottom: 2px;
left: 0;
z-index: 1;
content: "";
}
</code>
</pre>

<h2 class="post__photos--title">Lo-Fi</h2>
<figure class="postcss__fill__lofi">
<img class="lazyload" data-src="/images/photos/photo13_01.png" alt="">
</figure>
<pre class="prettyprint">
<code>
/* PostCSS */
.postcss__instagram { filter: lo-fi;}

/* build */
.postcss__instagram {
position: relative;
display: inline-block;
}
.postcss__instagram img {
contrast(1.5) brightness(.9) sepia(.05)
}
.postcss__instagram:after {
box-shadow: inset 0 0 7em #000;
position: absolute;
top: 0;
right: 0;
bottom: 2px;
left: 0;
z-index: 1;
content: "";
}
</code>
</pre>

<h2 class="post__photos--title">Nashville</h2>
<figure class="postcss__fill__nashville">
<img class="lazyload" data-src="/images/photos/photo13_01.png" alt="">
</figure>
<pre class="prettyprint">
<code>
/* PostCSS */
.postcss__instagram { filter: nashville;}

/* build */
.postcss__instagram {
position: relative;
display: inline-block;
}
.postcss__instagram img {
sepia(.4) saturate(1.5) contrast(.9) brightness(1.1) hue-rotate(-15deg)
}
.postcss__instagram:after {
box-shadow: inset 0 0 100em #00f;
opacity: .5;
position: absolute;
top: 0;
right: 0;
bottom: 2px;
left: 0;
z-index: 1;
content: "";
}
</code>
</pre>

<h2 class="post__photos--title">Toaster</h2>
<figure class="postcss__fill__toaster">
<img class="lazyload" data-src="/images/photos/photo13_01.png" alt="">
</figure>
<pre class="prettyprint">
<code>
/* PostCSS */
.postcss__instagram { filter: toaster;}

/* build */
.postcss__instagram {
position: relative;
display: inline-block;
}
.postcss__instagram img {
sepia(.4) saturate(2.5) hue-rotate(-30deg) contrast(.67)
}
.postcss__instagram:after {
box-shadow: inset 0 0 3em #222;
position: absolute;
top: 0;
right: 0;
bottom: 2px;
left: 0;
z-index: 1;
content: "";
}
</code>
</pre>
</div>
</article>
Loading

0 comments on commit db44437

Please sign in to comment.