[B! JavaScript][webdev][css] benzinaのブックマーク

benzina id:benzina

JavaScriptとwebdevとcssに関するbenzinaのブックマーク (7)

コピペで使える！マテリアルデザインなUIアニメーション | UX MILK
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。そして多くのGIFだけのサイ
benzina 2016/09/02
design

webdev

css

JavaScript
リンク
するするさせたい：サイボウズ採用情報のアニメーション（その2） - fragmentary
サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。今回はするするさせられないか、がんばってみる。その1 ― 何が起こっているのか調べるその2 ― 調べながら直しながらするするさせるその3 ― ちょっとしたことや他のブラウザでもするするさせるアニメーションを止めるまず、いまのjQueryベースなアニメーションを止める。コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って
benzina 2016/05/13
css

chrome

webdev

JavaScript
リンク
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。サイボウズ | 採用情報（新卒・キャリア）といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。その1 ― 何が起こっているのか調べるその2 ― 調べながら直しながらするするさせるその3 ― ちょっとしたことや他のブラウザでもするするさせるアニメーションの実装を調べるあとのことを考えて、Chrome DevToolsを使う。まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
benzina 2016/05/12
css

chrome

webdev

JavaScript
リンク
BackstopJSを使ったCSSのリファクタリング | フロントエンドBlog | ミツエーリンクス
皆さんはCSSをメンテナンスする際に、あるセレクターを削除したら思いもよらないページでレイアウトが崩れていたなどの経験がありませんでしょうか。サイトを運用していくに当たって、CSSのメンテナンスはサイトの構造を熟知していない人が触るとサイト全体のデザインが崩れる可能性があります。その理由として、以下が良く上げられると思います。セレクターが全てグローバル変数的な扱いになること悪い意味でスタイルがカスケードをしてしまうことスタイルを消すことを恐れてスタイルの詳細度を上げて上書きしていくこと最近、JavaScriptではJasmine、Mocha、QUnitなどテストツールが数多くありますが、CSSをテストするツールは多くはありません。その中で今回は上記の問題を解決するための手段としてサイトの見た目はそのままでCSSの構造を改善するためのリファクタリングツールをご紹介します。 Backs
benzina 2015/12/02
JavaScript

webdev

css

study
リンク
JavaScript/CSS 2015 Autumn
まるでドッグ・イヤーのごとく変化するフロントエンド開発に疲れていませんか？本セッションでは、BabelやPostCSSの導入の仕方や使い方を解説することによって、次世代の標準仕様であるEcmaScript 6やCSS 3を先取りし、長く使える技術を身につけます。流れの速さに惑わされないようにしましょう。 Koji Ishimoto @IWATE HTML5 COMMUNITY #3 on October 14 https://www.facebook.com/events/674956182641567/
benzina 2015/10/15
JavaScript

css

webdev

study

slide
リンク
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
benzina 2015/09/25
ios

design

css

JavaScript

webdev
リンク
CSSに死を！これはJSerの叫び！ #kbkz_tech
CSSの問題セレクター設計が辛い特に大規模化する場合、「CSSの問題」===「セレクターの問題」と言っていい（それ以外にもあるけど、大規模化するとほぼ確実にセレクターは問題になる）なぜ大規模化するとセレクターが辛くなるのか「隠蔽ができない」サイト全体で使用しているグローバル変数に対する定義を書いているようなもの
benzina 2015/02/17
css

JavaScript

webdev
リンク
1