Sass で Font Awesome を使おう « shilog
この記事は CSS Preprocessor Advent Calendar 2012 23日目の記事です。 Font Awesome Font Awesome と言えば Twitter Bootstrap のアイコンを Web フォントとして使えるということでお馴染みのサービスです。Web フォントなので、CSS でアイコンの色やサイズを調整することができますので、ある程度柔軟にアプリや Web サイトなどで使用することができます。 Font Awesome のサイトを見てみると、LESS と CSS についての導入方法は書いてあるのですが、Sass については書いてない（と思う）ので、その手順をシタタメます。 導入手順 まずは Font Awesome のサイトでファイル一式をダウンロードして解凍します。するといくつかフォルダが出来上がります。 Font Awesome のサイトに
CSS おれおれ Advent Calendar 2012やります。ひとりで。 | Ginpen.com
01日目 CSSでの色指定について。半透明とかキーワードとか、ご存知でした？ 02日目 CSSだけで円を描く方法と、それを使った閉じるボタンの例。 03日目 CSSで白抜き文字を作る方法。text-shadowで囲んでみよう。 04日目 角が丸いグループのCSSを組むチュートリアル。あのiOSっぽいやつ。 05日目 width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。 06日目 ありがちなタブのマークアップとスタイル実装例。 07日目 CSS3で使える35+α種類のカーソルの一覧表。 08日目 文章がはみ出したら”…”を表示するtext-overflowの使い勝手が悪いのでjQueryで書いてみたりとか。 09日目 属性セレクターってのもあるよ。 10日目 CSSでiOS風の選択ボタンをつくるチュートリアル。 11日目 存在しない要
CSSプリプロセッサのfunctionを拡張してみた (CSS Preprocessor Advent Calendar 8th day)
CSS Preprocessor Advent Calendar 2012の8日目でございます。飛び道具的な好奇心に基づき、functionの拡張について調べてみた次第。 今回は、下記の2つの関数をサンプルとして扱います。どちらも実用的なものではありませんが、あくまでサンプルということで、、、。 reverse - 与えられた文字列を逆順に並べ直して返す randomColor - ランダムなカラーの16進数を返す Sass編 Sass - Syntactically Awesome Stylesheets Module: Sass::Script::FunctionsにあるAdding Custom Functionsを参考にします。じつは、LESSとStylusは使ってたんですが、Sassって使ったことないんですよね...。 sass_add_func.rb Sass::Script:
CSSプリプロセッサでスタイルガイド - inkdesign
07 Dec 2012 ※この記事は、CSS Preprocessor Advent Calendar 2012の7日目の記事です。 CSS PreprocessorとIAの親和性、という記事の影響を受けまして、こちらの記事で書かれていた、 CSS Preprocessor そのものを共通ドキュメントにしてしまうとか という点を拾わせていただき、スタイルガイドのツールを紹介しようとおもう。 スタイルガイドとはなにか スタイルガイドは簡単にいうと、モバイル時代におけるCSSの設計と実装から引用させてもらうと、ページ上の部品（コンポーネント）をあつめたリスト、ページのこと。デザインパターンと呼ばれることもあるかもしれない。 具体的な成果物としてどういったものを指すのかというのは実際のページをみてもらう方が早いとおもうので、一度下記のページも参照してほしい。 MailChimp Design P
『モバイル時代におけるCSSの設計と実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
擬似要素のCSSアニメーションはinheritを使えば有効になる - inkdesign
01 Dec 2012 Joshua Hibbert氏の記事、Don’t Forget the CSS Value ‘inherit’ - Joshua Hibbertでは忘れられがちなinheritによる値の継承について説明している。 inheritを使えば親要素のスタイルの継承ができるが、これは要素とその擬似要素の関係においても、擬似要素が継承させることができる。 で、この記事における本題としては、Bonus transition trickとして紹介されている、inheritを使えば、擬似要素でもCSSアニメーションが有効になるという話のこと。 擬似要素では”基本的に”アニメーションが無効となる Hibbert氏の記事にあるbasic sampleを見てもらうとわかるのだが、右側（赤い方）では擬似要素に大しては継承を使っておらず、そのためアニメーションになっていない。大して一方では擬
パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite - MOL
Sass、Less、StylusなどCSS Preprocessorに関するAdvent Calendarです。― CSS Preprocessor Advent Calendar 2012 - Adventar パフォーマンスの勉強ができてなおかつSass/Compassのお勉強にもなるお得なシリーズまさかの2回目。Adventにぶつけてきた！ややもするとシリーズものの2作目というのは駄作になりがちだが、そんなプレッシャーはねのけて乱反射！やっていくYO! これまでの： パフォーマンスからみるSass/Compass 第1回：Nestingと@import - MOL パフォーマンスからみるSass/Compass 番外編：MSは青かった - MOL CSS Spriteの利点・欠点 『ハイパフォーマンスWebサイト』の書籍には「高速サイトを実現する14のルール」というものがある。その中
CSS Things That Don't Occupy Space
By Louis Lazaris / November 13, 2012 / 14 Comments Updated: August 7, 2022 In most cases, when you place an element on the page in your markup, if you don’t specify any special styles, it will occupy exactly the same space that it appears to occupy visually. In other words, if you place a box sized at 200px by 200px on your page, anything you place after it in the source order, with no further sty
cssbutton.me - cssbutton リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Using CSS animations - CSS: Cascading Style Sheets | MDN
CSS Tutorials CSS basics CSS first steps CSS first steps overview What is CSS? Getting started with CSS How CSS is structured How CSS works Assessment: Styling a biography page CSS building blocks CSS building blocks overview CSS selectors Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators Cascade, specificity, and inheritance Cascade layers The box mo
CSScomb - MOL
うららかに晴れた秋の日、みなさんいかがお過ごしか？こんちわ@t32kだ。 今日はCSScombってツールの紹介だよ。タネマキであったこもりさんのSublime Text2勉強会のときに知ったんだけど、 まぁCSSプロパティを綺麗にソートしてくれるって代物だ。大まかな機能はこんな感じ。 CSSプロパティのソート ソート順は設定可能 style要素、style属性もパース スタイルシートのフォーマットは変更しない CSS2,3,4も完全にサポート オンラインからでも使えるし、Sublime Textだけじゃなくてメジャーなテキストエディタだったら、たいていのプラグインは用意されているんだ。 便利なものがあるなーと思ったけども、Sassファイルでこのツールを実行すると、その時はバグっていて、単純にプロパティ順を綺麗にさせるためだけなのに、そんな致命的なバグの危険性（CSSが壊れる）とかマジ勘弁！
margin-top派かmargin-bottom派で言えば、margin-top派です - あと味
世の中にはmargin-top派とmargin-bottom派がいるとかいないとか。 自分はmargin-top派です。 margin-left派とmargin-right派がいるならば、margin-left派です。 試しにmargin-bottom派になってみようかなと頑張ってみたんですけど、やはり慣れもあり、margin-topの方がしっくりきたのでエントリーを起こすことにしました。 margin-top派な理由 margin-top派になったのには理由はなくて、なんとなくmargin-top派になった気がするのですが、margin-bottom派に移るのが少し面倒な理由はあります。 その理由は:first-child擬似クラスの存在です。 例1 例えば、以下の様なHTMLがあったとします。各section.contentの間には30pxの余白が欲しかったとします。 <section
JavaScriptを使わずにPinterest風レイアウトにする
昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns"> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> ... ... </div> </div> CSS Pinterest風レイアウトをCSSで実現するには、二つの方法が考えられます。 一つ目はfloa
CSS Style Guides | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, ind
HTML Canvas Image Zoom
Original 16x16 Image zoom factor × Zoomed by Image Size Zoomed by drawImage() Zoomed by Code Zoomed by Image Size + CSS Showing how to zoom up a bitmap with crisp edges using HTML Canvas or CSS. HTML Canvas zoom written to support this Stack Overflow answer. CSS Zoom written to support this Stack Overflow answer. Zooming via HTML Canvas function drawPixelated(img,context,zoom,x,y){ if (!zoom) zoom
CSS3 の border-image で簡単にリッチなボタンを作れる未来がいつの間にかきてた - latest log
画像を使ってリッチでフレキシブルに伸び縮みするボタンやフレームを作る時みなさんはどうしているでしょうか。 従来の方法だと デザイナーさんが画像を9分割 マークアップで頑張って再現する というハードワークを強いられていましたが、 昨今のモバイル開発環境では、それ、もう要らない苦労らしいですよ。 CSS3 の border-image を使うと、9 slice(9 patch)を CSS だけで実現可能です。 用意するものは、9つに分割する前のボタン画像です。 画像を用意したら、http://border-image.com のジェネレーターを使い border-image 用のCSSを生成します。 -webkit-border-image: url(img/btn.9.png) 27 24 30 25 round; とすると、 Android Browser 2.3.3 iPhone 4S
The CSS 3 Flexible Box Model ✩ Mozilla Hacks – the Web developer blog
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. Christian Thanks for the great article! Too bad there is no support in IE yet. Btw shouldn’t the following be converted from: 1 to: 1 April 22nd, 2010 at 10:22 Christ
CSS Flexbox
Toggle flex box on and off Value of the display property is currently: The interesting thing about this technique is that no floats whatsoever are being used.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Code smells in CSS | en.ja | Translated Articles for Front End Developers
GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法 :: 5509