CSS Programming HTML5 Template Generator - dskd
公開日2012-12-03タグCSSAdvent Calendarこの記事はCSS Programming Advent Calendar 2012 ３日目のエントリです。 CSS Programming という、JS や PHP を使わずに CSS だけでプログラムチックな処理を実装しようとう試みがあります。それをお題に、クリスマスのアドベントカレンダーのように１日ずつネタを書きましょう、というのが CSS Programming Advent Calendar 2012 の概要です。CSS Programming の考え方とか作り方は今回の発起人であるげこたんさんが１日目で説明していますのでそちらをどうぞ。 僕は今まで CSS Programming は作ったことはなかったのですが、年に一度のイベントなので力試しも兼ねて作ってみました。 Advent Calendar ３日目のこのエン
CSS Stopwatch (CSS Programming Advent Calendar 2012)
CSS Programming Advent Calendar 2012の2日目です。 まだ2日目ですし、あんまりややこしくないものをやろうと思ってストップウォッチを作ってみました。 CSS Stopwatch ダウンロード 右上のボタンでスタート、ストップ、リセットです。 上部中央のランプは色なしがリセット状態、青がスタート（カウント中）、赤が停止中を表します。 左のスイッチでは数字部分のカウントスタイルの変更ができます。これはリセット状態でないと変更できません。 :checked擬似クラス間接兄弟セレクタCSS CountersCSS 3D TransformsCSS AnimationsCSS GradientsRoot emViewport percentage lengthpointer-eventscalc()などを使っています。 IE 10, Firefox（17で確認）,
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属性を
CSSが速くかけるようになるHayakuで、世界が変わるらしい - inkdesign
27 Nov 2012 Zen CodingもといEmmetを使いこなすとまでいかなくとも、それなりに使ってはいるが、実はCSSではあんまり活用していなかった。 というもCSSに関しては、多少Emmetや他のコード補完プラグイン（パッケージ）の支援はあるものの、HTMLよりも手グセというか、自然とプロパティなり値なりをさっさと書いてしまうし、それほどありがたい、と思えるほどでもない。 またZen Codingにせよ、Emmetにせよ、短縮形のルールが決まっているし、それらを覚えないといけないので少し大変だ。 そこでHayaku、らしい 二度見しそうな名前だが、これはHayakuというSublime Text2のパッケージ。Emmetと違い、対象になるのはCSS（とCSSプリプロセッサ）であり、前述の通りCSSの記述に関してはこれといったツールを使っていない自分でも感動した。 ちなみにHay
CSSファイルをJSから非同期読込する方法
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); これに関しては以下のように別のiframeを作成して読みこめば非同期で読み込めるので、他のファイルの読み込みをブロックしない。 （iOS, Androidで動作を確認） (fun
Animatable: One property, two values, endless possiblities
box-shadow ◀ ▶ From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou Tweet
Accessible custom checkboxes and radio buttons | 456 Berea Street
Every now and then I’m handed a design comp that has customised checkboxes and radio buttons. This used to make me think “Oh no, not again” because I simply didn’t know of a reliable way to customise these particular form controls. Sure, if all you care about is replacing the browser default with a custom graphic it isn’t that hard. But if like me you’re also interested in doing so without degradi
Everything You Need to Know About the CSS Cursor Rule | Envato Tuts+
While the world's going bonkers for touch-controlled interfaces, this article will focus on the more traditional input method of the mouse. I'll suggest an approach of progressive enhancement for handling interaction design; more specifically, an overview of the CSS cursor rule. Mobile design strategy is becoming more and more important each day. The community's foray into responsive web design is
CSS3 Family Tree
Nick Not bad, excellent use of code. Problem is if you wanted to use it as a family tree, you would have to find someway to show marriages, and possible other data. Still it is an excellent start to what could be a very useful library/resource. roberto and works for a small family tree, when you use this code for more than 4 childs doesn’t work. but this is really useful and beauty, thanks a lot.
Kick-Start Your Project: A Collection of Handy CSS Snippets | Codrops
Don’t start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show you some handy snippets that you might find useful for kick-starting your next project. In one of the previous articles “Basic Ready-to-Use CSS Styles”, we saw how we could create a suite of classes to help the design process while maki
CSSプログラミング新作出来ませんでした – No.1026
CSSプログラミングの新作としてインベーダーゲームを作っていたんですが、途中で心が折れて中途半端なまま投げました。 [ incomplete ] CSS Invaders インベーダーを作りたかったというのはわかっていただけると思います。 敵の横移動が絡むと予想以上に自機の動きや位置が綺麗にできず、面倒くさくなって投げちゃったってとこです。 打つシステムとしては、敵をラッピングしているlabelを縦長に伸ばして、敵を直接クリックせずとも、その延長線上をクリックすると打った風になるという感じです。 この説明では何を言ってるか全くわからないと思うので、ソース見てください。 こういった、クラス名だけ変えて延々繰り返しみたいなコードを書くときはSCSSはほんとうに便利ですね。人力では絶対書きたくないです。 お暇な方、興味のある方は、forkして調整・機能追加してみませんか？ 『皆で作ろう、CSSイ
GoogleモバイルサイトやDisney.comのオフキャンバスっぽいメニュー
Googleのスマートフォンサイトがリニューアルされたというので見てみたら、メインメニューの表示方法が面白い感じになっていたので自分でも作ってみました。 ちなみに、先日レスポンシブウェブデザインに変更したDisney.comも、表示幅が1024px以下だと似たようなメニューの表示方法になります。 作ったものは以下。 オフキャンバスメニュー サンプルなのでHTMLは適当に。 実際にはもっと複雑になるでしょうが、動きを試すためのものなのでこんな感じで。 <div id="nav" class="globalnav"> <a href="#">Navigation</a> </div> <div id="main" class="content"> <div class="switcher"> <button id="toggleMenu">☰</button> </div> Mai
box-shadow vs filter: drop-shadow
This post is the first topic I discussed in my jam session presentation at Fronteers 2012. It’s about the drop-shadow filter. You may have looked at it and thought “this is pretty much the same thing as a box-shadow” right? Well, not exactly. The big advantage of the drop-shadow filter is that it acknowledges the outline and transparency of an element. Have you ever wanted a box-shadow that follow
ある日突然CSS Hatが消滅して再インストールもできなくなった | WebDelog
ちょっとしたドロップシャドウやグラデーションをCSSで表現するのに大活躍のCSSHatですが、 問題が起こったので、メモ書きしておきます それは突然のことでした。 CSS HatがPhotoshopから消滅しました。 そもそも入れたと思ったのは妄想だったのか？ とか思いつつ、仕方がないので再インストールをしようとすると、 “Installation process failed. Make sure you have permission to install applications” とのエラーがでて全く出来る気配がない。 とりあえず調べてみる 同様のエラーが出ている方は他にもいるようで、 @csshat Getting error while trying to update: “Installation process failed. Make sure you hav
kubeframework.com - Domain Name For Sale | Dan.com
Buyer Protection Program When you buy a domain name at Dan.com, you’re automatically covered by our unique Buyer Protection Program. Read more about how we keep you safe on our Trust and Security page. Next to our secure domain ownership transfer process, we strictly monitor all transactions. If anything looks weird, we take immediate action. And if the seller doesn't deliver on their part of the
ボーダーで三角形などを作るときには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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creative CSS Loading Animations
CSS Programming Advent Calendar 2012 - Adventar
CSS2.1 勧告の日本語訳について
https://csswarp.eleqtriq.com/