カラーフォントを使う
2018.01.24
※ Microsoft Edgeにてご観覧ください。


フォントは通常、
ブラックというか色がないものですが、
カラーフォントは文字通り、
色づけされたフォントです。

カラーフォントは、
一つの文字で異なる
複数のカラーを楽しめるフォントです。

この技術はすでにMicrosoft Edgeや
Firefoxなどで使うことができます。




  • 画像にマウスカーソルを乗せると

    キャプションを表示する

  • JavaScriptは使用しない

  • 写真の文字はWebカラーフォント

  • 写真のアイコンはWebアイコンフォント



Simple Tile Hover Effect

With a simple implementation,
we introduce a simple hover effect of
animating the caption of an image on
a beautiful gradation panel.














やっとKoalaにあえた♪
2018.01.19
これからのお話は
動物のコアラではありません。







ゆうと

ゆうと

これからcssはSass?
Sassってなに?





さくら

さくら

すごいCSS!のことよ♪
翻訳すると、
構文的に素晴らしいスタイルシート
ってことになるわ☆






ゆうと

ゆうと

えっ!
どんなふうにすごい!のかな?
使ってみたいな♪






さくら

さくら

だったら、
Rubyをインストールする必要があるわ。
それから、
Sassをインストールするのよ。
コマンドプロンプトからねっ♪






ゆうと

ゆうと

えっ?
コマンド?
黒い画面、苦手なんだな・・。

それでOKなの?






さくら

さくら

まだまだよ。

SassをCSSに
変換(コンパイル)する必要があるのよ。

ブラウザはCSSでないと
理解してくれないのよ。






ゆうと

ゆうと

だったら、
CSSでいいじゃん!

・・で・・どうするの?






さくら

さくら

GUIソフトのkoalaを使いましょう♪















簡単に書いたけれど、
たどりつくまで大変でした( ̄▽ ̄;)








画像を揺らすCSS
2018.01.15


  Photo by freddie marriage on Unsplash















  • CSSで画像を振り子のように揺らす

  • JavaScriptは使用しない

  • 画像はネコの写真だけ

  • フレームや糸はスタイルシート

  • ピンはWebアイコンフォント

  • ピンにtext-shadowで影を付ける

  • 写真の文字はグーグルフォント

  • 写真のアイコンはWebアイコンフォント






PAGE TOP

Copyright 2017,FOUR 4to6

- CafeNote -