CSSを使って描かれたオリンピックの輪 Olympic rings
Olympic rings http://codepen.io/MattSmith/pen/cHjIC 今の時期らいしいものですね オリンピックの五輪の輪をCSSで作成したものです あのリングとリングの重なりを表現してい […]
CSSのbox-sizingって知ってますか？borderやpaddingによるレイアウト崩れを防ぐことができる便利なプロパティ
CSSにbox-sizingっていうものがあります 私も最近知ったもので、まだまだ知らないものが沢山ありそうですが 今回紹介するbox-sizingを使うと、特に初心者が陥りがちなboderの幅の計算忘れ、padding […]
複数のてtext-shadowを使ってデコレーションされたテキストとアニメーション Trembling text
テキストシャドーをいくつも使うことで、文字に立体感をつけ、アニメーションでブルブルさせたものです ブルブルするアニメーションはちょっと使いドコロを選びますが、text-Shadowをうまく使った文字の装飾はいい勉強になりますね。
3Dにメリーゴーランドの様に回転する 画像ギャラリー 3D images gallery
遊園地に有るメリーゴーランドのように回転する 3Dに出来た画像ギャラリーです 画像をマウスオーバーすれば、回転がとまり、画像に掛けられたグレースケールのフィルターが解除されてカラーの写真になり画像が枠内に収まったまま少し拡大します
WordPressでテーブのセル結合を行えるようにするプラグイン Editor Extender
WordPressの記事は基本的にWLWを使って書いています それでも最終確認のためにWordPressの投稿画面を使いますが、プレビューとアイキャッチ登録とWLWでうまく書けないコード部分だけです WLWには表を挿入す […]
経歴や経緯、ロードマップなどに使えるWEBページを作れるコード Timeline Blueprint
ページを表示するときにアニメーションで線が走ります HTML部分はとてもシンプルなので、javascript部分をまるごとコピペして、CSS部分は背景や色を調整すればOK
WordPressの記事一覧(ループ)ではてなブックマークのボタンをそれぞれのページのブックマークとして設置する方法
はてなブックマークのボタンがありますが そのまま設置すれば、そのページのブックマークが出来ます URLとタイトルを指定すれば、指定されたURLとタイトルでブックマークされます これをWordPressで記事一覧のページで […]
WEBサイトに設置できる 3Dに回転する画像のスライド 3D Cube Carousel
3D Cube Carousel [CODEPEN] ▼コードとプレビューページ▼ http://codepen.io/frxnz/pen/HnEdt 一見普通のWEBサイトに設置されているようなスライドかな？と思ってし […]
WordPressで子孫カテゴリを選択しているだけでも、親・先祖カテゴリを表示する方法
WordPressのテンプレートタグでカテゴリを表示する<?php the_category(‘ ‘); ?>だけでは、選択しているカテゴリのみしか表示されません。 例 […]
WordPressでカテゴリを一括で解除できるプラグイン Batch Cat
2014年2月1日にこ創造WEBのデザインをリニューアルしたのですが、それに伴ってカテゴリの再編を行っていた所、一括でカテゴリを追加することが標準の機能に有るのに対して、一括でカテゴリを解除する方法が標準では備わっていな […]
ラジオボタンを使った、画像にエフェクトを与えるフィルタリングのアイディア Visual Database In Pure CSS
input type radio をうまく使って、選択中のものにCSSの内容を変化させることで表示に変化を与えています。 画像とinputの内容がうまく連動するように作られていて、絞り込みがされているかのようになっています
WordPressでレンダリングブロックを防ぐためにjavascriptをフッターに移動するプラグイン
テーマで読み込まれるjavascriptに関しては手作業でフッターへと移動させることができるのですが。 WordPress内部に有るjQueryや他のプラグインで読み込まれるjavascriptがヘッダー部分に自動で入っ […]
CSSだけで作られた、砂嵐も再現されたアナログテレビ Pure CSS TV
CSSのみで作られたアナログテレビです、画面にはアニメーションで砂嵐も流れるようになっています 画面部分にはYOUTUBEとかの動画を埋め込んでも面白いのではないかなと思います
ボックスがシュシュッとスライドして展開するタブ表示 Sliding Tab Box Things
ジワーっと開いたり、ジワーっと閉じたりするだけのスライドじゃなくて、ボックスの位置も移動してボックスが開くアニメーションのタブです
WordPressで通常のパーマリンクではない独自の短縮リンクを出力するコード
WordPressには標準で設定したパーマリンクとは別に、URLが短縮されたものがあります 管理画面 ＞ 投稿 ＞ 投稿編集ページで短縮URLを取得を押すと 記事IDを元にした短いURLを所得できます、このURLは301 […]
CSSとWEBフォントを巧みに使ったテキスト文字をまるでロゴのように表現されたデザイン
CSSでここまで出来る。CSSとWEBフォントをうまく使って、少しレトロ感があるロゴを作ったコード。文字を入れ替えれば、独自のロゴとしても使えそう
WordPressの関連記事を表示させるプラグインYARPPで好きなスタイルで任意な場所に表示させる方法
WordPressの関連記事を表示させるプラグインYARPPは、投稿の関連度を計算してそれに基づいて関連する記事を表示してくれるプラグインなんですが、もともと準備されている物以外にオリジナルな表示形式にカスタマイズする事 […]
CSSでカメラのレンズ・フォーカスリングをイメージフィルタをうまく使って表現したアニメーション Animated camera focus ring
CSSの画像フィルターのブラーを使って画像にぼかしを動的なアニメーションにして、フォーカスリングを回転させるアニメーションと組み合わせたものです、とてもうまく表現されています
画像の上でクリックしてマウスを動かすと削れて下の画像が出てくるCanvasを使ったギミック Scratch off image
画像の上でスクラッチすることで、下の画像が現れる仕組みです、お遊び系のティザーサイトに使えそうですね。
WordPressでの条件分岐の基本的な使い方。条件分岐と条件分岐タグを知っていればカテゴリ別にサイドバーを表示するのもお茶ノ子祭々
WordPressでテーマを自作している方には結構馴染みがあると思いますが 条件分岐タグを使うとできることが広がります できること その1 カテゴリ別に違った内容を表示する 例えば、広告などカテゴリ別に関連 […]
