【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 | DevelopersIO
はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。 Compass - CSS オーサリングフレームワークとは compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。 compassを使うことで、Bender Prefix、CSS Spriteを自動
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
CSS3 Please! The Cross-Browser CSS3 Rule Generator
CSS3, please! This element will receive instant changes as you edit the CSS rules on the left. Enjoy! /* ------------------------------------------------------------- CSS3, Please! =================================================== Update: We recommend using Autoprefixer instead of CSS3Please. You can edit the underlined values in this css file, but don't worry about making sure the corresponding
CSS3 Cheat Sheet (PDF) — Smashing Magazine
Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML 5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS 3 cheat sheet that would present the main features of CSS 3 in a handy, printable reference card. Just last week we released an extensive printable
CSS3 Gradient Generator
The CSS3 Webkit Gradient Generator is a showcase for the power of CSS webkit gradients. It also provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient they generated.CSS3 Gradient Generator v2.0 Welcome to the CSS3 Gradient Generator! Please be aware that in order t
CSS3Generator by @RandyJensen
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s w
CSS3 PIE: CSS3 decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
CSS3 presentation
This slideshow was originally coded to run in Mozilla Firefox 4 beta or Minefield. Some features may not show properly in other browsers, such as CSS gradients or anything that depends on them. Isn’t CSS2.1 sufficient? Question: What bugs you the most when coding CSS (2.1) today? IMHO: Decorative images Markup clutter JavaScript for presentational stuff CSS3 attempts to solve these problems
HTML5 & CSS3 Resources for Designers
Updated: 2011-08-30 (new items highlighted below) CSS3 Examples (including Media Queries) http://www.html5rocks.com/tutorials/flexbox/quick/ https://github.com/doctyper/flexie http://thebox.maxvoltar.com/ http://hardboiledwebdesign.com http://lostworldsfairs.com http://www.informationarchitects.jp/ http://colly.com http://hicksdesign.co.uk http://jordandobson.com/better_rounded_border_demo/ http:/
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
iPhone CSS3 | A CSS3 Experiment by JeffBatterton.com
iPhone CSS3 | A CSS3 experiment by JeffBatterton.comNo images whatsoever. That's right. Nothing but carefully crafted markup and slightly over-the-top CSS. This project will only display correctly on a webkit browser and has only been tested in Google Chrome. About this project ▶ ·······················································································································
Thematic WordPress Theme Toolbox: 10 extremely useful hooks
When building a website, using a CSS framework is a real time saver as it provides you with tools every web designer and front-end developer needs when crafting a site (other than good web hosting). A CSS framework is a software framework created to allow for easier, more standards-compliant web design using HTML/CSS. Many popular CSS frameworks are design-oriented and contain elements that can be
2010年、押さえておきたいウェブデザインのトレンド
CSS3やHTML5などをはじめ、トレンドのフォント、見出しのデザイン、クオリティをアップする背景など2010年に押さえておきたいウェブデザインのトレンドをWeb Designer Wallから紹介します。 Design Trends (Predictions) in 2010 下記は、各ポイントを意訳したものです。 元記事では、サンプルも豊富に掲載されています。 はじめに 1. セリフフォント 2. 大きい見出し 3. 埋め込みフォント 4. 繊細なテクスチャ 5. ミニマリストとグリッド 6. CSS3 7. モバイル対応 はじめに 2010年はウェブデザインが今まで以上に刺激的で試行錯誤に満ちたものになるかもしれません。 HTML5、そしてCSS3の魅力的な新機能をデザイナーとデベロッパーが巧みに取り入れようとしています。 去年からのトレンドだと、現在は手描き風や大きい背景は少なくな
Stronger, Better, Faster Design with CSS3 — Smashing Magazine
In our last article about CSS3, “Pushing Your Buttons With Practical CSS3, we talked about using new CSS3 techniques like gradients, border-radius and drop-shadows to create compelling, flexible and (in some cases) hilarious buttons. In this second article we’re going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts. As before, caveat c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
短期間＋大規模ゲーム開発でも破綻しないHTML・SCSS
stroll.js - CSS3 Scroll Effects
5509.me
Button Maker
HTML5 Bookmarks - daily news articles and bookmarks