TOP  >  スニペット

Tag : スニペット

2018年12月01日

自然の風景を表現したコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」

デザインの主役となるコンテンツを考えるとき、簡単に取り入れることができるコードスニペットがあると便利ですよね。今回は、デザインをカスタマイズするときに役立つコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」を紹介します。

gazou1
Pure CSS Jellyfish

自然の風景をテーマにHTMLやCSS、JavaScriptで作られたコードスニペットがまとめられています。気になったものをいくつかピックアップしましたので、下記からご覧ください。

詳しくは以下
(さらに…)

続きを読む
このエントリーをはてなブックマークに追加
2018年04月19日

フリーで使える10種のアラートメッセージスニペット「10 Free CSS & JS Notification Alert Code Snippets」

Webサイトにはアラートメッセージが必要な場面がいくつかあります。多くはJavaScriptのアラートを使用して行われていますが、カスタムCSSとJSコードを使って簡単に表現することができます。今回は、フリーで使える10種のアラートメッセージスニペット「10 Free CSS & JS Notification Alert Code Snippets」の紹介です。

AlertCode04
Ionic Alert

ベーシックな表現からPOPなものまで10種類が紹介されています。

詳しくは以下

(さらに…)

続きを読む
このエントリーをはてなブックマークに追加
2011年05月22日

HTM5スニペットの共有サイト「HTML5 Snippets」

だんだんと対応するブラウザも増えてきて業界の中では利用され、案件も増えてきたHTML5。もうすでにいくつか仕事として利用している方もいれば、これからという方もいると思いますが、今日紹介するのはHTM5スニペットの共有サイト「HTML5 Snippets」です。

スニペットとは、よく利用する短いコードの断片に分かりやすい名前を付け、ソースに利用しやすくするためのもの。「HTML5 Snippets」では、基本的なフレームから、細かなパーツまで、様々なスニペットが共有されています。いくつか気になったスニペットをピックアップしてご紹介致します。

詳しくは以下

(さらに…)

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

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

2011年08月18日

ダークな表現に使いやすいテクスチャ集「Massive Collection Of High Quality Abstract Textures」

写真加工から背景処理にまで、さまざまな使い方ができるテクスチャ素材は、デザイン制作の現場では特に利用頻度が高いと思います。そんな中今回紹介するのは、ダークな雰囲気やアンティーク感を表現しやすいテクスチャを集めた「Massive Collection Of High Quality Abstract Textures」です。


HUGE monoprint 6 by `pendlestock on deviantART

抽象的なテクスチャを中心に、ネガフィルムやファブリックを利用した、さまざまなテクスチャが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:30  |  
Category: WebService   
2008年08月06日

おもちゃ箱の中身のようなベクターデータ「Pimpin’ Vector Pack」

今まで様々なベクターデータを紹介してきましたが、今日紹介する「Pimpin’ Vector Packはおもちゃ箱をひっくりかえしたようなPOPで可愛らしいフリーで使えるベクターデータパックです。

ふき出しから、ハートのマシンガン、王冠、手錠、スペースインベーダーなどなど、ジャンルにとらわれず、上記のように色とりどりの様々なオブジェクトのベクターデータが収録されています。

詳しくは以下

(さらに…)

続きを読む
posted 04:59  |  
Category: Design , vector   
tag: Design vector
2009年06月20日

画像を一切使わないタイプで見せるwordpressテーマ「WP TYPO」

今までDesigndevelopでは様々なwordpressのテーマを紹介してきましたが、今日紹介するテーマは少し変わっていて、画像を一切使わずに文字だけで見せるwordpressのテーマ「WP TYPO」です。

wptypo01

タイトルから、日付、ページ内の装飾に至るまで、すべて画像をつかわず表現しています。テキストベースですが、フォントの違いや文字の大きさの強弱の付け方で、メリハリをつけて見やすくなるように構成されています。

詳しくは以下

(さらに…)

続きを読む
posted 12:35  |  
Category: WordPress   
2014年09月05日

種類豊富に揃うフラットアイコンまとめ「25 Free and Flat Icon Sets for August 2014」

web制作を行う中で使用頻度の高いアイコン、特に最近はフラットテイストが主流になっており、フリーで配布されているものもバリエーションが豊富になっています。今回はそんなフラットアイコンまとめ「25 Free and Flat Icon Sets for August 2014」を紹介したいと思います。

icon0406_1
Dribbble – Free vector icon set by Valentyn Khenkin

いろいろなテーマで制作されたフラットアイコンのセットをダウンロードできるものが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2012年12月04日

雰囲気が伝わりやすいフリーTumblrテーマまとめ「50 Elegant Free Tumblr Themes And Widgets For Blogging Experience」

ブログよりも手軽な投稿が魅力のTumblr。日々の出来事をはじめ、さまざまな物事をアーカイブするために利用している方も多いと思います。今回はそんなTumblrのデザインをカスタマイズできる豊富なテーマの中から、雰囲気が伝わりやすいフリーのテーマをまとめた「50 Elegant Free Tumblr Themes And Widgets For Blogging Experience」を紹介したいと思います。


Vintage Stripes

シンプルなテーマはもちろん、コラージュやテクスチャを利用した個性的なテーマが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 07:16  |  
Category: Design   
2017年06月10日

最新トレンドのスタイリッシュなデザインアイコンまとめ「10 Fresh Icon Designs For Free Download」

情報を視覚的に分かりやすくしてくれるアイコンは、適切なものを使い分けていきたいですもの。そのためには種類豊富にストックしておくことが大切です。そんなときにあると便利なアイコンのまとめ「10 Fresh Icon Designs For Free Download」を今回は紹介したいと思います。

icondesigns-top
Free Line Icon Set for Designers (AI, EPS, SVG, PNG)

さまざまなテーマで制作されたアイコンがまとめられています。気になったものをピックアップしましたので、以下よリご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2010年04月24日

CSS3で作る素晴らしいボタン・メニュー集「12 Excellent CSS3 Button and Menu Techniques」

いままでのCSSで画像を使ってしかできなかった表現が、CSSのみで、できるようになった次世代のCSS3。実際にもう使われていたり、名前は広く知られていたりしますが、今回紹介するのはCSS3を活かしたボタンやメニューを集めたエントリー「12 Excellent CSS3 Button and Menu Techniques」です。

css3_nav_01
Radioactive Buttons

上記のようなCSS3の機能である、グラデーション、角アール、ドロップシャドウなどをうまく使った様々なボタンやメニューのデザインTipsがまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 09:35  |  
Category: WebDesign   
2017年06月29日

多種多様なテキストアニメーションの表現できる CSS&javascriptまとめ「10 Amazing CSS & JavaScript Text Animation Snippets」

テキストに動きをつけることが可能なWeb。昨今のWebデザインにおいて欠かせない要素の一つとなっています。テキストが流れるように動くだけで強いインパクトを与えることができるでしょう。そんな動きの例をまとめた「10 Amazing CSS & JavaScript Text Animation Snippets」を今回はご紹介していきます。

10-Amazing-CSS-top
Title Text Animation

効果的なアニメーション演出を実現できるCSS&javascriptがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: javascript , Tool , WebDesign   
2016年01月29日

UIやテンプレートなど フリーで使用できるキットが豊富に揃ったまとめ「Best Free User Interface Kits」

デザインを手軽かつ、効率的にクオリティアップにつなげることができるUIやテンプレートなどは、フリーで配布されているものも多く重宝しているという方も多いのではないでしょうか?そんな中今回紹介するのは、フリーで使用できるキットが豊富に揃ったまとめ「Best Free User Interface Kits」です。

kit0129_1
Freebie | PerfectKit – modern UI kit (desktop & mobile ready) | DesignHooks

非常にたくさんの種類のインターフェイスキットがまとめられているので、きっと欲しい・希望のものを見つけることができるはず。きになったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

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

フリーで使用できる ブラウザフレームPSDテンプレート「30 Free Web Browser Frame PSD Templates」

クライアントやユーザーの目線に立って試行錯誤し制作したデザインを、クライアントにプレゼンテーションをする際には、実際に使用するシーンを想像させることも大切。そんな時に活用したい、フリーで使用できる ブラウザフレームPSDテンプレート「30 Free Web Browser Frame PSD Templates」を今回は紹介したいと思います。

frame-free01
Flat Vector Chrome Frame by Jeffrey Kam – Dribbble

タイプの違う30種類のテンプレートが集約されています。気になる種類をいくつかピックアップ致しましたので以下よりご覧下さい。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: Tool , WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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