Introduction to Custom Filters (aka CSS Shaders) | CSS and UI | Chrome for Developers
Custom Filters, or CSS Shaders as they used to be called, allow you to use the power of WebGL's shaders with your DOM content. Since in the current implementation the shaders used are virtually the same as those in WebGL, you need to take a step back and understand some 3D terminology and a little bit of the graphics pipeline. I've included a recorded version of a presentation I recently delivered
Shadow DOM 201 - HTML5 Rocks
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
The Future of OOCSS: A Proposal — Philip Walton
In CSS we often code the same visual components over and over again — even within the same project. It’s embarrassing how many separate times in my career I’ve coded a two-column layout, or tabbed navigation, or a dropdown menu, or a popup (and the list goes on). To deal with this problem Nicole Sullivan created the Object Oriented CSS (OOCSS) project. She suggests that instead of defining entire
Do a loop with LESS css - TheHippo
Lately I discovered LESS and started loving and using it. In combination with Twitter’s Bootstrap it become very easy to generate CSS in a very comfortable way. At one point I needed to generate roughly 30 css classes to leverage CSS sprites. I’ve been used do this all by hand back when CSS was written without any help, but having such awesome tools like LESS there must be a way to do this more co
第9回 LESSのメリットを最大限に生かした書き方 | gihyo.jp
前回はMedia Queriesの利用方法とその難点、LESSのコンパイラを利用して少しラクする記法をご紹介しました。 今回はさらに掘り下げて、処理をmixinとして作成し、LESSのメリットを最大限活かす方法をご紹介します。 自動化のポイント まず、前回のコードをおさらいしておきましょう。 //LESS body { #foo { background-size: 320px 480px; @media screen and (-webkit-device-pixel-ratio:2){ background-image: url('bg_x2.png'); } @media screen and (-webkit-device-pixel-ratio:1){ background-image: url('bg.png'); } } } @mediaを毎回書くのは大変ですし、ミスタイプを
Sass/Compassの社内運用に関するありがたいスライドから学んだことのまとめ
これはありがたい！と思えるSass/Compassに関するスライドが2つほどSlideshareにアップされていたので、このブログでも紹介させていただきます。去年行われたHTML5 Conference 2012でNHN Japanのマークアップエンジニアの方から発表されたもので、すでにSassを使ってCSS運用を始めている方からの貴重な情報です。 前編、後編とあるので、それぞれに対して自分なりに重要だと思ったこと、また、それらに対する考察をまとめてみました。自分が管理・運営しているウェブサイトのCSS管理も、Sass/Compassを使ってやりたいなぁと思う今日このごろです。時間的な初期投資は必要だけど、長期的に考えたらメリットも多く時間の節約にもなりそうです。 今回の投稿では、まずは前編から。 前編で気になったところのまとめ 「実践Sass 前編 — HTML5 Conference
Home - Scalable and Modular Architecture for CSS
SMACSS was written in 2011. This site remains for archival and educational purposes. I’ve been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. What I've found is a process that works equally well for sites small and large. Learn how to structure your CSS to allow for flexibility and maintainability as your projec
Why Less?
Since first open sourcing bootstrap one question Mark and I have heard a lot is: “why Less?” If you’re not familiar, Less is a dynamic stylesheet language meant to extend CSS with things like variables, mixins, operations and functions. The question is a really good one and something we struggle with a lot ourselves. So much so, Mark asked me to write a little bit about some of the conversations w
About HTML semantics and front-end architecture – Nicolas Gallagher
A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression. About semanticsSemantics is the study of the relationships between signs and symbols and what they represent. In linguistics, this is primarily the stud
PHPで動くCSSプリプロセッサ作ってみたよ - blog::wnotes.net
あけましておめでとうございます、ということで新年最初のエントリです。 年末年始の習作をなにか 去年後半は外出することが増えて、ガッツリプログラムを書く機会が少しづつ減ってきてまして（不満ではなく）、年末年始の長期休暇を利用して何か１つ作ってみたいなーって思ってました（他にもほっぽりのプロダクトとかあるんですが＞＜）。 お題を何か せっかく作るんだし、あんまり自分が手を付けていなかった分野、もしくは言語でやりたいなーと思ってたんですが、とあるきっかけからテーマは何となく決まりました。 あ、そういえば来年（この時、2012年）CSS Nite LP26あるよね @ahomu氏が発表するし参加してるんだった altCSS系、Sass、LESS、Stylus... ( ⁰⊖⁰)… あ、おんなじの作ってみようか こんな感じです。altCSSってデファクトが決まってない感じ（？）だし、丁度テキストデ
はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog
こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
LESSで3倍ラクするスマートフォンコーディング 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
Separation, Abstraction, and Cascading in CSS
Software design, functional programming, and software engineering practices Summary: LESS and Sass (and similar solutions) have saved CSS for three reasons: separation, abstraction, and cascading. While I welcome them, CSS still has other problems which I believe can be solved. I propose some solutions. Introduction A lot is said about LESS and Sass, and for good reason. CSS is hell to get right a
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
roole.org
CSS Reflow - jQuery.com
Amazon.com: Sass and Compass in Action: Netherland, Wynn, Weizenbaum, Nathan, Eppstein, Chris, Mathis, Brandon: Books
すぐに使えるSCSS入門 | DevelopersIO
CSS Meta Languages and Compilers | Seán Hayes