Envato is the leading marketplace for creative assets and creative peopleAbout Envato
Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility. So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules. Over the past few years, this
CSSはプログラマ向けの言語ではないため、最初は理解しやすいが、複雑な記述が入り交じっていくとメンテナンスが困難になる。Webブラウザはよく出来ていて、何となく書いたものでも動作してしまうからさらにややこしい。 コマンドラインオプション そうした問題に対処するメタ言語として注目を集めているのがSassだ。そしてSassを実用的にプロジェクトに組み込めるのがCompassだ。 今回紹介するフリーウェアはCompass、SassをサポートしたCSSフレームワークライブラリだ。ソースコードは開示されているがライセンスは明記されていなかったのでご注意いただきたい。 Compassは単体でCSSフレームワークをなすわけではない。実際にはBlueprintやYUI、960といった有名なCSSフレームワークを利用している。そしてRailsやMerb、StaticMaticといったアプリケーションサーバと
このブログのCSSカスタマイズした時に使って便利だったのでご紹介。CSS書いてもブラウザ間でマージンの幅とかフォントサイズとかデフォルトの値が違ったりするので、あとあと不具合がでてきたりしますよね。クロスブラウザを意識してCSSを書いていく時に全てのデフォルト値をリセットして合わせるのに便利なのが、Yahoo! UI LibraryのReset CSS。僕も今までは自分で、 h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0; } とかリセットしたいセレクタを個別でやったりしてました。でもほぼ全てCSS書き直したい場合はこのReset CSS使うと便利です。 JavascriptライブラリのYUI Libraryの中にひょっこりあります。 以下のようなものがダウンロードできます。 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,
Web製作推薦書Wiki 役に立つ書籍は?(ミラー) 役に立つ書籍は? 2冊目(ミラー) 役に立つ書籍は? 3冊目 役に立つ書籍は? 4冊目 2ch Web製作板のスレッドを再構成しています。 未完成なので、よろしければ編集にご協力ください。 テンプレート ID:usr / pass:2ch 推薦書 HTMLとCSSの本 デザイン関連の本 JavaScriptの本 原本 Web製作に役に立つ書籍は?まとめページ 当サイトは上記まとめサイトを Wiki で作り直したものです。今後、さらに収録書籍を追 加したいと思っています……。 初代まとめサイト(消滅)→ミラーサイト 2代目まとめサイト(消滅)
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
クールでクリーンに角丸を作りたい。 そんなあなたにおすすめなのが、『CSS Sprites + Rounded corners』。CSS Spriteを使って角丸を実装する方法だ。 このエントリーでは、↓のような画像を使って角丸を実装する方法が紹介されている。 デモは以下から。 » Take a look at the demo サンプルがダウンロードできるので見てみてほしい。 CSS Spriteを使って角丸を実装する方法、チェックしてぜひ実装してみてはいかがだろうか。 » CSS Sprites + Rounded corners 実家に帰省中っと。予定通り京都に寄ってイノダコーヒーでブロギング中だ。まったりまったり。
今回の記事は2008-12-07[XHTML+CSS]CSS Spriteで表現する角丸 | Commit Labの続きです。 これはCSS Spriteというテクニックを利用して作った角丸boxです。シンプルな記述のhtml+CSSと一枚の画像で角丸を表現しています。 文字の拡大にあわせてboxの縦が伸縮しますので、すぐにフレキシブルな角丸を表現出来ます。またデザインにおいても、htmlとcssのみで作られているので思いのままに装飾する事ができます。 今回は前回の問題点を修正しました。h2のheightをpxで固定していたのはやめて、line-heightのみで高さを調整しました。これで文字を拡大しても、H2から文字がはみ出す事はありません。 またH2にbackground-colorを与え、どれだけ拡大しても背景が途中で途切れないようになりました。 それに伴いCSS Spriteの画像
Long Paragraph <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vit
グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> </textarea>
セットの記述方法 { インデントは半角スペースを4つ。 閉じ カッコ のインデントは書き出し位置に合わせる。 1プロパティは1行で管理する。行の終わり必ずセミコロン ( ; ) } セレクタの記述方法 { 各IDとclassが適用されているタグを必ず明記。 継承を見やすく、かぶりが起こるのを防ぐために親セレクタも記述する。 自然とピラミッド型になるようにマークアップを行う。 } プロパティの記述順序 { ボックスモデル (Box model) 視覚整形モデル (Visual formatting model) 視覚整形モデル詳細 (Visual formatting model details) 視覚効果 (Visual effects) 生成 内容, 自動番号付け及びリスト (Generated content, automatic numbering, and lists) ページ関連
In this tutorial, we'll put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs. Then when you're finished reading this tutorial, you can cross over to our sister site NETTUTS and follow along as we build the design into clean and simple HTML. OK let's rock'n'roll
Thousands of free tutorials and online courses to help you learn software development from mobile devices to web applications and everything in between. Join our community to improve your coding skills and workflow. What would you like to learn? Our extensive learning guides provide a deep dive into various types of software development. Improve your WordPress knowledge, learn Ruby or PHP, get sta
Second Picture is devoted to 3D Tutorials Photoshop Tutorials Photography Tutorials Photography Composition Web Design Tutorials 08.04.2010 Category: 3D tutorials From now on my new 3ds Max tutorials will be published in Polybon Blog. It's my new 3d blog devoted to 3d Max, inspiring renders, and free textures. The reason behind this is content management. Second Picture is hand coded. It doesn't u
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites(CSSスプライト)」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは? 通常、ウェブページを制作する場合、デザインファイル(psdやpngなどの画像)をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、1度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く