サイト内検索:

CSSデザインの最近のブログ記事

Preview hundreds of great patterns from SubtlePatterns.com directly on your website

去年の9月ぐらいに以下の記事を書きました。

今すぐ使えるWebサイトの背景画像集サイト「Subtle Patterns」

Webサイトの背景パターン画像を集めてダウンロードできるようにしてくれているのですが、どの背景画像もセンスのよいものばかりです。

このサイトのよいところは紹介している背景画像をクリックするとリアルタイムにその画像を背景画像として現在見ているページに適用してくれるところです。

背景画像パターンにマウスを持っていくと「PREVIEW」というボタンが表示されるので、それをクリックすると今見ているページの背景がその画像に切り替わりますのでその場で確認することができます。

だた、そうやって「いい感じなんじゃね?」と思ってダウンロードした背景画像をいざ自分のサイトに使ってみるとなんかちょっと違う感じがすることもあり、その度に画像をダウンロード、CSSで背景画像の修正、といった手間がかかりました。

そんな手間を一気に省いてくれるブックマークレットが「SubtlePatterns Bookmarklet」です。

以下のページに配置されている緑色の「SubtlePatterns Bookmarklet」というボタンをブラウザのブックマークバーに登録します。

SubtlePatterns Bookmarklet - Preview backgrounds on your website

で、背景画像をいろいろ試したいWebページを開きそこでこのブックマークレットを実行するとこんな感じの小さなウィンドウが画面内に表示されます。

SubtlePatterns%20Bookmarklet%20-%20Preview%20backgrounds%20on%20your%20website

矢印をクリックする度に背景画像を「Subtle Patterns」に取りに行き、リアルタイムにその背景画像に切り替えます(キーボードの矢印キーでもOKです)。

で、ぴったりくる背景画像が見つかったら矢印上に記載されている背景画像名(上記画像だったら「Pinstripe」)をクリックすると「Subtle Patterns」内のその背景画像ぺージが表示されるので、あとは画像をダウンロードして利用するだけです。

とにかく使い方が簡単なので、家の内装屋さんが部屋の壁紙をクライアントに選んでもらうような感じでWebページのクライアントさんにこのツールを使ってもらってページの背景画像を選んで貰う、なんて使い方もできるのではないかと思います。

オススメです!

A set of 85+ icons / glyphs created purely in CSS3 that you can use in your projects freely.

CSS3で作られたこんな感じのアイコンが無料で利用可能に!まあ、ソース見れれてパクられるんで無料にせざるを得ないんでしょうけど。

CSS3%20Monochrome%20Icon%20Set%20%7C%20CSSDeck

例えば一番上の左にある下向きの矢印はこんな感じのCSSで描かれています。

/* Down Arrow */
div.icon div.downArrow {
height: 0px;
width: 0px;
border-width: 16px;
border-style: solid;
border-color: #333 transparent transparent transparent;
position: absolute;
top: 16px;
left: 0;
}

div.icon div.downArrow:after {
content: '';
width: 12px;
height: 16px;
background-color: #333;
position: absolute;
bottom: 16px;
right: -6px;
}

このまま使ってもいいですし、色を変えたり太さ変えたりしてみるのもよいかと思います。

CSS3 Monochrome Icon Set | CSSDeck

CSS3 Microsoft Modern Buttons helps you easily re-create those stylish buttons used by Microsoft on their websites.

CSS3 Microsoft Modern Buttons

CSS3 Microsoft Modern Buttons

マイクロソフトのサイトでも利用されているWindows 8のGUIのボタンやメニューなどをCSS3で再現したものです。

何時の日かマイクロソフトとかWindows 8っぽいサイトデザインにして、なんて言われた時に役に立ちそうです。

というか、Windows 8のアプリのプロトタイプとかワイヤーフレームっぽいの作る時にも役立ちそうですな。

ボタンのサンプルはこちらのページをご覧下さい。

フォーム関連のサンプルはこちらです。

A collection of open source UI components coded with modern HTML, CSS, and Sass.

CSS3 Snippets for Front-End Web Developers | WebInterfaceLab

Webのページで、というよりは例えばMacのDashboardとかスマホアプリ開発環境のPhoneGapといったアプリケーションみたいなやつで使えそうなCSS3で書かれたUI部品の数々を集めてダウンロード可能にしているサイトです。UI部品ってのは例えばこんな感じのやつです。

CSS3 Snippets for Front-End Web Developers | WebInterfaceLab

部品の中には単体でちゃんと機能する電卓みたいなのもありますので、うまく利用できれば楽をすることができるのではないでしょうか。

そんなわけでいつか便利に使える日がくるかもしれないのでとりあえずチェックしてみてください。

Subtle Patterns is created and curated by me, Atle Mo. My goal is to be a high quality resource for anyone in need of tilable textured patterns, free to use.

Subtle Patterns | Free textures for your next web project

このサイトはいいですね。

Webサイトの背景パターン画像を集めてダウンロードできるようにしてくれているのですが、どの背景画像もセンスのよいものばかりです。

Subtle Patterns | Free textures for your next web project

背景画像パターンにマウスを持っていくと「PREVIEW」というボタンが表示されるので、それをクリックすると今見ているページの背景がその画像に切り替わりますのでその場で確認することができます。

背景画像としてはどれもシックでクールなうるさくないデザインのものばかりなので、ど派手なはっきりしたパターンや色が好きな人は絶対気に入らないと思いますが、そうじゃない人はきっと気に入ることでしょう。

プロのWebサイトをデザインする人じゃなく、自分でブログのデザインをいじくれる人全員におすすめです。

Bootsnipp is an element gallery for web designers and web developers, anybody who is using Twitter Bootstrap will find this website essential in their craft.

Gallery of free HTML snippets for Twitter Bootstrap. | Bootsnipp.com

Twitter Bootstrapで使える部品(スニペット)を紹介しているサイト「Bootsnipp.com」です。

例えば、ブログ記事のフッターに使える日付けやコメントのパーツとか1ヶ月カレンダーなどがあります。あとはこんなの。

Gallery of free HTML snippets for Twitter Bootstrap. | Bootsnipp.com

ということで、Twitter Bootstrapで提供されているやつ以外で統一感あるデザインのコンポーネントを使いたい、なんて人は利用してみるとよいのではないでしょうか。

CSSだけで描いたMacBook Pro

こういうMacBook Proの絵なんですが、

Single Element Pure CSS MacBook Pro · CodePen

CSSだけで描いているそうです。

そのCSSはこんな感じ。

.macbook {
    background-color: #082746;
    background-image: linear-gradient(20deg, transparent 67%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,100%,.025)),
                      linear-gradient(#ddd 11px, transparent 11px),
                      linear-gradient(#132d4e, #4f7d90);
    border-radius: 8px 8px 0 0;
    box-shadow: inset 0 1px 1px 1px #000,
                inset 0 0 0 9px #111,
                0 0 0 1px #ccc,
                0 0 1px 2px hsla(0,0%,0%,.4),
                0 0 50px hsla(0,0%,0%,.3);
    height: 100px;
    display: block;
    left: 50%;
    margin: -50px -75px;
    position: absolute;
    top: 50%;
    width: 150px;
}
.macbook:after {
    background-color: #ddd;
    background-image: linear-gradient(left, hsla(0,0%,0%,.3), hsla(0,0%,100%,.4) 2%, hsla(0,0%,100%,.1) 5%, hsla(0,0%,0%,.2) 95%, hsla(0,0%,100%,.2) 98%, hsla(0,0%,0%,.4));
    border-bottom: 3px solid hsla(0,0%,40%,.75);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 3px 7px hsla(0,0%,0%,.1);
    content: '';
    height: 7px;
    left: -22px;
    position: absolute;
    right: -22px;
    top: 100%;
}
.macbook:before {
    background-color: #222;
    border-radius: 100%;
    box-shadow: inset 1px 1px 0 hsla(0,0%,100%,.1),
                -13px 96px 0 -1px #888,
                -13px 97px 0 -1px #888,
                -11px 97px 0 #888,
                -9px 97px 0 #888,
                -7px 97px 0 #888,
                -5px 97px 0 #888,
                -3px 97px 0 #888,
                -1px 97px 0 #888,
                1px 97px 0 #888,
                3px 97px 0 #888,
                5px 97px 0 #888,
                7px 97px 0 #888,
                9px 97px 0 #888,
                11px 97px 0 #888,
                13px 97px 0 -1px #888,
                13px 96px 0 -1px #888,
                80px 99px 0 -1px #666,
                81px 99px 0 -1px #666,
                82px 99px 0 -1px #666,
                83px 99px 0 -1px #666,
                84px 99px 0 -1px #666,
                85px 99px 0 -1px #666;
    content: '';
    height: 3px;
    left: 50%;
    margin-left: -2px;
    position: absolute;
    top: 3px;
    width: 3px;
    z-index: 1;
}​

興味のある人は解析してみてください。

Single Element Pure CSS MacBook Pro · CodePen

吹き出しのような絵をCSSで描こうとするときに、ポイントとなるのはぽちっと飛び出した3角形の部分なんですが、手動でもそのためのCSSは書けなくはないけど、頭の中でいろいろ考えながら書かなきゃいけないので汗をかきます。

そんなわけで、ちょこちょこっと数値などを指定してあげるだけで吹き出しみたいなの(これをCSS Arrowと呼んでいるようです)が作れるサイト「cssarrowplease」です。

cssarrowplease

うむ、楽だ。

そんなわけでとりあえずブックマークしておきました。

あ、でもここで作ったCSS ArrowってIEのちょっと古いやつで見たらどうなるんだろうね。

cssarrowplease

stroll.js is a collection of CSS list scroll effects

stroll.js - CSS3 List Scroll Effects - The Changelog - Open Source moves fast. Keep up.

こんな感じのリストが

stroll.js - CSS3 List Scroll Effects - The Changelog - Open Source moves fast. Keep up.

スクロールするときにこんな感じでスクロールしていきます。

stroll.js - CSS3 List Scroll Effects - The Changelog - Open Source moves fast. Keep up.

パターンは全部で13種類。

ゆっくりスクロールしてもいいのですが、高速でスクロールさせると面白いのもあります(逆に面白くなくなる場合もあります)。

以下のサイトにアクセスして各リストの上でマウスでスクロールさせればその効果が見れます。

多分モダンブラウザ系じゃないとうまく機能しないと思うのでIE使っている人はIE以外のブラウザで見た方がいいんじゃないかと思う次第です。

http://lab.hakim.se/scroll-effects/

The plugin takes a dom element, slices it into parts and arranges them like a folded paper in 3d space.

Paperfold CSS | Demo Studio | Mozilla Developer Network

developer.mozilla.orgで紹介されていたのでFirefoxでしか動かないのかな、と思ったらSafariでも動いたのでご紹介。

こんな感じのデザインを実現することができます。

Paperfold CSS | Demo Studio | Mozilla Developer Network

単なるデザインじゃなくてこの折りたたみ具合などをJavaScriptで変更することもできます。

そんなのを体験できるデモページはこちら。利用しているブラウザでうまく動かない時は素直にFirefoxで試してみてください。

リンク先の「Paperfold CSS」のページには開発者さんのコメントなどが掲載されているのですが、実装にあたってはいろいろたいへんだったみたいです。

【過去記事】

COTOBACO

2011年アルファブロガー受賞

新着DVD

モバイル

Powered by Movable Type 6.0

ブログ内検索

BlogPeople ReviewMe!

このサイトのレビューとか応援コメントを書いてもらえると励みになります。

Affi☆List for Amazon

バナー広告

このアーカイブについて

このページには、過去に書かれたブログ記事のうちCSSデザインカテゴリに属しているものが含まれています。

前のカテゴリはBlogPeopleです。

次のカテゴリはGoogleです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。