Bootstrap 4 alpha
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Today is a special day for Bootstrap. Not only is it our fourth birthday, but after a year of development, we’re finally shipping the first alpha release of Bootstrap 4. Hell yeah! Bootstrap 4 has been a massive undertaking that touches nearly every line of code. We’re
CSSのパースにはJSCSSP - Qiita
var cssText = 'body {background: #000 url(image/hoge.gif) no-repeat fixed right bottom;}'; var parser = new CSSParser(); var parsed = parser.parse(cssText, false, false); JSON.stringify( parsed.cssRules[0].declarations[0], null, " " ); /* "{ "type": 1000, "property": "background-color", "values": [ { "value": "#000", "type": 1, "name": null, "parentRule": null, "parentStyleSheet": null } ], "value
atom-shell-starterでSASSを扱えるようにした: misc
先週は、次男がインフルエンザになり、さらに自分がうつされ、一週間休んでました。kjunichiです。 背景 atom-shell-starterを使って、アプリを作った際に、アプリ起動時のローディングアニメーションをCSSベースで作成したら、素のCSSだと、ベンダープレフィックスの対応等で、同じような記述を何度も書く羽目になった。これでは非効率と、存在はしてはいたが、手を出さずにいたCSSメタ言語を扱い始めた。当初はNode.jsと親和性の高いLESSで書いたのだが、atom-shell-starterに付属するlessは版が古く、自分が調べた、方法が新しい書き方だったようで、コンパイルエラーとなってしまった。どうせ、CSSメタ言語周りをいじるなら、SASSもやってみようという事になり、atom-shell-starterにGruntのプラグインを追加して、SASSを扱えるようにしてみた。
Sass（SCSS）入門
本コーナーは、技術評論社発行の書籍『Ruby on Rails 4アプリケーションプログラミング』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。 『Ruby on Rails 4アプリケーションプログラミング』の詳細や購入は技術評論社のサイトや目次ページをご覧ください。 前々回～前回は、CoffeeScriptの基礎解説しました。今回は「Sass（SCSS）」の基礎を説明します。 ■ 9.4 Sass（SCSS） Sass（Syntactically Awesome StyleSheets） は、いわゆるCoffeeScriptのCSS版とも言うべき存在で、CSSのコードを生成するための言語です。CoffeeScriptと同じく、Sassのコードもまた、CSSにコンパイルされた上で送出されますので、クライアント環境に
Glitch Effect on Text / Images / SVG | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Lucas Bebber’s Glitch is a super cool effect. It’s like you’re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space. It’s bonafide CSS trick if there ev
SASS(SCSS)を始めたが、ネットのアニメーションの例がことごとく動かなかった #soleved - Qiita
背景 LESSはnode.jsで閉じてるのが利点だけど、atom-shell-starterでデフォルトで使えるLESSはバージョンが古かった。 そこで、Railsを業務で使うような世界の住人では今後もなそそうではあるけれどRubyは好きなので、SASSを試すことにした。 ところがだ！ atom-shell-starterにSASSを組み込むことは、あまり積極的に覚えるつもりがないGruntのしかもCoffee化されたモノを扱いに苦しみながら、なんとか、それっぽくlint系の方もいれたのに、 肝心のCSSアニメーションが動かない！ キーフレームの変数が展開されない！! 調べてみると、以下のように記述した。$nameが「spin」と展開されずに css上も$nameとなっていた。 @mixin keyframes($name) { @-webkit-keyframes $name { @co
keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…（´Д`） 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト
第6回 mixinを作る（初歩編） | gihyo.jp
Twitter Bootstrapからmixinの使い方を読み解く 前回まででLESSの主だった記法はすべて紹介しました。 今回からはLESSの真骨頂であるmixinの作成に入ります。 まずはおさらいとして、第2回のmixinのサンプルコードを見てみましょう。 // LESS .border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } #header { .border-radius(4px); } /* Compiled CSS */ #header { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } このように、CSS3
[JS] ブラウザの実装状況に合わせて、ベンダプレフィックスを使い分けてCSSを設定する - YoheiM .NET
こんにちは、@yoheiMuneです。 今日は、JSからDOM要素にCSSを設定する場合に、ブラウザのサポート状況に合わせて、いい感じにCSSを指定する方法をブログに書きたいと思います。 Special Thanks to http://flic.kr/p/kpTpJ6 １、UserAgentを利用して、ベンダープレフィックスを使い分ける まず1つ目の方法として、UserAgentから利用してベンダープレフィックスを使い分ける方法があります。 実装方法は、事前にUserAgentを調べてベンダープレフィックスを把握しておき、実際にCSSを設定する時にそれを使うという方法です。 例えば以、transitionを設定する場合には、以下のような実装となります。 // UAを元に必要なベンダープレフィックスを見分ける。 var venderPrefix = (/webkit/i).test(nav
![[JS] ブラウザの実装状況に合わせて、ベンダプレフィックスを使い分けてCSSを設定する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/fadc16bc24d759efaca5e389bcc68fa379ac9b26/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F313.jpg)
LESSを悪用してテキストに汎用ファイアエフェクトをかける - Qiita
愚者の反対を生きれば賢者になれる。ただし、誰が愚者であるかを判断できる場合において もうすぐ春がくる。少し暖かくなると、俺の心のどこかの部分が希望に浮き立つような気配があるのだけど、残念ながら俺はもう34歳で、新しい世界も恋の始まりからも無縁だ。だからこの時期は一層みじめになって、そんな無意味な期待感を電通の広告マンのように押しつけてくる自分の中の18歳をぶん殴りたくなる衝動にかられるわけだ。 若い人はそういうワーキングプア中年の悲哀や焦燥をもっとしっかりと知ってほしいと思う。でも知ったところで何もないし、「マジっすか」とか言うだけなんだろうけどな。それ言われると、おじさんはより惨めになるんだよ。悪かったよ、つまんねえ話して。 さて、CSSでファイアエフェクトっぽくするにはどうしたらいいか。 とか見ると、ファイアエフェクトのサンプルが見れる。見られる。例えば、 を第3の目で除いてみると、こ
CSSだけでおしゃれに歯車を回してみる。 - Qiita
こんな感じの歯車がくるくる回ってるアニメーションのをCSSと静止画だけで実現してみた。 完成品がこちら(モダンなブラウザじゃないと動かないかも)。 http://xiidec.appspot.com/gear.html しくみ 歯車画像を４枚用意する。 こんなの。 それを 左歯車 左歯車(半透明) 右歯車 右歯車(半透明) とならべる。半透明の歯車はちょっと下にズラす。 歯車を傾ける -webkit-transform: rotateX(60deg) rotateY(-10deg); これ。 このCSSで歯車が斜めになる。 X軸方向に60度、Y軸方向に−10度傾く。 こんな感じに。 歯車をまわす。 これが今回のキモ。 -webkit-animation: do_blue 3s; ３秒かけてdo_blueの変化をする、という意味。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Retina Display向け.5pxのborderまとめ - Qiita
http://www.webworkersclip.com/1448/
Sass mixins are not replacing variables
GitHub - sass/node-sass: :rainbow: Node.js bindings to libsass
GitHub - ahmednuaman/grunt-scss-lint: A Grunt task to lint your SCSS
GitHub - gruntjs/grunt-contrib-sass: Compile Sass to CSS.
Chaining keyframe attributes with less
スーパーこまち 超簡易ペーパークラフト #イクメン - jsdo.it - Share JavaScript, HTML5 and CSS