Posts tagged CSS
Posts tagged CSS
TonttuはWebDeveloperのための、CSS Sprites作成ツールです。
簡単に画像を配置、移動でき、最終的にCSS Sprites(png画像)とhtml・cssファイルを書き出すことが出来ます。
また、配置した画像の状態はプロジェクトファイル(.ttd)として保存することが出来るので、
それを読み込むことで、次回の起動時も前と同じ状態から始めることが可能です。
Web ページ中の注意書きなどでよく使用される手法で、「※」マークを使って文字をぶら下げる方法をご紹介します。
p {
margin-left: 1em; /* ブロック全体を 1em 右に */
text-indent: -1em; /* 先頭の1文字のみ 1em 左に */
}
CSS is the second-most-important thing you can master when it comes to web design, right after HTML.
And the capabilities of CSS can be staggering (especially with the new CSS3 standard already making appearances in some browsers).
If you can imagine it, it’s likely someone has already figured out how to do it with CSS.
ネタもとはここらへんです。CSS Browser Support
ページを印刷すると自分の意図しない箇所で途切れてしまう時ってありませんか?CSS(スタイルシート)を使うと、改ページして欲しい箇所、または改ページして欲しくない箇所を指定することができます。
印刷時の改ページに関するプロパティ
改ページに関するCSS(スタイルシート)は下記のとおりです。
対象セレクタ ブロックレべル要素
改ページのプロパティ一覧
page-break-before 要素の直前の改ページを指定 auto、always、avoid、left、right
page-break-after 要素の直後の改ページを指定 auto、always、avoid、left、right
page-break-inside 要素内の改ページを指定 auto、avoid
CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。
Often times we only learn the CSS strategies we need to as we go through new projects. However, we should study new strategies in our spare time as well. This way, we can discover new and more efficient methods of getting things done for the future.
Cascading Style Sheets (CSS) is the language of Web design, and the next generation of CSS design properties are just chomping at the bit to be released.
Are you eager to start using them, but don’t know where to start?
Although many of the new properties are not yet “official”, some browsers have already implemented many of the features of the coming CSS Level 3 specifications.
The problem is that many browsers—most notably Internet Explorer—have not.
The trick to using these new CSS3 features is to treat them as design enhancements.
The trick is to use the CSS properties display:table, display:table-row and display:table-cell to make containers (in this case div elements) behave like table cells. The basic XHTML structure looks like this: