CSS Trick: Creating a Body-Border - CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. This article as originally published on February 25, 2008, but is now being completely re-written to be more comprehensive and show modern techniques. Jon Hick’s site Hicksdesign is where I first saw the concept of a “body border.” In this case, it’s a very subtle and lovely
Color Animate Any Shape with a Knockout PNG | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. You normally don’t think of <img> as having a background color, but they certain can have that property. It might come up if say, you wanted two borders around your images. You could use border for one and simulate the other by giving the image a background-color and padding
角丸を表現するCSS3のborder-radiusのブラウザ対応状況を調べてみた
現在はまだ規格がきちんと定まっていないのと、ブラウザの対応状況の問題であまり使われてないCSS3なんだけど、もし普通に使える状態になったら多用されることが予想されるのが「border-radius」というプロパティ。これはCSSで指定するだけで角丸（丸い角）が作れるプロパティで、今現在角丸の表現に使われてる「角に丸い画像を使う」「空のspanなどを使って擬似的に丸く見せる」などの面倒で手間がかかる方法をとらなくて済むというメリットがある。 CSS3 角丸を表現する border-radius | CSS Lecture もちろん「ブラウザが対応してない」というのは主にIEのことなんだけど、基本的にそれ以外の対応ブラウザでもborder-radiusを使うときは「-moz-」や「-webkit-」などのベンダープレフィックスを付けなさいと多くのサイトで書かれている。 ベンダープレフィックス（
Annotated <figure>s in HTML5 and CSS – CSS Wizardry
3 June, 2011 Annotated <figure>s in HTML5 and CSS Written by Harry Roberts on CSS Wizardry. Table of Contents Demo The code The HTML The CSS A couple of things to note I’ve never really been one for CSS experiments. They’re cool and all, but I prefer solving real problems with good ol’ CSS and markup. This is what this next thing was born from and I’m really pleased with the outcome! It’s image ma
TechCrunch | Startup and Technology News
Parallel Domain is putting the ability to generate synthetic datasets into the hands of its customers. The San Francisco-based startup has launched a new API called Data Lab that stands on the shoulde Multiple subreddits are adopting alternative methods of protesting like publishing only one kind of post, changing the topic in focus, and days when the community turns private. A lot of these commun
On negative hovers – CSS Wizardry
18 May, 2011 On negative hovers Written by Harry Roberts on CSS Wizardry. Table of Contents Spot the odd one out Underlines are obtrusive Intuition The answer? Issues Final word I’ve been mentioning moaning about something called negative hovers on Twitter for ages now, so it’s about time I wrote a quick post on them. At their most basic a negative hover is a link whose appearance is subtracted fr
ブラウザ幅を超えた部分を隠す手法として body { overflow-x:hidden; } はあまり使わない方がいい気がする件
ブラウザ幅を超えた部分を隠す手法として body { overflow-x:hidden; } はあまり使わない方がいい気がする件 公開日: 2011年5月8日 タグ: css, memo ツイッターでも書いたのですが、preの背景をブラウザの幅いっぱいに拡大する というエントリ読んでて「ほうほう :before/after 疑似要素を使う手もあるか…」と感心しつつトラックパッドでスクロールさせたら、突然コンテンツが消えてしまって深夜に「うぎゃー！」とかなっておったのです（注: これ書いてる今は直ってます） まあ pre に限らず、基本的に幅固定で中央寄せだけど、内側にある特定のブロック要素の背景はブラウザ幅いっぱいに広げたいという場合、広げたいブロック要素に大きめ（10000pxとか）のパディングを付けて左右に広げ、それと同じだけのネガティブマージンを付ける事で背景部分を外側にはみ出させ
[CSS]かわいいストライプ柄を作成するスタイルシートのチュートリアル
画像を使用しないで、ストライプ柄のボタンを作成するスタイルシートのチュートリアルを紹介します。 ストライプ柄はボタン以外にも適用が可能です。 Simple buttons with light stripes (pure CSS) デモページ [ad#ad-2] かわいいストライプ柄のボタンは、マウスホバーのエフェクトも実装されています。 HTML ボタンはテキストを使ったa要素で作成されています。 <a class="bt-blue fx-stripes" href="#"><span>Blue button</span></a> <a class="bt-grey fx-stripes" href="#"><span>Grey button</span></a> CSS：ストライプ ストライプのベースとなるスタイルシートです。 .fx-stripes:before { content:
CSS drop-shadows without images – Nicolas Gallagher
Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. Divya
ethertank.jp
ethertank.jp 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～
第6回 岡山WEBクリエイターズのセッション1で発表したスライド内容を全文掲載。第6回 岡山WEBクリエイターズ セッション1『WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～』 岡山WEBクリエイターズ勉強会でお話した内容を、スライドとともに全文掲載しています。 テキストはあくまで原稿そのままですので、実際に喋った内容とは幾分異なる場合があります。 スライドのPDFをダウンロード 講師概要 SKPRODUCT代表。 デザイン、コーディング、PHPによるシステム構築、ActionScriptを使用したFlashなど、WEB制作全般を行うWEBアーキテクトです。 岡山の大手企業・学校などを中心にWEBサイトと独自に開発したCMSフレームワーク『SEED』の提供を行っています。 本日は、WEB標準デザインはじめの一歩です。 WEB標準というと、技術的なことを想像される方
Pure CSS speech bubbles – Nicolas Gallagher
Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML. The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for e
Firefox 3.6以降でＭＳ Ｐゴシックを無効にする
CSSの@font-faceではユーザーがインストールしていないフォントをウェブ上に用意してやりそれをダウンロードさせてページ上で利用することを主眼としているが、ローカルのフォントを置換、つまりＭＳ Ｐゴシックをメイリオに置換するなどということもできる。Firefoxでは3.6から可能になった(Beta版でももちろん可能)。ユーザー・スタイルシートでの利用が中心になると思う。 ＭＳ Ｐゴシックをメイリオに置換する場合は以下のようにuserContent.cssに記述する(userChrome.cssではない)。 @font-face { font-family: "ＭＳ Ｐゴシック"; src: local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック"); } @font-face { font-family: "MS PGothic"; src:
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Sass - チュートリアル
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！ みよう！ みよう！ Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた) - kojika17
' CSSリセットを改変している時に、「CSSリセットは本当に必要か？」ということを疑問に思うようになってきました。 ブラウザのデフォルトであるユーザーエージェントスタイルシートをCSSリセットでnormalにして、さらにboldに戻すということをしています。 これだと単に、記述量と処理を増やしているだけに過ぎません。 「デフォルトCSSを理解すれば、CSSリセットはいらないのではないか？」という考えの元、デフォルトのCSSを調べてみました。 ユーザーエージェントスタイルシートの調査 ブラウザのアプリケーションファイルに潜ってCSSを探したところ、Fire FoxのCSSのみ探し出せました。 それ以外はアプリケーションの中にCSSが含まれている場合などにより、デフォルトCSS探せませんでした。 ただしIEに関しては、まとめたれたサイトがあったので、これを参考にします。 Internet E
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
My Photoshop Setup « Chris Valleskey
Jump links and viewport positioning – Nicolas Gallagher