Simple user styles
User styles that simplify UI and give focus to the content on some of my favorite websites. Tweet Follow @connors Facebook Over the years the news feed has become a bit too cluttered for my taste. This user style removes some of that clutter. See on Github Twitter I love Twitter. I especially love how simple it is on mobile. This user style brings some of that experience to desktop web. See on Git
Pixate - naoyaのはてなダイアリー
数日前に Pixate という iOS 向けミドルウェアがリリースされました。なんとiOSアプリの見た目を css で書けるという、全ウェブ開発者感涙のライブラリ。こりゃすげえ。ただし無料というわけにはいかず、18,000円くらいでこざいます。 2月9日 追記 トライアル版と、個人利用のための無料版が出たようです。 RubyMotion の teacupのように css チックな DSL で書ける、というものはありましたが Pixate はその辺とは次元が違ってて、普通に css ファイルに css を書くことができる。 button.blue { position: 60, 100; size: 200, 40; border-radius: 7px; font-family: 'Courier New'; font-size: 18pt; font-weight: bold; bord
画像の最大幅を calc() で制御する
画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (Fig 1)。 Fig 1: パディングとボーダーを持つ画像に `max-width: 100%;` を指定すると、親要素の幅を越えてしまうことがある これをつねに親要素に収めるようにするには、box-sizing プロパティを利用して画像の幅がパディングとボーダー込みで算出されるようにする、という手がある。 img { max-width: 100%; border: 1px solid sil
addShadowToScrollArea CSS3only - RUILOG LIBRARY
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae elementum metus. Donec sagittis ultricies urna, ac egestas orci scelerisque id. Curabitur id nunc vel diam vestibulum faucibus. Maecenas ultrices ipsum quis eros ultrices vitae egestas nisi blandit. Fusce metus nisi, auctor et consectetur in, tincidunt non turpis. Praesent lacus nisl, tincidunt vitae tincidunt porttitor, m
Retinaでもボケない「シンボルアイコン」を使いこなそう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも！デザイナの王です。 2012もいよいよ12月を迎え、果てして2013年は来るのかと、わくわくしている今日この頃です。 ここ最近、AppleのRetinaを皮切りに、超高精細ディスプレイが色んなメーカーから出ているニュースが目に付く。 有名所ではシャープのIGZO（約500ppi）、ジャパンディスプレイのLTPS（約650ppi）などがありますよね、iPhoneのRetinaをぶっちぎりで凌駕してしまうという！4K時代の到来を予感させる！（その前に地球が終わらなければいいのだが！） ということで、来るRetina全盛時代に備えるべく、どんなにモンスター級の高解像度のデバイスでも綺麗に表示する「シンボルフォント」を最近使い始めました。今回はそんな素敵なシンボルフォントの導入法を紹介したいと思います。 そもそも♥「シンボルフォント」♥って何？ 読んで字の如し、「図形のフォント」です。タイ
1日目 : CSS Programming Advent Calendar 2012
正直表は、ネタですが。 :activeや:targetの擬似クラスは多用します。 a要素、input要素、label要素が便利！aタグと:targetを組み合わせることで、aをクリックしたら別の要素の表示を変える事ができます。 urlのハッシュがbox_1の時は#box_1を表示する。urlのハッシュがbox_2の時は#box_2を表示する。urlのハッシュがない、box_1・box_2ではない時は、box_1・box_2を表示しないinputのradioを使って別の要素の表示を変える :checkedと間接セレクタを組み合わせるclassがb1のinputがcheckedになった時、box_1を表示。box_2は非表示classがb2のinputがcheckedになった時、box_2を表示。box_1は非表示labelを使用して:checkedを利用しやすくする labelのfor属性を
実践Sass 前編
17. Scout • 無償 • Compassも対応 • サイトからDLできるver.ではconfig.rbが読めない • githubの最新版は、config.rbとSass3.2対応 • Sass3.2の対応が遅かった （一昨日ようやくリリース）
HTML5実力テスト 答え合わせ勉強会 HTML/CSS編
14. • CSS Backgrounds and Borders Level 3 • CSS (Grid) Template Layout • CSS Image Values and Replaced Content Level 3 • CSS Line Grid • CSS Marquee • CSS Lists Level 3 • CSS Multi-column Layout • CSS Positioned Layout Level 3 • CSS Speech • CSS Presentation Levels Inactive • CSS Values and Units Level 3 • CSS Regions • CSS Mobile Profile 2.0 • CSS Tables Level 3 • CSS TV Profile 1.0 • Selectors L
Can I use a :before or :after pseudo-element on an input field?
I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> This works (puts the smiley after "buu!" and before "some more") <span class="mystyle">buuu!</span>a some more This does not work - it only colors someValue in red, but there
Morf.js - CSS3 Transitions with custom easing functions
Native These are the natively supported easing functions, built into WebKit. linear ease ease-in ease-out ease-in-out Custom These are custom easing functions (thanks to Robert Penner & Thomas Fuchs) that can produce much more interesting transitions. Generated Animation CSS Internally the custom easing function for the transition is faked using CSS animations. Here is the code that is produced on
coding Tag - Designzzz
There was a time when Mozilla Firefox was the most favorite browser of web developers. Then Google Chrome came along, knocked out Firefox and Internet Explorer, and took the top spot. Still, Google Chrome is the most u... Android is the world’s most used mobile operating system. No wonder when anybody wants a mobile app made, their first priority is to make an app for Android. So today we are sha
YUI 2: Reset CSS
YUI Reset CSS The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions. Note: YUI Base CSS (introduced in version 2.3.0) can compliment Reset by applying a style foundation for common HTML elements that i
ボーダーで三角形などを作るときにはtransparentではなくrgba()で
よくCSSのボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。 たとえば、こういうHTMLとCSSで三角形を作るとしましょう。よく見るタイプだと思います。 <div class="test1"></div>.test1 { width: 0; height: 0; border-width: 0 200px 200px 0; border-style: solid; border-color: transparent transparent #eee transparent; }こっちでもいいです。好みで。 .test1 { ... border-color: transparent; border-right-color: #eee; }CSS Triangle 1 見えづらいかもしれませんが、直角三角形になっていますね。 ただし、Fire
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」:phpspot開発日誌
HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」 2012年09月12日- TideSDK | Create multi-platform desktop apps with HTML5, CSS3 and JavaScript HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」。 元々はTitaniumDesktopとして開発されていましたが、TideSDKという名前になったっぽい。 Windows, Mac, Linux のアプリをWEB開発言語で開発できるTitaniumMobileみたいな仕組みです。 スマホだけじゃなくてやっぱりデスクトップアプリも欲しいということがありますから、こういう仕組みでさっくりとやってしまいたいですね。 Windows版アプリ Linux版アプリ Mac
Original Hover Effects with CSS3
Hover Style #1 A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Read More Hover Style #1 A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Read More Hover Style #1 A wonderful serenity has taken possession of my entire soul, like these
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create a new fiddle - JSFiddle
CSS Programming Advent Calendar 2012 - Adventar
html5-memo.com
csspop.com