cssに関するhecohecoのブックマーク (35)

  • CSSMENUMAKER.COM

    Get a price in less than 24 hoursFill out the form below. One of our domain experts will have a price to you within 24 business hours.

  • CSSグラデーションのちょっとしたテクニック #1

    リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204

    hecoheco
    hecoheco 2009/12/22
  • CSSのプロパティをソートするPerlスクリプト

    CSSを書く時に「セレクタ内でCSS仕様書でのプロパティの出現順序に従ってソートする」という個人的なルールを守っている。何かコーディングにおいて便利な理由があるからというわけではなく、第三者に説明する時に「仕様書の出現順で書いてます!」とかで済ませられるから。今まではファイル全体を処理するオレオレPerlスクリプトで適当にやっていたのだけど、Vimで選択範囲だけをソートとかやりたくなったので、普通に標準入力を読んで結果を標準出力に吐くように書き直した。ついでにCSS3のプロパティとFirefox(Mozilla)やSafari(WebKit)、Opera(Presto)、Internet Explorer(Trident)の独自拡張などへも対応させたりとか。 #!/usr/bin/perl # Author: Kyo Nagashima <kyo@hail2u.net>, http://h

    CSSのプロパティをソートするPerlスクリプト
    hecoheco
    hecoheco 2009/11/16
  • Pure CSSな吹き出し

    Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble

    Pure CSSな吹き出し
    hecoheco
    hecoheco 2009/11/05
  • オバマのスピーチライターは26歳 - NextReality

    Barack Obama's Victory Speech - Election Results 2008 - The New York Times オバマ候補のacceptance speechは素晴らしかった。特に、最後のほうで106才の黒人女性 (Ann Nixon Cooper)の目を通して1世紀に渡る世界の歴史を俯瞰しつつ未来への意志と希望(yes we can)につなげる、という部分の時空を超えたスケール感は圧倒的だった。"we"を多用して「皆でやるんだ」と強調するところも。ひるがえって日の首相の演説で心に残るものがあるかと考えるとちょっと悲しくなってくる。こういうところは当にうらやましい。 もちろんこの種の練りに練った演説は人だけで作れるものではない。優秀なスタッフの尽力があればこそだ。いったいどんなスピーチライターが関わっているのかと調べてみたら、Adam Frank

    オバマのスピーチライターは26歳 - NextReality
    hecoheco
    hecoheco 2008/11/06
  • Ultimate multi-column liquid layouts (em and pixel widths)

    8 Feb 2022 — Updated 20 Mar 2023 Table of contents CSS Grid: Static 3 column Responsive 3 column Flexbox: Static 3 column Responsive 3 column Main content with left & right sidebars Padded boxes with headings Product feature comparison table Responsive Attributes: Static 3 column Responsive 3 column Responsive Columns: Static 3 column Responsive 3 column In this article, we'll explore various type

    Ultimate multi-column liquid layouts (em and pixel widths)
    hecoheco
    hecoheco 2008/06/20
  • Check

    hecoheco
    hecoheco 2008/04/06
  • http://www.vdotmedia.com/blog/vertically-center-content-with-css/

    hecoheco
    hecoheco 2008/03/03
  • 1ピクセルのずれも許せないWebデザイナのためにResetting Again | エンタープライズ | マイコミジャーナル

    CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS

    hecoheco
    hecoheco 2008/02/11
  • 日本の伝統色名

    参考:フランスの伝統色名 [日の伝統色名]ファイルをダウンロードします! ■■■■■■■■一斤染(いっこんぞめ) ■■■■■■■■石竹色(いしたけいろ) ■■■■■■■■桃色(ももいろ) ■■■■■■■■紅梅色(こうばいいろ) ■■■■■■■■中紅(なかべに) ■■■■■■■■桜色(さくらいろ) ■■■■■■■■退紅(あらぞめ) ■■■■■■■■薄紅(うすべに) ■■■■■■■■緋褪色(ひさめいろ) ■■■■■■■■鴇色(ときいろ) ■■■■■■■■桜鼠(さくらねずみ) ■■■■■■■■珊瑚色(さんごいろ) ■■■■■■■■茜色(あかねいろ) ■■■■■■■■長春色(ちょうしゅんいろ) ■■■■■■■■韓紅花(からくれない) ■■■■■■■■臙脂色(えんじいろ) ■■■■■■■■滅赤(けしあか) ■■■■■■■■深緋(こきあけ) ■■■■■■■■

    hecoheco
    hecoheco 2008/02/04
  • 印刷用CSSの書き方(基本編):ADP

    印刷用CSSの書き方(基本編):ADP
    hecoheco
    hecoheco 2007/12/08
  • CSS Text Wrapper

    The CSS Text Wrapper allows you to generate HTML and CSS to wrap text on your website into any shape.Examples Not Just Rectangles Anymore The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code

    hecoheco
    hecoheco 2007/12/08
  • 美麗なCSS/XHTMLデザインテンプレート配布サイト「STUDIO7DESIGNS」:phpspot開発日誌

    STUDIO7DESIGNS Free CSS and XHTML Website Templates created this site to provide people with free xhtml and css designs. 美麗なCSS/XHTMLデザインテンプレート配布サイト「STUDIO7DESIGNS」。 Organic Design Template Eco Business Template. NauticaX2. Nautica05. NauticaX1. Nautica09. Nautica05 Dark. ブログやサイト構築の際に使えますね。 ライセンスは「Creative Commons 2.5 licence」。

    hecoheco
    hecoheco 2007/09/12
  • スタイルシートによる崩れない 2カラム 3カラム・レイアウト

    このウェブサイトは販売用です! desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています!

    hecoheco
    hecoheco 2007/08/09
  • CSSデザインカタログ

    対応ブラウザは Windows:InternetExplorer6,InternetExplorer7,Firefox2,Opera9 Mac:Firefox2,Opera9,Safari2 ですが,ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7,Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上,分類コード(div011-hp,table010 など)を class名にしてありますが,実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合,既存

    hecoheco
    hecoheco 2007/06/16
  • 「左上の魔術師」理論

    Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ

    「左上の魔術師」理論
  • テーマサンプル:「foto-wine-red」はてなダイアリー - sampleの日記

    2024夏休み旅行 神戸・2日目【前編】 zfinchyan.hatenablog.com ↑1日目はこちら 6:50 わたしと夫だけ先に起床 前日に買っておいたお芋のパンで朝ごはん 昨日の疲れからか、なかなか息子たちが起きてこなかったので、ゆっくり寝かせてから10:00にホテルの下にあるプレイゾーンに行って、パターゴルフやバス…

    テーマサンプル:「foto-wine-red」はてなダイアリー - sampleの日記
    hecoheco
    hecoheco 2007/04/04
  • ウェブ2.0っぽいストライプ画像が簡単に作れる『Stripe Generator』 | POP*POP

    これは素敵。最近はストライプ柄のデザインをよく見るようになりましたよね。そんなストライプ柄を簡単に作ってくれるジェネレータをご紹介。 これを使えば簡単に2.0っぽい(死語?)デザインを作ることができますね。 使い方も簡単です。以下に画像付でご紹介。 ↑ ストライプの太さや色、背景色などを決めていきます。ストライプに影もつけられますね。 ↑ 右の画像をクリックすればプレビューできます。できあがったら「DOWNLOAD」をクリック。 ↑ このような画像ができるので背景に指定すればOKです。 ご自身で作ってみたい方は以下からどうぞ。 » Stripe Generator – diagonal stripes background tiles ■ おまけ こうした2.0っぽいジェネレータはいろいろありますよね。せっかくなのでまとめておきます。よろしければどうぞ。 Web20Generator: X

    ウェブ2.0っぽいストライプ画像が簡単に作れる『Stripe Generator』 | POP*POP
  • 無料でアンケートを作成できる『THE FORM ASSEMBLY』が最強すぎる | i d e a * i d e a

    ドットインストール代表のライフハックブログ

    無料でアンケートを作成できる『THE FORM ASSEMBLY』が最強すぎる | i d e a * i d e a
  • Nitram+Nunca

    写真を撮る機会は実に多くありますが、特に結婚写真は一生の記念になる大事な写真ですので、できるだけ良いものを残しておきたいものですね。 結婚前は何かと忙しくなりますが、疲れが残らないよう、写真撮影の前にはしっかり休息を取っておきたいですし、エステなども利用して、できるだけきれいな状態で撮影にのぞみたいものです。 そして、結婚写真は挙式当日に撮影されるカップルも多いですが、やはり慌しいこともあり、せっかくの写真も表情が硬くなってしまったという経験をお持ちの方もいらっしゃるのではないでしょうか。 結婚写真は最近は前撮りでゆとりを持って撮影される方も増えているようです。 メイクや着付けも時間をかけられますし、時間にも余裕がありますので、より自然な表情で撮影ができるのもメリットです。 そして、式当日とは違う衣装を選ぶことができるのも良いですね。 スタジオ撮影はもちろん、ロケーション撮影などで屋外での

    hecoheco
    hecoheco 2007/03/20