TOP  >  CSS

Tag : CSS

2009年03月26日

スタイルシートをオンラインで整形してくれる「Stylenea」

CSSの書き方は人によって様々だと思いますが、普段自分が使っている書き方でない書き方だと解読に手間取ってしまうときもあるかと思います。今日紹介するオンラインサービス「Stylenea」は自分の指定した形式にCSSファイルを整形してくれるものです。

cssdesignloads01

CSSをコピーするかもしくはファイルをアップロード、もしくはアップされているURLを指定することでCSSを読み込ませる事ができます。

詳しくは以下

(さらに…)

続きを読む
posted 07:38  |  
Category: WebDesign   
tag: CSS webdesign
このエントリーをはてなブックマークに追加
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   
このエントリーをはてなブックマークに追加
2008年12月31日

タブナビゲーションからフォトギャラリーまでCSSのTips集「20 Ultimate CSS Tutorials」

WEBデザインでは欠かす事ができないCSS。CSSも奥が深く、工夫しだいで様々な表現ができるようになっていますが、今回紹介するのはそんなCSSのテクニックを集めたテクニック集「20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com」です。


Expandable CSS Tabs Tutorial

タブナビゲーションから、角丸、フォトギャラリーに影付けなどなど様々なCSSのテクニックが全部で20個、それぞれのジャンルに分けて公開されています。今日はその中からいくつかピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 05:19  |  
Category: WebDesign   
tag: CSS webdesign
このエントリーをはてなブックマークに追加
2008年10月28日

JavaScript, Ajax、CSSで実現するツールチップ集「30+ Tooltips Scripts」

カーソルを合わせるとぴょんと飛び出すツールチップ。以前「javascript不要のCSSで制御するツールチップ「Easy CSS Tooltip」」や「半透明・角丸のツールチップを表示するJavaScript 「CoolTips」」といくつかDesigndevelopでも紹介してきましたが、今日紹介するのはそんなツールチップのスクリプトを集めたエントリー「30+ Tooltips Scripts」です。


Tooltip.js

主にJavaScript, Ajax、CSSを使って実現しています。沢山のToolTipsが紹介されていますが、今日はその中から気になったToolTipsが公開されていますので下記に貼り付けておきます。

詳しくは以下

(さらに…)

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

CSSで作るシンプルなタブメニュー「Useful Css Menus」

WEBメニューの定番とも言えるのがタブメニュー。わかりやすくユーザーインターフェイスとしても優れています。今日紹介するのはCSSで実現するシンプルなタブメニューを集めたタブメニュー集「Useful Css Menus」です。

上記の画像の全部で12個ののタブメニューがサンプルとしてダウンロードすることができます。同じタブメニューなので、同じように見えますが、細かい部分で様々な違いを出しています。

詳しくは以下

(さらに…)

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

ソース付!実用的なページナビゲーション集「24 Web 2.0 Navigation」

ブログが一般的になってきて、ご自身のブログにページナビゲーションをつけている方も多数いるかと思います。今回紹介するのはページナビゲーションのデザイン例を集めた「24 Web 2.0 Navigation」です。

オリジナルのデザインもありますが、「24 Web 2.0 Navigation」ではFlickrやDigg、yahooなど人気ページのページナビゲーションも収録されていて、CSSも見ることができます。

詳しくは以下

(さらに…)

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

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

2009年12月26日

2009のWEBデザインを振り返る「Designs of the Year: 2009」

海外のWEBデザイナーのコミュニティ「Drawar」が、2009のWEBデザインの中から優れたデザインを選出した「Designs of the Year: 2009」を発表しています。

webdesign2009
Maryland Institute College of Art

今年発表されたWEBデザインのなかから、15のWEBデザインが選出されています。今日はその中から気になったものをいくつか紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 09:47  |  
Category: WebDesign   
2015年11月19日

活用することでデザインをより魅力的に演出可能な9つのResourceまとめ「9 Fresh Resources For Web Developers」

通常のデザインだけでももちろん魅力的な演出は可能ですが、いろいろな機能を取り入れることにより、もっと魅力的なデザインに仕上げることができるのではないでしょうか?今回はそんなシーンにおすすめな9つのResourceまとめ「9 Fresh Resources For Web Developers」を紹介したいと思います。

esource1120_1
GitUp

デザインをより分かりやすく、さらに作りやすくしてくれる個性的なResourceがまとめられています。

詳しくは以下

(さらに…)

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

フラットな雰囲気が可愛らしい 自然と動物のミニマルアイコン「Free Download: by Vecteezy」

アイコンは小さいながらもデザインに華を添えてくれたり、ユーザーインターフェイスにも非常に有効的な存在。そんな中今回は、数多くあるアイコンの中でも自然をテーマにしたミニマルアイコン「Free Download: 100 Nature Icons by Vecteezy」を紹介します。

nature-icons-top

植物、動物以外に昆虫や天気をモチーフにしたアイコンも収録されています。収録されているアイコンをいくつか紹介していますので、以下よりご覧ください。

詳しくは以下

(さらに…)

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

Photoshopで使える多種多様なパターンセット「Free Photoshop Patterns for Graphic Designers」

背景に敷き詰めたりテクスチャとして使用したり、パターン柄はデザインにさまざまなニュアンスを与えてくれる便利なツールです。そんな中今回紹介するのは、Photoshopで使えるさまざなパターンセット「Free Photoshop Patterns for Graphic Designers」です。

fppfgd_0
6 Polka Patterns – Free Photoshop Brushes at Brusheezy!

シンプルなものや細かなグラフィック表現がされているもの、可愛らしいものから変わったものまで、多種多様なパターンが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Photoshop   
2014年08月22日

カーペットの表面をテクスチャに「Create Superb Effects With These Free Seamless Carpet Textures」

家のリビングなどのくつろぎの場に設置されていることの多いカーペット。無地や連続した柄などで構成されているものが比較的多い印象ですが、今回はそんなカーペットのテクスチャ素材をまとめた「Create Superb Effects With These Free Seamless Carpet Textures」を紹介したいと思います。

carpet_texture1
Seamless Carpet Texture by hhh316 on deviantART

シームレスに利用できる、比較的シンプルなタイプのカーペットをテクスチャとして取り入れた記事がまとめられています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2018年11月23日

年末年始のデザインに取り入れたいフリーフォントまとめ「Free Fonts: 25 New Fonts for Graphic Designers」

フォントはいくつあっても困ることのないアイテムです。これまでも数々のフォントを紹介していますが、今回紹介するのは、クリスマスやお正月のデザインをもっとハイクオリティに演出できるフリーフォントまとめ「Free Fonts: 25 New Fonts for Graphic Designers」です。

download
Free Fonts: 25 New Fonts for Graphic Designers

シンプルなフォントから個性的なものまで、冬を彩る様々なフォントが集約されたサイトの紹介です。中でも気になったものをいくつかピックアップしてみました。

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

続きを読む
posted 09:00  |  
Category: Design , Font   
2010年03月04日

様々な紙のテクスチャセットをひたすら集めた「150+ Free Paper Textures for your Next Design」

テクスチャの中でも汎用性がありもっとも使いやすい素材の一つ、紙のテクスチャ。紙といっても柔らかい印象のものからハードな印象のものまで、様々なものがありますが今日紹介するエントリー「150+ Free Paper Textures for your Next Design」は紙をテーマにあらゆる紙のテクスチャを集めています。

paper_txt_01
Paper Bag Texture Pack

様々なセットが公開されていますが、今日はその中からいくつか気になったテクスチャセットをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 10:14  |  
Category: Design , Photoshop   
2012年06月10日

HTML5で作るルービックキューブがすごい!「Tutorial: Rubik’s cube with HTML5 (CSS3 + JavaScript)」

HTML5という言葉が世に出てから、暫くたって多くのプロジェクトが発信されてきましたが、今日紹介するのはHTML5+CSS3+javascriptで作るルービックキューブ「Tutorial: Rubik’s cube with HTML5 (CSS3 + JavaScript)」です。

こちらはただ単にキューブを作って描画するだけではなく、ボタンやスマートフォン上でのフリック、マウスなど様々な方法でルービックキューブが遊べるようになるというものになっています。

詳しくは以下

(さらに…)

続きを読む
posted 02:15  |  
Category: Design , WebDesign   
2014年04月29日

スタイリッシュかつ個性溢れるデザインフリーフォント「Stylish Free Fonts For Graphic Designers」

フリーで配布されているフォントの中にもさまざまな種類があり、色々な種類をストックされている方も多いのではないでしょうか?そんな中今回紹介するのは、スタイリッシュかつ個性溢れるデザインフリーフォントをまとめた「Stylish Free Fonts For Graphic Designers」です。

font140428_1
Numbers Font on Behance

デザインを引き締めてくれたり、印象的な雰囲気に仕上げられるデザインフォントが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 02:01  |  
Category: Font   
2009年07月16日

ヴィンテージテクスチャの決定版「 60+ Vintage Style Textures Every Designer Should Have」

様々な種類のテクスチャがWEB上では公開されていますが、その中でも質感を出すのに非常に重宝するのがヴィンテージテクスチャ。布だったり紙だったり独特の古びた風合いはデジタルデータになっても質感や雰囲気を伝えてくれます。

vintage-textures01

今日紹介するのはヴィンテージテクスチャを数多く収録したテクスチャセット「 60+ Vintage Style Textures Every Designer Should Have」です。非常に多くのテクスチャが収録されています。一部のサンプルを下記に貼付けておきます。

詳しくは以下

(さらに…)

続きを読む
posted 02:36  |  
Category: Design , Photoshop   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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