TOP  >  CSS

Tag : CSS

2016年11月14日

HTMLテーブルが直感的に簡単に生成できる「DIV TABLE」

tableタグやDIVタグを利用して制作するテーブル組、それほど難しい仕組みでは無いのですが、いざ手書きをすると時間を取られたりします。今日紹介するのはHTMLテーブルが直感的に簡単に生成できるWEBジェネレーター「DIV TABLE」です。

div_table01

利用方法は非常に簡単で、tableタグで生成するかDIVタグで生成するかを選んで、あとはBorder、width、Cell Paddignを設定して、あとは欲しいテーブルサイズを選択すればタグが生成されます。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:43  |  
Category: WebDesign , WebService   
このエントリーをはてなブックマークに追加
2016年10月25日

CSSのみで制作されたローディングアニメーションセット「CSS Loader」

CSSのみで制作されるアニメーションは軽量でシンプルで非常に使い勝手も良く、国内でもブラウザの制限が商業レベルでも外れてきた今、数多く活用されはじめてきていますが、今日紹介するのはCSSのみで制作されたローディングアニメーションセット「CSS Loader」です。

cssloder

ローディングアニメーションはWEB制作の現場でも比較的利用頻度が高く、最近の画像中心のWEBサイトでは必ずと言っていいほど実装するためCSSのみで利用できるのは非常に魅力的です。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:58  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2016年10月10日

CSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」

WEBサイトなどの補足事項などを表示するのに便利なツールチップ。一般的にはアニメーション表現が伴うため多くはjavascriptを利用して制作されていますが、今回紹介するのはCSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」です。

wenk

非常にシンプルなツールチップで、上下左右位置を表示したり、幅の調整したり細かな調整がデキるようになっています。

詳しくは以下

(続きを読む…)

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

CSS3で実現するラジオボタンアニメーション「radiobox css」

WEB上で何かを選択するときに用いるラジオボタン。様々な場所で実装されており、もはや当たり前のユーザーインターフェースの一つですが、今回紹介するのはそんなラジオボタンにアクセントを付けることができる、CSS3で実現するラジオボタンアニメーション「radiobox css」です。

radio01

ラジオボタンの選択時に特定のアニメーションをラジオボタン自体にかける事が可能です。

詳しくは以下

(続きを読む…)

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

CSSで実現するフィルタジェネレーター「CSSFILTERS.co」

写真加工は現在様々なアプリケーションに搭載されており、もはや写真とは切手は切れない関係にありますが、今回紹介するのはWEB上でも動作する写真加工フィルタを生成できるCSSで実現するフィルタジェネレーター「CSSFILTERS.co」です。

cssfilter_01

このサービスでは、予め登録されたフィルタもしくは、パラメーターを指定して任意の画像にフィルタをかけるとと共に、WEB上で実現するためのコードも出力してくれるというものです。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:58  |  
Category: WebDesign , WebService   
このエントリーをはてなブックマークに追加
2016年08月26日

javascriptとCSSで写真にフィルタ効果を与えるライブラリ「Philter」

Instagramなどを始め写真共有アプリでは気軽に写真に豊富なフィルタがかけられ多くの方が利用しており、フィルタによって創られた色味や風合いは写真のクオリティを大きく向上させてくれます。今日紹介するのはjavascriptとCSSで写真にフィルタ効果を与えるライブラリ「Philter」です。

pf_01

パラメーターを調整するだけWEB上で表示された写真にフィルタと同じような効果をかけることが可能です。

詳しくは以下

(続きを読む…)

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

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

2011年11月01日

グリーンを基調にしたwebデザイン集「20 Creative Web Design in green Color」

webページを作る際には、コンセプトカラーを決めデザイン制作をするということも多いのではないでしょうか?そんな時は、カラーの特徴を押さえたデザインを参考にしたいもの。そこで今回は、さまざまなイメージカラーの中から、グリーンを基調にしたwebデザインをピックアップした「20 Creative Web Design in green Color」を紹介したいと思います。


Entrepreneur & Startup Expert Q&A, Resources and News | Sprouter

グリーンを使用することで、エコなイメージや爽やかさを感じられるwebサイトが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2009年10月05日

色補正を中心としたphotoshopアクション「140 Amazing Photoshop Actions sets and Tutorials」

photoshopの作業でももっとも多い作業の一つ色補正。色合いや風合いで、印象は全く変わるため、時間もかかるかと思います。今回紹介する「140 Amazing Photoshop Actions sets and Tutorials」は色補正を簡単に行なってくれるアクションを中心にあつめたエントリーです。

ptshpaction01
photoshop actions – 27

様々な色調の補正アクションが公開されています。今回ははその中から今までDesigndevelopで紹介していないもので、気になったものをいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:51  |  
Category: Design , Photoshop   
2013年07月11日

シンプルベースの多彩な種類のアイコンが集結「40 New and Free Icon Sets」

持っているといろいろな使い方ができることで、非常に重宝するアイコン素材。フリー配布されているものも非常に多く、お気に入りを見つけてはストックされている方も多いのではないでしょうか?そんなコレクションに是非加えたい、シンプルベースの多彩な種類のアイコン「40 New and Free Icon Sets」を今回は紹介したいと思います。

iconnew4
Linecons Free – Vector Icons Pack – Designmodo

シンプルという共通テーマの中にも、さまざまな表現で個性を発揮したアイコンがたくさん紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:51  |  
Category: Design   
2008年11月05日

シンプルで軽量なアコーディオンインターフェイス「Simple Javascript Accordions」

ブログやWEBページでメニュー部分がものすごく長くなるのは、使い勝手的にはあまり良い物ではありません。ただ日々運営していれば様々なアイデアが生まれコンテンツは増え続けてくると思います。そんな時に便利なのがコンテンツを格納できるアコーディオン式のメニュー。

様々なタイプのものがリリースされていますが、今回紹介する「Simple Javascript Accordions」は1年前に作られた物ではありますが、シンプルな構造と軽さと動きが気持ちよかったので改めて紹介したいと思います。

(続きを読む…)

続きを読む
posted 11:47  |  
Category: WebDesign   
2008年02月05日

マウスでハイライトすると絵が浮き出るHTMLジェネレーター「Crazy Delicious」

マウスで文字をハイライトすると絵が飛び出す仕組みを簡単に生成してくれるのが今回紹介する「Crazy Delicious」。一見何の変哲もないテキストなのですが、マウスで選択してハイライトすると絵が浮き出てるといった仕組みのHTMLを一枚の画像と任意のテキストから生成してくれます。

designdevelophidehtml.gif

現在対応しているブラウザはSafariとFireFoxのみになります。CSS3の「selection pseudo-element. 」とPHPで実現させているみたいです。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:49  |  
Category: WebDesign   
tag: webdesign
2015年03月14日

3サイズ揃ったラインアイコンセット「100 Responsive Line Icons」

アイコンは、さまざまな種類がセットになっている状態でダウンロードできることがほとんど。一度に多彩なバリエーションを手に入れることができるのも嬉しいところです。そんな中今回紹介するのは、3サイズ揃ったラインアイコンセット「100 Responsive Line Icons」です。

freebielineicon1

シンプルで柔らかいテイストのアイコンが100種、セットでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

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

美しい光の世界観を表現できるPhotoshopブラシまとめ「100+ Free Bokeh Brushes For Photoshop」

夏が過ぎると、秋、そして寒い冬はあっと言う間にやってきます。そんな中今回は一足早く、美しい冬のネオンのような光の空間を表現できるPhotoshopブラシをまとめた「100+ Free Bokeh Brushes For Photoshop」を紹介したいと思います。


Free Light Brushes

きらきら輝く光が散りばめられるPhotoshopブラシが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:09  |  
Category: Design , Photoshop   
2014年09月29日

いろいろな種類を厳選してまとめたフリーpsd素材集「Free PSD Files for Designers」

なにかと便利に活躍してくれるpsd素材。フリーでも多彩な種類の素材が配布されています。今回はそんないろいろな種類を厳選してまとめたフリーpsd素材集「Free PSD Files for Designers」を紹介したいと思います。

freepsd_1
Dribbble – Free Music Player PSD With Album Light/Dark – Free PSD by Ses Vasile Daniel

さまざまなデザインシーンで利用できるpsd素材がまとめられており、是非ストックしておきたくなるものばかりが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:11  |  
Category: Design   
2015年09月08日

チェックボックスとラジオボタンの無料jQueryプラグイン「12 Free jQuery Checkbox and Radio Button Plugins」

webサイト上で何かを選択する際に利用することの多いチェックボックスとラジオボタン。デザインされることはあまりなく、比較的シンプルでベーシックなタイプが利用されることがほとんどですが、今回はそこにデザインや独自の動きを追加できる、チェックボックスとラジオボタンの無料jQueryプラグイン「12 Free jQuery Checkbox and Radio Button Plugins」を紹介します。

check0910_2
Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches

派手な演出ではありませんが、取り入れることでデザインが魅力的に見える、機能性の高いプラグインが紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2013年05月07日

さまざまな種類のラインを描き出すことができるブラシセット「65 Sets of Photoshop Line Brushes for Techy Designs」

デザイン制作でパーツとして使用することも多いラインをベースにした素材は、元々がシンプルなだけにいろいろな表現が可能です。今回はそんな表現力の幅広さを改めて感じさせてくれるブラシセット「65 Sets of Photoshop Line Brushes for Techy Designs」を紹介したいと思います。


Dotted Line brushes by ~xCJx on deviantART

ライン自体に複雑な加工が施されているものから、ベースはラインでありながらもデザイン処理が加えられているものまで、65種もの多彩なブラシが紹介されています。中でも気になったものをピックアップしましたので、以下よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:20  |  
Category: Design , Photoshop   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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