日本語フリーフォント:FGポテ明・ゴ

フォント 2015.07.29 Wednesday Femto

日本語のフリーフォントって、探すのがなかなかむずかしいですよね。今回は私好みの日本語フリーフォントをご紹介します・

明朝体のような「FGポテ明」と

日本語フリーフォント:FGポテ明



ゴシック体のような「FPポテゴ」日本語フリーフォント:FGポテゴ

どちらも、あるようでなかった素敵な文字。これらを標準にしてもらいたいくらいです(笑)
会員登録が必要ですが、登録する価値は大いになるようです!


→関連サイト
JUGEMテーマ:web制作
comments(0) | trackbacks(0) | ▲PAGE TOP

CSS3:ぶるぶる震えるメニューボタン

HTML・CSS 2015.07.29 Wednesday Femto

メニューボタンを作りたくていろいろ探していたら、何だかとってもおもしろい動きをするボタンを見つけました。実用的かどうかは別として、おもしろかったのでご紹介します。

とりあえずマウスをのせてみてください!

See the Pen MwzvNJ by Femto (@femtoworks) on CodePen.



上のタブをクリックすると、HTMLもCSSもわかるようになっているので、ぜひ使ってみてくださいね。参考にしたサイトを書いておきますね。


→関連サイト
JUGEMテーマ:web制作
comments(0) | trackbacks(0) | ▲PAGE TOP

カラー:#acc768, #adc89f

カラー 2015.07.27 Monday Femto

今回の2色は、新しく作った「LOOSEWORKS」をいうサイトのメインカラーです。

#acc768, #adc89f

いつもフィーリングで作るので、メモしておかないと完全に忘れてしまいます(笑)

そして、あれこれ色をメモしているうちに、結局どの色を使ったのかがわからなくなってしまうという最悪の結果に・・・。今回は多分これで合ってます。

フォントはポピュラーな"Century Gothic"です。


→関連サイト
JUGEMテーマ:web制作
comments(0) | trackbacks(0) | ▲PAGE TOP

透明感あるボタンを作る。

Photoshop 2015.07.25 Saturday Femto

最近photoshopを使っていないなぁと思っていたら、おもしろそうなボタンの作り方があったのでマネして作ってみました。

透明感のあるボタン

ヽ儡歡絞形ツールでボタンの大きさ・形・色を決める。角丸長方形ツールでボタンの大きさ・形を決める。

▲譽ぅ筺璽好織ぅ襪妊疋蹈奪廛轡礇疋Δ慮果をつける。レイヤースタイルでドロップシャドウを効果をつける。

少し影がつきました。少し影がつきました。

8彩(内側)の効果をつける。光彩(内側)の効果をつける。

白いフチがつきました。白いフチがつきました。

ぅ哀薀如璽轡腑鵐ーバーレイで効果をつける。不透明度は50%程度。グラデーションオーバーレイで効果をつける。

グラデーションのつけ方はこんな感じ。グラデーションのつけ方はこんな感じ。

グラデーションがつきました。グラデーションがつきました。

ザ界線で効果をつける。カラーはボタンと似た色で。境界線で効果をつける。

効果をつけたあとはこんな感じ。効果をつけたあとはこんな感じ。

ctrlと角丸長方形のサムネイルをクリックして、選択範囲を取る。
新規レイヤーを作っておく。ctrlと角丸長方形のサムネイルをクリックして、選択範囲を取る。

Д譽ぅ筺治韻鯀択し、楕円形ツールで下部を囲んで選択から外す。レイヤー1を選択し、楕円形ツールで下部を囲んで選択から外す。

選択範囲を白く塗りつぶす。選択範囲を白く塗りつぶす。

不透明度を20%にしたら完成。不透明度を20%にしたら完成。

背景をレイヤーにしてから非表示にし、メニューの「イメージ」→「トリミング」→「透明ピクセル」を選択して「OK」をクリックすると、ボタンだけ取り出せます。背景をレイヤーにしてから非表示にし、メニューの「イメージ」→「トリミング」→「透明ピクセル」を選択して「OK」をクリックすると、ボタンだけ取り出せます。透明ピクセルイメージのトリミングの完成。

もう、こんな風なボタンを作る人はいないのかもしれないけど、久々に触ったのでお勉強になりました。参考にさせていただいたページを下記に書いておきます。


→参考サイト
comments(0) | trackbacks(0) | ▲PAGE TOP

HTML5の事実。

HTML・CSS 2015.07.11 Saturday Femto

今、HTML5のお勉強をしています。
まずは、DOCTYPE宣言からはじまるHTMLファイルを作りました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
  <p>ただ今「HTML5」の勉強中です。</p>
</body>
</html>

こんな風に書いていたものが、

<div id="header">・・・</div>
<div id="menu">・・・</div>
<div id="content">
  <div class="entry">・・・</div>
  <div class="entry">・・・</div>
  <div class="entry">・・・</div>
</div>
<div id="footer">・・・</footer>

こんなに簡略化?されました。

<header>・・・</header>
<nav">・・・</nav>
<section>
  <article>・・・</article>
  <article>・・・</article>
  <article>・・・</article>
</section>
<footer>・・・</footer>

いつからこんな風になったのか、誰も教えてくれませんでした(笑)


→関連サイト
JUGEMテーマ:web制作
comments(0) | trackbacks(0) | ▲PAGE TOP
S M T W T F S
 123456
78910111213
14151617181920
21222324252627
28293031   
<< July 2019 >>

OTHERS

LINKS





qrcode
RECENT COMMENT