r-aidaのブックマーク - はてなブックマーク

CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld

以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と

r-aida 2017/11/02

CSS

リンク

より効率よくPhotoshopを使うために知っておきたい便利機能 25 - NxWorld

主にこれからPhotoshopを使い始めようと思っているとか使い始めたばかりという人向けに、知っておくと便利な機能を紹介します。ひとつひとつはちょっとしたことでも多用するのであれば覚えておくことでより効率よく作業することができますし、中には使いこなすことができれば大幅な作業時間の短縮に繋がるものもあります。ここで紹介しているのは「Adobe Photoshop CC 2017」を使用した想定のものになります。その他のバージョンを使用している場合は一部使用できない機能があったり、機能自体はあってもメニュー位置や設定方法などが若干異なっている可能性があります。ショートカットを活用する特定のキーでツールを選択状態にしてすぐ使えるようにしたり、メニューから選んで実行していくようなものを即座に実行できるようになど、Photoshopには様々なショートカットが用意されており、普段からよく利用

r-aida 2017/09/27

photoshop

リンク

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld

自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。