Hackery, Math & Design — Acko.netSub-pixel Distance Transform High quality font rendering for WebGPU
Sass: Documentation
Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. If you’re looking for an introduction to Sass, check out the tutorial. If you want to look up a built-in Sass function,
:nth Tester
Sorry: this tester doesn't work when JavaScript is not enabled... ( ) Recipes Select every third element starting at second if it's a list item Select the third item if it's a list item Select the the first four elements if they are list items Select the second to last element if it is a list item Select the first appearing div Select the last appearing div Select odd list items Select every fifth
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
kzms2 – html,css,javascript » レイアウトについて(1/4) – css3を触ってみて思った4個の利点
このブログをリニューアルして思ったこと やっぱりCSS3は便利でした。 自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。 レイアウト組むのが楽ちん セレクタが便利 画像に頼らず色々出来る アニメーションが素敵 といった4点が利点かなー なんて思いました。 本日はレイアウトについて便利だったことを書いてみます。 詳細は続きで。 まず始めに css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。 css3からは違う概念でレイアウトを組むことが可能になっています。 表示確認には、Firefox3.5、Chrome4を使用しています。 ※ちなみに説明する中で「-webkit-」（Webkit系）「-moz-」（Mozilla系）「-ms-」（IE系）などのプロパティがありますが、ブラウザごとの独自規格扱いになっ
Compatibility table – Backgrounds and Borders module - CSS3 . Info
Browsers and Rendering engines Each property and unit was tested in the latest version of each of the major rendering engines – Presto, WebKit, Gecko and Trident. The browsers used in the charts above were as follows: Presto 2.2 Tested using Opera 10 beta 3 Presto 2.4 Tested using Opera 10.5 pre alpha. This uses Presto 2.5, but the support for Backgrounds and Borders is the same as Presto 2.4 WebK
Pure CSSな吹き出し
Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble
CSS Nuggets
CSS Nuggets - Presentation Transcript CSS Nuggets http://www.flickr.com/photos/twenty_questions/3491868827 :first and :last http://www.flickr.com/photos/luiscdiaz/330340600 :first-of-type Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoree
jQuery 1.4.2 Visual Cheat Sheet woorkup.com
Blog » WordPress » How and where to learn WordPress plugin development (FYI, we build plugins) How and where to learn WordPress plugin development (FYI, we build plugins) It can be overwhelming when you first try to get into WordPress plugin development. Honestly, one of the best ways to learn is just to dive right in and start coding. However, this is something that doesn’t just happen overnight.
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
Object-oriented CSS
Hosted Play with these in Firebug to learn the basics. Template Grids Module Content (very alpha) Downloads on Github Velocity download Alternate download Stuck? If you don't keep up with any of the exercises you can view (and download) the finished examples here. Starting Template Exercise 1: Template Exercise 2: Grids Exercise 3: Module Manipulation Exercise 4 Module Creation Welcome, Velocity C
First Look: Object Oriented CSS — SitePoint
In October, I’ll speak at Web Directions South 2009 in Sydney about CSS Frameworks. One of the main questions I will answer in my talk is whether or not you should use a CSS Framework in any given project. Since the alternative is writing your own CSS styles from scratch, I’m researching some of the latest thinking on hand-coded CSS. One prominent voice in this arena is Nicole Sullivan, who has de
Object Oriented CSS
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.Read less
Module · stubbornella/oocss Wiki · GitHub
Modules – Container Objects Modules are based on the Standard Module Format. They provide a simple, predictable way to skin container objects while maintaining accessibility and performance. Contour skins are separate from background skins, headers, and footers. I suggest you name skins in a way that indicates how that skin should be used (semantically). The module skin should not change the displ
Object Oriented CSS video on YDN – Nicole Sullivan
Yahoo! Developer Network has released a video of my Object Oriented CSS talk at Web Directions North just in time for Ada Lovelace day. I’ve also been included in a feature on Women in Technology. I’m absolutely flattered to be included among these fantastic technical women. Wow. Object Oriented CSS: for high performance websites and web applications. Find out more about object oriented css Open s
IE 6, IE 7 の inline-block 考察 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
jQuery exFixed を動的な位置移動やリサイズ処理に対応させてみた - Cyokodog :: Diary
更新履歴 2010-11-14 exFixed Ver 1.3.0 ベースの記述に変更しました。 2009-10-16 本ページのサンプルソースを jQuery.exFixed.js の Ver 1.2.0 に対応した記述に差し替えました。詳細は以下をご覧下さい。 jQuery.exFixed.js を機能拡張しました - Cyokodog::Diary 一ヶ月以上間のあいた久しぶりの更新ですが、今回もしつこく IE6 の position : fixed ネタです。 最近では HTML でリファレンスマニュアルなどを作る機会もあり、position : fixed で目次一覧を固定表示させたりしてます。そんな時 exFixed の出番となるわけですが、固定表示させた目次エリアに対し、さらにリサイズや位置調整機能などを付加しようとするといろいろと問題が生じます。 今回はそれらの問題を解決し
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
CSS Template Layout Module
W3C Working Draft 2 April 2009 This version: http://www.w3.org/TR/2009/WD-css3-layout-20090402 Latest version: http://www.w3.org/TR/css3-layout Previous version: http://www.w3.org/TR/2007/WD-css3-layout-20070809 Editors: Bert Bos (W3C) bert@w3.org Copyright © 2009 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply. CSS is a simple, declarative langu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
