FaceBook風のダイアリログを表示するjQueryのプラグイン 『FaceBook Dialog』 の使い方
Facebook風にモーダルウィンドウが現れるようにするjQueryのプラグインです。色使いとかレイアウトはFacebook風なんですが、表示するときのエフェクトは色々設定があり好きなモノが選べれるようになっています & […]
マルチカラムを使って、雑誌のような文章の段組を実現出来るCSSプロパティ 『columen-count』
CSS3にはcolumen-countっていうプロパティがあります。コレを使うことで連なった文章レイアウトして表示することが出来るようになる CSSのcolumenとは？ 簡単なイメージにするとこのようにな […]
無料で使えるパブリックドメインのイラストを簡単にWordPressで使えるようにするプラグイン 『ClipArt』
WordPressで挿絵を入れたいときに、無料で使える画像を探してきて挿入っていう手間をWordpressのエディタ画面だけで完結させれるWordpressのプラグインがあります、無料で使える画像でパブリックドメイン(著 […]
MENUのEとバーガーボタンを掛けた アイディア 『MENU + hamburger icon ?』
MENU + hamburger icon ? By cihadturhan MENUを表示させるための三本線のボタンのことをバーガーボタンと言うのですが、そのバーガーボタンとMENUのEを掛けて MENU […]
プニプニ、プルンプルンなCSSで作られたエフェクトが良いボタン 『Gelatin over button effect with Sass』
Gelatin over button effect with Sass By François Lesenne マウスオーバーすると、ボタンがプルンプルンします。このゼリーのようなプルプル感がとても良い […]
javascriptを非同期で読み込ませてレンダリングブロックを回避することで、ページの表示の体感を早める
WEBサイトにはページの読み込みにかかる時間と、人がサイトを開いた時に表示されるまでの時間には差があって。ページの読み込み時間をよく比較することが有るのですが、実際にはページ全体が読み込まれなくてもファーストビューがパッ […]
リッチ感のあるオシャレなカウントダウンタイマーで目的の日時までのカウントダウンにするのコード 『Countdown Clock』
かなりオシャレに仕上がっているカウントダウンタイマーです、画像は使わずにすべてCSSでデザインされています。とてもリッチ感がありそのまま使えるクオリティです。
jQueryのscrollとscrollTOPを使って一定量をスクロールしたら実行するコードの例
ナビゲーションがすぐに付いてくるのではなく、ある一定量をスクロールしたら付いてくるタイプのナビゲーションがありますよね、あのようなものを実装するのにjQueryを使えば簡単に出来てしまいます […]
Bootstrapを使ってWEBサイトを作ってみようぜ 第4回 「制作事例をみてイメージを膨らまそう」
第1回 「CSSフレームワークって何？」 第2回 「グリッドシステムって何？ グリッドシステムを学ぶ」 第3回 「セットアップして利用開始できる環境を作ろう」 第4回 「制作事例をみてイメージを膨らまそう」 第5回 「全 […]
アメコミ風のハーフトーンを表現したCSSで作られたbackground 『Comic Book Half Tone Background』
アメリカのコミック風にCSSで背景を作ったものです こちらはBodyにbackgroundとして設定してありますが、見出しの背景とかにこういったアメコミのハーフトーンを使って文字もコミック系のものをつかえば、面白みのある見出しを作れるかなと思います
角が丸くえぐられた感じのカードをCSSのみで作るテクニック 『Fail better: CSS inverted border radius』
角丸の逆、角を丸くえぐった感じのデザインをCSSのみで実現しています。 どうやって作っているのか不思議ですよね、1つのDIVにBeforeとAfterだけではこのようにはつくれません
CSS3から追加されたjustify-contentって何？というお話し
justify-contentは使ったことが無いのですが、とあるコードに使われていたのでどういったものか分からなかったので調べてみました flexboxコンテナという概念あり、flexboxコ […]
SVGを使ったヌルヌル動くアニメーションがすごすぎる 『Full SVG Animation (first Test)』
SVGだけで作られています、CSSもjavascriptも使われていません SVGアニメーションだけでこんなことまで出来てしまうとは驚き
input range の値をリアルタイムで表示するjavascriptとデザイン 『Range Input: change live value』
input range はスライドさせることで数値が変化するタイプの入力でボリュームの設定とかに使われるようなものです、それの値をjavascriptを使ってリアルタイムに表示させています
WordPressでPHPのインクルードファイルを一つのファイルにまとめる方法
WordPressのテーマでインクルード使っていますか？ 私も使っています、広告を挿入する箇所のAdsenseのコードとかはテーマのテンプレートに直接書かずにインクルードで読み込ませるようにしています、そうしたほうがその […]
一つのメールアドレスでいろいろな情報を表すアイディア 『MINIMAL BUSINESS CARD DESIGN』
MINIMAL BUSINESS CARD DESIGN http://smus.com/minimal-business-card-design/ ひとつのメールアドレスの中に、複数の情報を表したアイディ […]
ベンダープレフィックスを簡略的に出来るSCSSの@mixinのテクニック
CSSのベンダープレフィックスってめんどくさくないですか？ SCSS+compassだと、自動的にプレフィックスを追加してくれて楽なようですが、私はcompassを使っていません Bracketsの拡張機能でSCSSを使 […]
activeのアクションが良い、ちょっと変わったアニメーション付きのボタン 『Change text on :hover and :active』
ボタンをマウスオーバーすると、文字がすり替わり、さらにクリックしている状態でさらに文字がすり替わるというものです。
CSSでちょいオシャレなアンダーラインのタイポグラフィー 『A Better underline』
アンダーラインを少しオシャレにしたもの アンダーラインはbackgroundで1pxで表現されています
WordPressで日本語のキーワードに自動的にリンクを挿入できるプラグイン 「WP Keyword Link」
WordPressでキーワードに自動的にリンクを挿入できるものが無いかなーと思ってさがしていたのですが、いろいろ試して、どれも日本語に対応していません、日本というのはマルチバイト文字なのでマルチバイト文字に対応したプログ […]
