border-image を利用したボックスデザイン
border-image を利用したボックスデザイン border-image プロパティは装飾の幅を広げてくれそう。使うにあたっていろいろ調べたので、サンプルなどを用意して整理しておくことにした。 まずは現在の草案（2009年10月15日版）を読んで、関連プロパティや、設定できる値など、仕様の概要を簡単に整理したものを箇条書きにしてみる。 要素の border-style?プロパティと background-image プロパティの代りに使う画像を設定する。画像は四辺それぞれには必要なくて、ひとつだけ用意すればよい (border-image-source) 画像の四辺それぞれから内側にスライスする位置を設定、画像は四つの辺、四つの角、中央の9つに分ける。中央は背景画像のように使われる (border-image-slice) 四つの辺の高さを設定する (border-image-wid
CSS 3のセレクタ解説：:root、:not、:empty、:target - builder by ZDNet Japan
:rootはルート要素にスタイルシートを適用するためのセレクタだ。ルート要素とは最上位階層に位置する要素のことで、HTML文書では全体をマークアップしているがルート要素となる。 テキスト 本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。 ※ と に注目 これに対して、:rootで次のようにスタイルシートを指定すると、コンテンツ全体が黄色い罫線で囲んで表示される。さらにここでは、でマークアップしたbody要素を黄緑色の罫線で囲むように指定しており、body要素はルート要素の内側に表示されることがわかる。
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
これはもう使用しない方がいいウェブデザインのトレンド
昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。 Most Used and Abused Web Design Trends of All Time 以下、その意訳です。 過激な表現も一部あるので、留意ください。 はじめに 鏡面反射 アクア フラリッシュ コーヒーカップ 地球 コミックフォント ストックフォト ペーパー ポラロイド 特大のRSSアイコン 音の自動再生 カウンター マーキー ブラックの背景 スプラッシュページ スキップの無いイントロ ブラックの背景 はじめに トレンドは、ウェブデザインにおける良くないキーワードではありません。実際に、下記のリストのものはその時々でウェブデザイナーを鼓舞させました。これらのアイデアは影響が非常に大きくかったので、大量のクローンが作りだされました。
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
20 beautiful free @font-face fonts - FrancescoMugnai.com
All the fonts of this collection are @font-face compatible and licensed for commercial work. Hand-picked from the amazing fontsquirrel.com Museo-Sans Nevis Rough-Draft Quicksand Miso Walkway Sansation Fontin-Sans Anivers Delicious Diavlo Dubtronic JustOldFashion Komika-Axis NeoRetroDraw Adler Angelina Vollkorn Vtks Animal 2
IE6デザイン新手法 Universal Internet Explorer 6 CSS | エンタープライズ | マイコミジャーナル
For A Beautiful Web - Creative web design and development training and workshops for web designers and developers IE6のシェアが下落しているとはいえ、Net Applicationsの報告によれば2009年4月におけるIE6のシェアはIE7、Firefox3に次いで3位、17%強のシェアを確保している。WebサイトのIE6対応は依然として続ける必要がありそうだ。そうした状況に対し、Andy Clarke氏がUniversal Internet Explorer 6 CSSという興味深い取り組みを開始した。成果物はGoogle Codeでも公開されている。 Andy Clarke氏はIE6に関する6つの疑問に対して次のように自説を紹介。 (デザインは優れたブラウザに合わせてIE
CSSでグラデーションを表現する - builder by ZDNet Japan
今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 オープンソース活用はあたりまえ！ そんな今だからこそ改めて考える 企業ITにおけるOSS活用のメリットとリスク 高い従業員満足度と安心・安全 新時代にむけた理想の業務環境こそ Anywhere Workspaceが目指す未来 ID管理の基礎知識 新しい働き方におけるITガバナンスの 向上にむけて Kubernetes活用の最適解とは？ 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 現場主導のデジタル変革 ビジネス変革のための“ITの民主化” そして 変わるIT部門の役割 本当のデータ活用できていますか？ データドリブンがあたりまえと言われる今あらためて考えたいデータ活用のありかた 膨大なアクセスを支える屋台骨 高い安定性とパフォーマンスを両
CSS-Based Tables: Modern Solutions | Smashing Magazine
Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This article was written back in 2008 when the concept of responsive web design hasn’t been created just yet. You may want to check
Cody Lindley | Front-end/Client-side/JavaScript Engineer | Boise,Idaho
Cody Lindley is a front-end/JavaScript developer and recovering Flash developer. He has an extensive background working professionally (25+ years) with HTML, CSS, JavaScript, and client-side performance techniques as it pertains to web development. If he is not wielding client-side code he is likely toying with interface/interaction design, Design Systems, and Component UI systems. When not sittin
Blogging For Web Designers: Editorial Calendars And Style Guides — Smashing Magazine
A few years ago, you might not have pointed out during a meeting with a potential client that you maintained a blog. Over time, though, blogs have evolved from the being a personal hobby to a serious work tool. In fact, today, web designers are supposed to know much more than just how to design and build websites. Customer’s expectations have increased, and unless you are in position to choose you
Advanced CSS Menu Trick | 3.7 Designs
CSS really opens the doors to a lot of powerful and rich opportunities in web design. It is funny how such minor things can create a whole new look, feel, and effect of a site. The beauty of CSS really is that it gives you power, but not too much power. It is not a tool like flash that really invites you to run away and take things too far. We are now coming to a point where the browsers are suppo
CSS Layouts - Code-Sucks.com
Coming SoonGet ready, something cool is coming!
よくある質問っぽいののjQueryを使ったサンプル｜CSS HappyLife
2007年12月6日追記 IE6で選択中のタブの上が切れていたのを修正しました。 具体的にはcss/style.cssの35行目にfloat: left;を追加しております。 いろんなサイトで見かける「よくある質問」。 一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。 特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。 それならそういった手間が掛かるかも知れないことを少しでも省けないかしら？って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。 （単純にボクがこのスタイルが一番見やすくて好きってだけだったり） サンプルページ サンプルダウンロード(Zip:20KB) メインのCSSファイル （サンプ
Pagination Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine
Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways. Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it i
Particletree » Rediscovering the Button Element
IntroductionCreating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elemen
論理構造を文脈に読み換えながら class 名を考える - 我的春秋
POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. posh - Microformatsより 基本的にはより論理構造を意識した class名をつけることが、今日のお話の目的なんですが、semantic-class-names のリンク先にない新味は、論理構造を文脈に読み換えながら class 名を考えるという点。（ただし、普段から意識的に文書全体の構造に照らして class名をつけている方には、それほど新味はないかも。） 例によって
Smarter Grids With Sass And Susy — Smashing Magazine
This article provides a small taste of what is possible with a Sass-based grid framework named “Susy”. Once you’ve spent a little time getting the hang of it, you’ll see how easy and fast it is to create simple or complex layouts without a huge amount of code. If you’re a designer, you’ll know that grids are your friends. More often than not, they’re the vital architecture that holds a beautiful d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過をきれいに使ったウェブデザインいろいろ - DesignWalker
CSS Juice - Design, Tutorial, Showcase and more » 25 Rounded Corners Techniques with CSS