TOP  >  sass

Tag : sass

2016年03月16日

CSSでInstagramで使われているフィルタ効果を実現する「CSSgram」

どんな写真でも、優秀なフィルターを用いることで、それらしい写真が撮影できるInstagramは国内を始め世界中で利用されていますが、今日紹介するのはCSSでInstagramで使われているフィルタ効果を実現する「CSSgram」です。

cssgram01

CSSは非常に軽量で、1kb以下のコードで、様々な種類のフィルタ表現がブラウザ上で可能になります。その数は全21種類にも及びます。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:06  |  
Category: WebService   
このエントリーをはてなブックマークに追加
2016年03月14日

ハンバーガーボタンにアニメーションを「Tasty CSS-animated hamburgers」

スマートフォンサイトではすっかりお馴染みのメニューアイコン、ハンバーガーボタン。最近ではスマートフォンだけではなく、PCサイトもメニューとして利用されているのもよく見ますが、今回紹介するのは、ハンバーガーボタンにアニメーションを簡単に与えることができる、「Tasty CSS-animated hamburgers」です。

Hamburgers

こちらはCSSのアニメーションを利用してスムーズにアニメーションするハンバーガーボタンを簡単に実装可能です。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:33  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加

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

2008年02月13日

コピーの手間をちょこっと削減。選択範囲を自動コピーするFirefox拡張機能「AutoCopy」

ブログを書いていると多用するのがコピー&ペースト。ショートカットも簡単で、これといって負担になる作業ではないのですが、今日紹介するFirefox拡張機能は文字列を選択しただけでクリップボードにコピーしてくれるfirefox拡張機能「AutoCopy」です。

通常コピーまでは行程的に文字列を選択して、ショートカットを押してという2段階になっていますが、この拡張機能を導入すれば一工程減らして、コピーをすることができます。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:22  |  
Category: firefox , Tool   
tag: firefox Tool
2011年12月14日

コンクリートのさまざまな表情を利用したテクスチャパック「70 Concrete Texture Packs」

コンクリートのテクスチャは、無機質な印象でありながらも、使い方次第でいろいろなデザインに幅広く活用できる素材として重宝されています。今回はそんなコンクリートのさまざまな表情を利用したテクスチャパック「70 Concrete Texture Packs」を紹介したいと思います。


Freebie: Concrete and Pavement Texture Pack – DesignM.ag

シンプルな定番タイプから、使い込まれ味わいが感じられるタイプなど、ジャンルは一つでも、たくさんの種類のテクスチャが収録されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:14  |  
Category: Design   
2016年10月13日

登録されたパターンをベースにカスタマイズができるパターン配布サイト「HeroPatterns」

WEBデザインの世界感を表現する上で便利な素材がパターン。どのようなパターンを背景に用いるのかで全く印象が異なったりします。それだけに様々な背景素材が配布されていますが、今日紹介するのは登録されたパターンをベースにカスタマイズができるパターン配布サイト「HeroPatterns」です。

HeroPatterns01

決められたパターン素材をただ、取得するというものでは無く、登録されたパターンをベースに自分自身でカスタマイズして利用することが可能です。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:33  |  
Category: Design , vector , WebDesign   
2017年05月17日

個性的なフリーアイコン20種がまとめられた「20 Free Product Feature Icons Sets」

webサイト制作などに欠かせないアイコン。これ一つで情報をわかりやすく伝えることができるためスペースの削減にも繋がります。今回ご紹介するのはそんなアイコンの中から個性的なデザインのものをまとめた「20 Free Product Feature Icons Sets」です。

スクリーンショット 2017-05-16 17.27.01

こんなの欲しかったと思えるようなアイコンが紹介されています。その中からおすすめのアイコンを幾つかピックアップしましたので、以下よりご覧下さい。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: vector , WebDesign   
2012年04月28日

比較的最近発表されたデザイン制作に使いやすいテクスチャまとめ「A Selection Of Various Useful New Textures – 40 Examples」

手軽にデザインの表現力を高めてくれるテクスチャは、デザイン制作の際に非常に便利に活用できますが、定番のレパートリーだけでなく、常に新しい素材との出会いを求めていきたいもの。そこで今回紹介するのが、比較的最近発表されたデザイン制作に使いやすいテクスチャをまとめた「A Selection Of Various Useful New Textures – 40 Examples」です。


stock.xchng – paper rainbow 2 (stock photo by GiniMiniGi)

自然の織り成す美しい風景から、可愛らしさを感じられる素材まで、さまざまなテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:01  |  
Category: Design   
2012年08月15日

ドラッグ&ドロップでイメージファイルをアップロードできる「HTML5 File Upload」

イメージファイルをアップロードする機会は、様々なコミュニケーションサービスが展開されている現在、どんどんと増えていると思いますが、ファイルをローカルから選択してアップロードするというのは直感的ではなく、リテラシーが低い層には障壁にもなりえます。今日紹介するのはそんなファイルのアップロードを簡単にしてくれる、ドラッグ&ドロップでイメージファイルをアップロードできる「HTML5 File Upload」です。

こちらは、予め決められた領域にドロップするだけでイメージをアップロードすることができます。またドロップ後にプレビューを出して確認その後、アップロードするという流で誤ってアップロードするということも未然に防げる仕組みになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:37  |  
Category: WebDesign   
2017年04月24日

選択した色を人工知能から提案を受けることができるカラージェネレーター「colormind.io」

デザインにとって色の配色はとても重要です。しかし色種類は膨大で、更にその中で組み合わせを考えるとなると、頭を悩ませる人も多いのではないかと思います。今回はそんなシーンで活躍してくれる便利なカラーパレットツール「colormind.io」を紹介いたします。

color01

一般的に使われる自動生成ツールではなく、人工知能がカラーパレット生成をしてくれるという、他のジェネレーターとは違った新しい技術が取り入れられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Tool   
2014年12月29日

グラフィカルなテキストデザインを手がける際に試したい Photoshopテキストエフェクトチュートリアルまとめ「25 Amazing Photoshop Text Effects Tutorials for Designers」

メインのグラフィック作成に、テキストを使用することも多いと思いますが、ただ打ちっぱなしの文字だとどうしてもインパクトに欠けるもの。今回はそんな時に参考にしたい、Photoshopテキストエフェクトチュートリアルまとめ「25 Amazing Photoshop Text Effects Tutorials for Designers」を紹介したいと思います。

texteffect1229_1
How to Create a Colorful Text Effect in Photoshop

多彩なデザイン表現を可能にするテキストを使ったデザインのチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Photoshop   
2008年09月11日

ストックフォトサイトを横断画像検索「Cyclo.ps」

世界には様々なストックフォトサイトがありますが、今回紹介するのはそんなストックフォトサイトを横断検索できるWEBサービス「Cyclo.ps」です。検索対象はBigStockPhoto™、Fotolia©
iStockphoto®、Photos.com™、Shutterstock®と格安のストックフォトサービスばかりなので、予算がない時にも安心して使えます。

ストックフォトサイトと一口に言っても公開されている写真は様々なでサイト自身にも個性がありますのでこういった一括して検索できるのは嬉しいところです。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:49  |  
Category: Design   
tag: Design photo
2012年05月07日

ブラウザで確認しながらベーステーマが制作できるWPテーマジェネレーター「WordPress Theme Generator」

一般的なサイトを制作するよりもPHPや独自タグなど様々な知識が必要となるWordpressテーマの制作。普段から利用している方であればそこまで難しくない事かもしれませんが、HTMLタグの範疇からまだ出ていない技術者にとっては敷居が高いと作業だと思います。今日紹介するのはブラウザで確認しながらベーステーマが制作できるWPテーマジェネレーター「Wordpress Theme Generator」です。

上記のようなWPで完成されたサイトを見ながら右のメニューでカスタマイズする事が可能です。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:09  |  
Category: WebDesign , WordPress   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る