TOP  >  hover action

Tag : hover action

2018年04月23日

WebGLによる 歪みの効果を与えるスタイリッシュなホバーエフェクト「WebGL Distortion Hover Effects | Codrops」

WEBデザインならではのエフェクトは、私たちの目を楽しませてくれたり、あっと驚かせてくれたりします。今回ご紹介する「WebGL Distortion Hover Effects | Codrops」は、WEBの中でもよく目にするホバーアクションのエフェクト集になります。

DistortionHoverEffect_top

歪みの効果を与え、滑らかに動くスタイリッシュなホバーアクションです。

詳しくは以下

(さらに…)

続きを読む
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2008年09月01日

方眼紙を意識したフリーゴシックフォント「FontStruct Font-Les Bains」

様々なフリーフォントを紹介してきましたが、今回紹介するのは方眼用紙のバックグラウンドの線を使って作ったフォント「FontStruct Font Les Bains」です。アルファベットの大文字、小文字、数字、記号と基本的な物はすべて揃っています。また記号的な物や独自のフォントタイプも用意されているみたいです。
 


 

このフォントは以前、「オリジナルフォント作成サービス「FontStruct」」という記事で紹介したWEBサービスを使って作られたフォントです。

詳しくは以下

(さらに…)

続きを読む
posted 02:13  |  
Category: Design , Font   
tag: 
2008年10月18日

ハイクオリティなWordPressテーマ15選「 15 High Quality Premium-Like Free WordPress Themes」

海外ではかなりレベルの高いテーマが配布されているWordpress。本当に様々なテーマが出回っていますが、今日紹介する「15 High Quality Premium-Like Free WordPress Themes」は数あるWordpressテーマのなかでも有料の物に引けを取らない素晴らしいテーマを15個、選び抜いたエントリーです。


1. Agregado Lifestream

有名なのもあり、よく見かけるテーマもありますが、今日はその中でもあまり見かけない物を中心にいくつかピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 11:30  |  
Category: WebDesign , WordPress   
tag: CSS webdesign
2016年10月09日

ECサイトのためのフラット&ストロークアイコンセット「The Flat & Stroke eCommerce Icon Set」

WEBサイトの大きなカテゴリの一つEコマース。国内でも多くのECサイトが立ち上がり、販売していますが、そこで必要なユーザーインターフェイスはまた情報を伝えるだけのWEBサイトとは異なります。今日紹介するのはECサイトのユーザーインターフェイスを豊かにしてくれるECサイトのためのフラット&ストロークアイコンセット「The Flat & Stroke eCommerce Icon Set」です。

ecicon01

全部で50種類ものアイコンがセットとなっており、2色で表現されたものと、線のみで描かれた2種類のアイコンが収録されています。

詳しくは以下

(さらに…)

続きを読む
posted 09:44  |  
Category: Design , vector , WebDesign   
2017年09月28日

様々なシーンで使えるアイコンセット「Basicons Multipurpose Icon Set」

Webサイトの利用者が増えるほどその使い方は様々で、幅広い使用用途を考慮した上でサイトの構築を行わなければなりません。中でもUIはとても重要で、いかに分かりやすくスムーズにユーザーを導くことができるかがポイントです。そんな時に役に立つのが今回紹介する、様々なシーンで使えるアイコンセット「Basicons Multipurpose Icon Set」です。

bm_IconSet01

およそ500種類の異なるアイコンがカテゴリごとに集約された、汎用性の高いアイコン素材です。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: Design , Tool   
2017年10月08日

洗練された雰囲気が特徴のiPhone Xモックアップセット「iPhone X Mockup Set」

11月に発売予定のiPhoneX。多くの人が発売を待ち望む中、デザイン業界ではすでに実機のモックアップが数多く登場しています。そんな中今回は、洗練された雰囲気が特徴のiPhone Xモックアップセット「iPhone X Mockup Set」を紹介したいと思います。

iPhoneX_mock-up01

iPhone Xをテーマに、シンプルで使いやすい構成のモックアップビジュアルがまとめられています。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: WebService   
2010年03月14日

紙の表現を可能にするフリーphotoshopブラシ集「A Collection of Photoshop Paper Brushes for Your Next Design」

制作にとても便利な紙の表現。無機質なデザインに質感や暖かみを与えてくれます。便利だけあって、背景素材は多数公開されていて、クオリティの高いテクスチャも多いのですが、今回紹介するのは紙の表現を可能にするphotoshopブラシを集めたエントリー「A Collection of Photoshop Paper Brushes for Your Next Design」を紹介したいと思います。

old-paper01
Old Paper

破れだったり、表面の質感だったりと様々な紙を表現んするブラシセットが集められています。テクスチャでは実現できなかった部分もブラシであれば自分で加工していけるので色々と表現の幅も広がるかと思います。今日はその中からいくつかきになったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 05:05  |  
Category: Design , Photoshop   
2009年03月15日

jQueryとCSSでリスト表示を簡単に切り換えるTips「Easy Display Switch with CSS and jQuery」

サムネイル一覧と詳細に説明を付けた一覧をページの遷移無しでスムーズに切り換えたいそんな人ともいるかと思います。今日紹介するのはjQueryとCSSを使ったリスト表示を簡単にスムースに切り換えるTips「Easy Display Switch with CSS and jQuery」を紹介したいと思います。

jquerilistview

上記のような二種類のリストの見せ方をボタン一つで切り換え縷々用になります。ギャラリーページや情報が多いサイトではかなり便利そうです。

詳しくは以下

(さらに…)

続きを読む
posted 11:30  |  
Category: WebDesign   
2017年04月21日

スマホ含むUXデザイン向けのフリーワイヤーフレームテンプレート50「50 Free Wireframe Templates for Mobile, Web and UX Design」

ワイヤーフレームの作成は、プロジェクトを進行する上で非常に重要な役割をもち、全体の構造把握のために必要な過程。そんなシーンで活用したい、フリーで配布されているものを豊富にまとめている「50 Free Wireframe Templates for Mobile, Web and UX Design」を今回は紹介いたします。 

wire00
Freebie – Iphone templates for mobile storyboard by Jean-Baptiste Eudeline – Dribbble

便利に活用できそうな、さまざまなテイスト、種類のワイヤーフレームが揃っています。気になったものをいくつかピックアップしてご紹介しているので、ご覧下さい。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: WebDesign   
2013年12月22日

ヴィンテージ感を演出するフィルムテクスチャパック「Seven Free Microscopic Film Textures」

最近はどれもデジタルに置き換わりフィルムそのものを見る機会が減ってきました。経年劣化によるノイズや傷などなんの機能のもはたしませんが、一つ一つ味がありフィルムならではの魅力というのもあるのではないでしょうか?。今回紹介するのはそんなフィルムをテクスチャ化したヴィンテージ感を演出するテクスチャパック「Seven Free Microscopic Film Textures」です。

sfmft_0

このテクスチャはただ単にテクスチャ化した訳ではなく、部分的に拡大し、抽象化することによって不思議な印象を与えるテクスチャに仕上がっています。

(さらに…)

続きを読む
posted 09:00  |  
Category: Design , Photoshop   
2016年09月27日

物を売るために参考になるWEBデザイン集

ECサイトからプロダクトランディングページまで物を売るためには様々なページが必要ですが、その中から決済画面、プライスページ、プロダクトページ、ストアページと大きくカテゴライズしてデザインを収集している、物を売るために参考になるWEBデザイン集を今回紹介したいと思います。

ec_web01

それぞれのカテゴリに特化して、デザインが集められており、スクリーンショットもフッターまでで取得しているため、サイト上でも全てを参照することが可能です。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: WebService   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る