Responsive Web Design Using Compass – Part 1
Surgeworks' Blog Our team talking about our company, our work, our client and each other. I started my career doing Art Direction for print advertising; I learnt how to direct my creative process in many ways and an important factor to be taken into consideration was the media type and size – Magazine, Tabloid, Billboard, all the media sizes were fixed and I knew exactly the canvas size. After mig
WebPuttyがちょっといいんじゃないの？ | gaspanik weblog
例によって爺さん並みの時間に起床していろいろチェックをしていたら、オンラインのCSSエディタ「WebPutty」が話題になっているようでした。ちゃんと自サイトで使ったわけではないですが、一応お知らせ程度に載せておきます。 なんでも、このWebPuttyはオンラインのCSSエディタでありながら、CSSのファイルのホスティングも兼ねているようです。さらには「Sass」や「Compass」もサポートしているらしく、そっち系を使ってらっしゃる方でも使える、と。ちなみに、公開時のファイルはちゃんとMinify & Gzipされるようです。 何はともあれ、Googleアカウントでログインだ登録に特別なことは必要なく、Googleアカウントでログインできます。 ログインするとこんな画面。左が保存されたCSS、右に新規サイトの登録のボタンが並んでいます。右上の「HELP」を押せばいろいろ教えてくれます。
[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル
画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは 条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ
How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3 | Envato Tuts+
As CSS3 becomes more robust and is more widely supported, the options for fun modern design elements that can be created without graphics are virtually limitless! For a recent project, I decided to see if I could create a centered ribbon banner with pure CSS3. This tutorial will walk you through how it was done. As it turns out, it’s actually quite easy, using only simple, semantic HTML and some C
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
[jQuery]こんな機能があったんだ。jQuery stop()|WEBプログラム覚書
HOME>WEBプログラム覚書>[jQuery]こんな機能があったんだ。jQuery stop() [jQuery]こんな機能があったんだ。jQuery stop() 「Buttons like Windows 7 with JS & CSS」を見てて って記述あったので調べてみたらstop()って色々使えるんですね。 全然しらなかったです。 stop([clearQueue], [gotoEnd]) 引数は2つ。何も指定しないとfalse [clearQueue]がtrueの場合、持っているキューが全て削除される。[gotoEnd]はtrueにすると現在のアニメーションの最後のコマへジャンプする。
)
CSS に関する互換性と Internet Explorer
Windows Internet Explorer の新しいリリースが発表されるたびに、カスケード スタイル シート (CSS) 標準のサポートは絶えず改善されてきました。 Internet Explorer 6 は、CSS レベル 1 に完全準拠した最初の Internet Explorer バージョンでした。 Windows Internet Explorer 8 は、CSS レベル 2 リビジョン 1 (CSS 2.1) の仕様に完全準拠し、CSS レベル 3 (CSS 3) の一部の機能をサポートします。 お客様の Web サイトが、以前のバージョンの Internet Explorer を含むブラウザーを対象にする場合、各バージョンの CSS 準拠レベルを確認する必要があります。 この記事では、Internet Explorer 8 でのサポート状況を含む、Internet Ex
セレクタ Level 3
この文書は「Selectors Level 3 (W3C Recommendation 29 September 2011)」の日本語訳である。日本語訳は参考情報であり、公式な文書ではない。また、翻訳に誤りがある可能性にも注意されたい。 原文の最新版 は、この日本語訳が参照した版から更新された可能性がある。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照されたい。 更新日: 2017-03-23 公開日: 2011-09-29 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> セレクタ Level 3 2011年9月29日付 W3C 勧告 (Recommendation) この版: http://www.w3.org/TR/2011/REC-css3-selectors-20110929/ 最新版: http://www.w3.org/TR/
clearfixハック｜CSS HappyLife
通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。 コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。 IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。 ソコでかなり便利に使えるテクニックが、clearfix。 使い方は、clearしたい親要素に下記のように記述。 div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-hei
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
CSS Typography: Examples and Tools
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. In the previous part of this series, w
jQueryで背景画像をアニメーションで無限ループさせる
画像の準備 とりあえずアニメーションさせる画像を用意します。ループさせるので継ぎ目のない画像を作成した方がいいかもです。 作成したら「bg.png」という名前で保存します。 今回はこんな画像を作成してみました。 デザインがしょぼいとか言ってはいけない！ html+cssでバックグランドに画像を配置 html+cssは特別なことはなく普通に作ります。 画像はbodyの「background」で配置してみました。 html <body> <div id="container"> <h1>jQueryでバックグラウンドを無限ループ</h1> <p> このページはjQueryでバックグランド画像をアニメーションループさせるサンプルページです。 </p> </div> </body> css body{ background: #A6E9FF url(bg.png) repeat-x; margin
t32k.com - このウェブサイトは販売用です！ - t32k リソースおよび情報
このウェブサイトは販売用です！ t32k.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、t32k.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
[CSS]3枚の画像を使って、立体的なキューブ状にするスタイルシート
Building a 3D Cube With HTML5 and CSS3 デモ [ad#ad-2] 画像はdiv要素で実装されているため、CSSオフ時は上のキャプチャの左のように表示されます。 使用している画像はサイズ100x100の3枚で、下記のようになります。 画像のキャプチャ 実装は、下記のようになります。 HTML HTMLには、HTML5を使用しています。 <div class="cube"> <div class="face top"><img src="img/WPN-P.png" width="100" height="100"></div> <div class="face left"><img src="img/WPN-W.png" width="100" height="100"></div> <div class="face right"><img src="i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
色相環とトーンの表を使って色の意味をデザインに生かそう - Webデザイン - acky.info
SASSIENCE ～ 世界が嫉妬するCSSへ
IDEA * IDEA
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
料金表のデザインいろいろ - DesignWalker
