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の特定のバージョンでロードさせるべ
Code Snippets | CSS-Tricks
A collection of code snippets for web developers, including code for HTML, CSS, JavaScript, PHP, WordPress, jQuery, HTAccess, and more!
スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」:phpspot開発日誌
スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」 2011年04月19日- Adapt.js - Adaptive CSS スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」。 見ているユーザによってディスプレイのサイズなんかはまちまちで、ブラウザのサイズも結構違いますね。 このフレームワークを使えば、幅が600〜800px は a.css、800〜1200px の場合は b.css のように使い分けるのが容易になります。 端末の違いなんかもCSSによって分けてしまえると、プログラム的な無駄な分岐を省けて綺麗に作れますね。 ここら辺の分岐を簡単な使い方で勝手にやってくれるのがAdapt.js。スマートフォン向けサイトなんかにも使えます。 iPhoneだと縦で大体320p
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
Creating a modern modal with CSS
Using CSS3 techniques a modal box can be created without JavaScript or images. With a bit of animation, transition and transform, it can be made that little bit more special. CSS Modal Experiment 12 Feb 2012: Modal experiment updated for Firefox 10 which has better transform, transition and animation performance. Also supports 3D transforms. In this experiment, clicking an ‘open’ link pops up a di
HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: When are browser vendors going to see the helper methods/libraries created by the JavaScript toolkits and implement these functionalities natively within the browser? I realize that standards are important and browser vendors can't afford to half-ass these implementations but I do believe they could be
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
色相環とトーンの表を使って色の意味をデザインに生かそう - Webデザイン - acky.info
Loading...
SASSIENCE ～ 世界が嫉妬するCSSへ
IDEA * IDEA
