scss-corner-ribbon - Blog - 2xup.org
角にリボンみたいなものをかける装飾。めったにやらないけどやるときはちまちま調整していたところを簡単にで良い感じにできるようになればいいな。と思ったので Sass (scss) mixin を作ってみた。 kaminogoya/scss-corner-ribbon たとえばベース色を渡すだけで次のようなことをやるようにした。 ベース色の明るさにあわせてテキスト色を変える (黒か白) ベース色にとテキスト色にあわせたテキストシャドウ ベース色を基本にしたグラデーション処理 幅の計算とちょうどよい場所への配置 折り返し (はみ出す) 部分の計算と処理 折り返し部分の色の調整 ベース色のほかに、幅と折り返し部分の幅は引数として渡せるようにした。幅はテキストの長さにあわせて調整するイメージ。高さは mixin の中で変数にしてある。 この mixin の中で使っている mixin はわりと一般的なも
実践 Web Standards Design
2007-02-21T17:05:00+09:00 HTML にしても CSS にしても、最近やはり基本からもう一度学び直さなければいけないなあ。と感じることが多くなりました。知っていると思い込んでいる事がどれだけ多いか…。基本を学んでいく上では新しい発見!というものはゼロに等しのかもしれませんが、今以上に知識を広げたいのであれば、今より良い視点を持ちたいならば、基本をおさらいする事ほど大事なことはありません。知っていると思い込むことほど格好わるいことはありませんものね。そんな考えの元勉強中の今まさに、僕自身が必要としている書籍、『実践 Web Standards Design』(ホップ本というらしい) が発売されるようです。 柔軟でしっかりした考え方と判りやすい説明で愛読しているブログ 3ping.org の市瀬裕哉さんを中心に、仕様面にとても深い知識をお持ちの hxxk.jp 望月真琴
『CSS でよく使う装飾定義をコンポーネントとしてまとめる』をもう一度
2007-01-27T20:51:03+09:00 CSS でよく使う装飾定義をコンポーネントとしてまとめるの続き 前回の記事で、コンポーネントする方法としてひとつの class に集約するという方法をとっていましたが、それではそもそも見た目重視のマークアップになってしまい HTML の構造化と、CSS で見た目制御するということについて本来の目的と離れた方向性であるというご指摘をいただき、考えを改めてみました。 単にclass名を変更するだけでは状況は大差ないような気がします。問題は、「よく使うスタイル定義の組み合わせ」をコンポーネントとしてまとめるのはいいとしても、それを或る一つのclass名に集約することなのではないかと思います。 HTMLのclass属性はスタイルシートのセレクタとしても利用されますが、より汎用的には、要素を分類するためにあるものだと考えます。なので、class名を
CSS 分割管理の実践編
2006-12-13T09:47:51+09:00 数日前に行ったリニューアルでは、いくつか課題を設けました。ただただリニューアルしても張りがありませんし、ウェブデザインを行うものにとって自身のウェブサイトは自身の作品のようなものだし、好き勝手できるのも魅力なわけです。何回かの記事にわけて、リニューアルでおこなった作業をまとめていこうと思います。 前回、スタイルシートを分けて管理する方法をまとめるで CSS ファイルを分割管理するメリットや、どのように分割するか案を書いてみましたが、今回のリニューアルで実際に案を元に分割管理を実践し、結果はリストのようになりました。各ファイルの概要は案段階から変化がないので、そちら参照ください。以下のリストでは、テーマファイル以外の実際の CSS ファイルにリンクしています。 common.css component.css fonts.css scree
pre 要素のスタイル定義とマークアップ - 2xup
2006-09-07T00:56:49+09:00 なにやら pre 要素に CSS でどういったスタイル定義をしているのか、また、pre 要素をどのようにマークアップしているのか、様々な意見がでている模様。 ブログにコードを貼り付ける方法で悩むの巻(i d e a * i d e a - Lifehacks by 100SHIKI.COM) pre要素へのスタイル指定(hail2u.net - Weblog) Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻(hxxk.jp) 情報共有と新たな発見を期待して、どのようにスタイル定義・マークアップしているのか公開することに。まずは注意しているポイントを挙げてみます。 Macintosh 版 Internet Explorer では、div 要素以外に値が visible (初期値) 以外の overf
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
