自由な形に画像の切り抜きができるSVGのclip-path polygonを CSSで行う
CSSで画像の切り抜きをする SVG の ClipPath で polygon というものがあり 3点以上の座標をX点とY点で指定することで、その領域を切り抜くことが出来ます 画像編集ソフトでクリッピングするようなもので […]
WordPressをデータベース(MySQL)不要で、インストールして利用する方法
レンタルサーバーには MySql が使えるサーバーと使えないサーバーがあります WordPress は MySQL をつかって、動作するので MySQL が使えないサーバーでは、Wordpress が利用できません (M […]
背景が4方向にスライドするコンテンツの切り替えが美しい jQueryをつかったアイディア
複数のコンテンツを、コンテンツごとに1画面表示にして それぞれを、表示するときの切り替えが美しい
jQueryをつかって、中身はそのままでHTMLタグを書き換える
HTMLタグを強制的に変更したいときに HTMLから操作がするのが難しいケースや、動的に変更させたいときに使える方法 jQueryを使ってHTMLのタグの中身はそのままで、タグのみを変更する […]
jQueryだけでiframeを再読み込み(reload)させる方法とプレーンなjavascriptを使った方法
アニメーションが伴うものや ランダムな要素があるもので、何度か確認したいものがあります そんな時にはiframe内を再読み込みさせてやりたい それを解決する方法
jQueryを使ってページの先頭へのスムーズにスクロールするボタンと、スクロールに合わせて表示を作る
jQueryを使って ある程度スクロールしたら、ページ先頭へ戻るボタンが出てきて クリックすると、スムーズにスクロールしてページの先頭まで移動するボタンを作ります
【簡単】コピペで設置 Feedlyの購読者数のカウントボタンを作る
Feedly の高読者数を取得して表示し FacebookやTwitterの様に、カウントを表示したボタンを作る方法
自動で途切れなくエンドレスにスライドし続けるCSSだけでつくるギャラリーのアイディア
jQueryプラグインのスライダーとかで、自動で動くエンドレスなスライダーを 実装することが多々有りますが こちらの方法は、javascriptを使わずにCSSのみで エンドレスに途切れずに流れるスライダーを実現しています また背景と、画像がパララックスに動いているのも良い
要素が画面内に現れた時にイベントを実行する jQuery.invew プラグインの使い方
パララックスのWEBサイト等で スクロールしていくと、次々にコンテンツが表示されたり アニメーションしたりするものがありますよね そういったものを簡単に実装することが出来るのが jQuery.inview […]
画面が分割されてコンテンツが表示されるWEBサイトのエントランスページのデザインのアイディア
ENTER ボタンをお押すことで内容が見れるようになる エントランスページのデザインのアイディア
CSSのぼかし(blur)のテクニック ～filterを使う方法とfiterを使わない方法～
最近気に入っているのが、CSSを使ったブラー・ぼかしを与える効果 いろいろな演出に利用出来ます 単純にCSSにあるfilterを使ってblurを掛ける方法と テキスト限定ですが、filterを使わずにblu […]
jQueryのscrollTopを使った変化する要素を作る
最近、スクロールすると ヘッダー部分のナビゲーションが変化するのをよく見かけますね ある程度スクロールするとついてくるタイプのものや スクロールするとサイズや形が変化するタイプのもの等々ありますね 大体は、 […]
WordPressで自動的に過去記事を一定間隔でSNSに投稿する方法
WordPressではSNSへ自動的に、記事のリンクを投稿するプラグインがあります Social Networks Auto Poster(SNAP) というプラグインもその一つです このSNAPではツイッターはもちろん […]
フォーカスでシュワーっと消えていく、プレースホルダ
input要素の欄にフォーカス(入力できる状態)にすると input要素にあるプレースホルダが、ぼやけてシュワーーっと消えていくアニメーションが特徴的 jQueryを使って、フォーカスが当たると、 blurというクラスをつけて、文字をぼかしています
テキストをスロットのようにグルグルと回転させて表示するコード(プラグイン)
スロットのロールに文字を入れて それを回転させて、指定した文字が表示冴えれるようにしたものです 初期設定があるので、その部分を変更することで簡単に目的の文字や、他の表示される文字を決めることが出来ます
WordPressのテーマのアップデートを子テーマで回避する
WordPressを使っていると いろいろカスタマイズしたくなると思います ちょっとした、CSSのカスタマイズとかは日常茶飯事じゃないですか？ むしろ、Wordpressのテーマをデフォルトのまま使い続ける […]
要素の角に斜めのリボンをテキストが常に中央に来るようにする方法(工夫)
HTMLで角にリボンをつけてやるときに、テキストが常に中央になるようにする工夫。一定の条件を守れば、常に45度のリボンに出来る
CSSのcontent: “”;に動的に、attrを使ってHTMLのdata-から文字を取得して入れる方法
CSSのcontentに動的に文字を当てはめることが出来るattrの使い方、動的に生成されるHTMLと相性がよく、IE8以上から一応利用することが出来る
background-blend-mode: overlay; を使って、画像、グラデーションを重ねて表示させる方法
background blend mode を使って、背景をオーバーレイ処理する方法。まだ対応しているブラウザは限られていますが、今後が楽しみなプロパティ
文章の目隠しをし、それを解除するのにCSSのアニメーションを巧みに使った アイディア
ネタバレ防止の目隠しのアイディア。文字を透明にして、文字の影だけを表示するだけで まるでボカシを書けたかのように表現するテクニックと、アニメーションによる解除が秀逸
