2014-08-25

▼photoshopでアメコミ風画像に加工

Photoshop

今日は前からやってみたかったホップでかわいく仕上がるアメコミ風のやり方をメモメモ。

▼まず始めにイラストを用意

色が鮮やかだとさらにいいかも。

f:id:ishuko:20140825014423p:plain

（※レイヤーはCnt+Eで結合しておく。その他にバックアップとしてレイヤー結合前のものをグループ化してもよし。）

次に描画色と背景色を黒と白に設定します。

f:id:ishuko:20140825015020p:plain

全体的にこういういろにしたい！とあれば、なにかと白をくみあわせたらうまくいくかも。

レイヤーのコピーを作ります。

f:id:ishuko:20140825015028p:plain

次にコピーしたレイヤーの上に

フィルタ／スケッチ／ハーフトーンでハーフトーンにフィルタをかける

f:id:ishuko:20140825015412p:plain

これだけ！！

以外と簡単です！！！

2014-08-22

▼photoshopでvintage風な写真

Photoshop

vintageだとかレトロだとか、そういう雰囲気が大好きなあたしがphotoshopでなにかできないかなって白田らいっぱい出てきたので！

めもめもします。

まず写真を用意↓

f:id:ishuko:20140822122648j:plain

①０をクリックしてから、トーンカーブ：グリーン／37, ブルー/131を入力

f:id:ishuko:20140822122909p:plain

f:id:ishuko:20140822122914p:plain

②レベル補正：RGB　真ん中を1.36 右はじを236に。

f:id:ishuko:20140822123139p:plain

③明るさ、コントラスト：明るさ／6、コントラスト／51

f:id:ishuko:20140822123331p:plain

④トーンカーブ　０を選んで、　グリーン／13、ブルー／88

f:id:ishuko:20140822123521p:plain

f:id:ishuko:20140822123526p:plain

⑤明るさコントラスト　

f:id:ishuko:20140822123836p:plain

⑥トーンカーブ

f:id:ishuko:20140822123905p:plain

f:id:ishuko:20140822123920p:plain

⑦べた塗り#ffdaad

f:id:ishuko:20140822123945p:plain

描画モードを「乗算」にすれば、

このとーーーーーり★

f:id:ishuko:20140822124115p:plain

ちなみにこのレイヤーにかけたエフェクトは

f:id:ishuko:20140822124313p:plain

グループにしてまとめておけば他の画像にも使えちゃう。

f:id:ishuko:20140822124319p:plain

さらにひと手間でレンズ補正ですこし調整してあげるともっといい感じになりました。

f:id:ishuko:20140822124450p:plain

2014-08-22

▼positionを使って真ん中にする

CSS

以外とわからなくなるpositionを使った真ん中にする方法。

シンプルです！！

例）div class がboxの長方形、　縦100px　横200pxの場合。

f:id:ishuko:20140822121059p:plain

.box {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}
 
ポイントとしては、「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置することです。
 
ただし、positionを使うとz-indexはAndroidでは見れない、レイアウトが聞かないブラウザがある、など、あまりいい点がないのでなるべくfloatを使うように心がけましょう！！

2014-08-21

▼CSS3でアニメーション

CSS

CSS3を使ったアニメーションのバナーを作成。

まず、Photoshopで素材を作ります。

わたしはこんな感じのを作りました。

※文字をくりぬき、または画像の一部を切り抜いてすけるようにします。このとき、pngで保存を忘れずに！！

f:id:ishuko:20140821203123p:plain

これは文字と香水の液の部分をくりぬき。

①背景色が変わる

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS３アニメーション　背景色が変わる</title>
<style>
#box {
width: 300px;
height: 300px;
background: #F60;
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;/* firefox chrome */
-moz-: bg-color 10s infinite;/* 古いサファリ */
-ms-: bg-color 10s infinite;/* 古いIE */
-o-: bg-color 10s infinite;/* ふるいおぺら */
}

@keyframes bg-color {
0% { background: #F60;}
25% { background: #FF3;}
50% { background: #33F;}
75% { background: #F39;}
100% { background: #F60;}
}

@-webkit-keyframes bg-color {
0% { background: #F60;}
25% { background: #FF3;}
50% { background: #33F;}
75% { background: #F39;}
100% { background: #F60;}
}

</style>
</head>

<body>

</div>
</body>
</html>

②画像の周りが光る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<title>CSS3アニメーション　光る</title>
<style>

@charset "utf-8";
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

table {
border-collapse: collapse;
border-spacing: 0;
}
ul, ol {
list-style: none; /* マーカーを消す */
}
a {
text-decoration: none; /* 下線を消す */
}
img {
border: 0;
}
img, input {
vertical-align: bottom;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
background: #000;
}

#banner {
width: 500px;
height: 200px;
background: #000;
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;/* firefox chrome */
-moz-: bg-color 10s infinite;/* 古いサファリ */
-ms-: bg-color 10s infinite;/* 古いIE */
-o-: bg-color 10s infinite;/* ふるいおぺら */

/* 上下左右真ん中にpositionで設定 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

animation: shining 3s infinite;
-webkit-animation: shining 3s infinite;
}

/* 10pxをまわりにつければ、間が開いてそこが光る！！ */

@-webkit-keyframes shining {

0% { box-shadow: 0 0 7px #fff;
-webkit-box-shadow: 0 0 7px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
50% { box-shadow: 0 0 15px #fff;
-webkit-box-shadow: 0 0 15px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
100% { box-shadow: 0 0 7px #fff;
-webkit-box-shadow: 0 0 7px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
} /* chrome/safari */

@keyframes shining {

0% { box-shadow: 0 0 7px #fff;
-webkit-box-shadow: 0 0 7px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
50% { box-shadow: 0 0 15px #fff;
-webkit-box-shadow: 0 0 15px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
100% { box-shadow: 0 0 7px #fff;
-webkit-box-shadow: 0 0 7px #fff;
/* 白いドロップシャドウをかけると光って見える 7pxはぼけあしの長さ */
}
} /* IE/firefox */

</style>
</head>

<body>

</body>
</html>

③画像を回転させる

もう一枚画像を用意

今回はこちらを作成。↓

f:id:ishuko:20140821202857g:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<title>CSS３アニメーション　回転</title>
<style>

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
background: #000;
}

/* 2枚目の写真を1枚目の写真に重ねる */

ul li {
width: 500px;
position: absolute;
left: 50%;
margin-left: -250px;
transform-style: preserve-3d; /* 3Dアニメーションを有効にする */
-webkit-transform-style: preseved-3d;
-moz--transform-style: preseved-3d;

backface-visibility: hidden; /* 回転した画像の裏側が見えるかどうかの設定 */
-webkit-backface-visibility: hidden;
-moz--backface-visibility: hidden;
}

#front {
animation: flipFront 5s infinite alternate; /* [alternate]はアニメーションが一回再生したら逆再生なる */
-webkit-animation: flipFront 5s infinite alternate;
-moz-animation: flipFront 5s infinite alternate;
}
#back {
animation: flipBack 5s infinite alternate; /* [alternate]はアニメーションが一回再生したら逆再生なる */
-webkit-animation: flipBack 5s infinite alternate;
-moz-animation: flipBack 5s infinite alternate;
}
@-webkit-keyframes flipFront {
0% { transform: rotateY(0deg); -webkit-transform: rotateY(0geg);/* -webkitはなくても動くchromeは自動更新で新しくなるから、わざわざつけなくてもおｋ */
}
45% { transform: rotateY(0deg); -webkit-transform: rotateY(0geg);
}
55% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
100% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}

}

@-webkit-keyframes flipBack {
0% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
45% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
55% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
}
100% { transform::rotateY(0deg); -webkit-transform: rotateY(0deg);
}

}

/* firefoxでもおｋ！！ */

@keyframes flipFront {
0% { transform: rotateY(0deg); -webkit-transform: rotateY(0geg);
}
45% { transform: rotateY(0deg); -webkit-transform: rotateY(0geg);
}
55% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
100% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}

}

@keyframes flipBack {
0% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
45% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
55% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
}
100% { transform::rotateY(0deg); -webkit-transform: rotateY(0deg);
}

}

</style>
</head>

</body>
</html>

▼全部合わせたのものを作成

http://shk.chips.jp/portfolio/css3/index-all.html

2014-08-21

▼CSS3で縦書きをする

CSS

CSS３で縦がきに出来る！実践してみます。

ですが、これはなぜかChromeとIEには対応していて、Firefoxには対応していません。

なので、なんとか見栄えが良くなるよう、振り仮名を振って横書きでも見やすいようにします。

まずHTMLで

を使って以下のように書いていきます。

<rt><rt>で振り仮名を振るイメージ。この作業を終わったときに、Chromeで確認してみます。

▼こんな感じに。

鐘かねがなるなり

つぎに、<rp></rp>を使ってfirefoxを使ったときに振り仮名にどうにか（）をつけて

なんとか見栄えのいいものにする為に作業します。

▼HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS縦書き</title>
</head>

<body>

<p><ruby>柿<rp>(</rp><rt>かき</rt><rp>)</rp></ruby>くえば<br>
<ruby>鐘<rp>(</rp><rt>かね</rt><rp>)</rp></ruby>がなるなり<br>
<ruby>法隆寺<rp>(</rp><rt>ほうりゅうじ</rt><rp>)</rp></ruby><br>
</body>
</html>

▼Stylesheet

p {
font-family: "ＭＳＰ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;

margin: 0 auto;
font-size: 28px;
line-height: 4;
padding: 1em;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;/* firefoxは縦にならないからこれは要らないかも。振り仮名の（）だけ付く */

-ms-writing-mode: tb-rl;

-webkit-text-orientation: upright;/* 文字の方向をたてに決める */
}

これでOK!!

表示

▼IE, Chrome

f:id:ishuko:20140821201937p:plain