JavaScriptで制御しているCSS3のtransitionを途中で中断させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアチームのづやです。 CSS3のtransition便利ですよね。 JavaScriptから制御してると、jQueryでanimateをstopさせるときみたいに途中で動きを止めたいことがありました。そんな時どうすればいいかわからなかったので、調べてみました。 JavaScriptから制御しているCSS3のtransitionを途中で中断させる方法 動かしてるstyleを上書きしてしまう これが一番ベターっぽい。中断したいタイミングで対象となってるstyleを上書きすると止まってくれるようでした。 <!-- こんな要素があって --> <input type="button" name="start" id="start" value="開始"><br> <input type="button" name="stop" id="stop" value="停止"><br>
Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
横に水平線のあるテキスト
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
IE8で nth-child を使う│WEB│グラビカ学習帳～ホームページ制作会社 gravity works（グラビティ・ワークス）の備忘録と知識の共有と蓄積
first-childは、IE8でもきくのですが、 nth-child(n)はきかないのですよねー。 これが使えたらすごく便利なのに。 ということで調べてみました。 いろいろ適応させる方法はあるようなのですが、使いたい部分がサイトの共通部分で その案件が、大きめの案件で既に納品しているページもあったので ヘッターの記述に新たに何か追加したくなかったことと、 はずかしながら、自分はjsの理解度が低いので、CSS内で解決という条件で探しました。 下記ページのハックが簡単でわかりやすかったです。 CSS: Internet Explorer 7-8 nth-child hack これを ------------ .test ul li:nth-child(3){ background: yellow; } ------------ こう書く ------------ .test ul > *:f
フルードイメージの導入とタイポグラフィの設定 (2/3)
画像の次はタイポグラフィ（文字周り）のスタイルを設定しましょう。最初に、html文書全体のfont-size、font-family、line-heightを記述します。「枝豆隊」では、font-size は16px、font-familyはverdana, sans-serifに指定します。ただし、ブラウザーのフォントサイズはデフォルトで16pxですので実際にはfont-sizeは記述しません。日本語のテキストでは、一般的にフォントサイズの1.5倍がもっとも読みやすい行の高さとされていますので、line-heightプロパティの値には1.5を指定します。 まとめると、以下のようになります。 html { font-family : verdana, sans-serif; line-height : 1.5} このCSSを適用すると、html要素のタイポグラフィ設定は図のような状態になり
Webフォントの非同期読み込み - Weblog - Hail2u.net
Webフォントの読み込みは@importだと色々まずいので、主にlink要素を使って並列に読み込むわけだけど、これもまた貴重なHTTPリクエスト数を消費するとか、CSSのパース完了が少し遅れるなどあって、完璧な解というわけじゃない。それを非同期にWebフォント定義の含まれるCSSファイルを読み込むようにして、Webフォントのロードをページのレンダリングと並行して行わせるのはどうか、という試み。 非同期化することによりWebフォント定義の含まれるCSSファイルのリクエストとパースが、ページのレンダリングと並行して行われるようになる。head要素内でlink要素を直接書いた場合は、Webフォント定義の含まれるCSSのリクエストとパース後にページのレンダリングが始まることが多いので、体感速度(ページのレンダリングの開始までの所要時間)は向上する可能性が高い。 動的なlink要素の追加 いわゆるソ
webcreatornote.com - webcreatornote リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
とあるソシャゲのHTML/CSS設計話
【Frontendアドベントカレンダー19日目】 Xboxに釣られて転職してから２年半…あっという間だった…。 関与したもの： スマホ版ピグ（リニューアルして面影無し） ピグファンタジア（11月末クローズ） 新規ゲーム ←今ここ 今は新規ゲームでコーディングの人としてjoinしてます。 新しいサービスを立ち上げる時に必要なHTMLとCSSの土台作りを全部やるということが、 「HTML/CSS設計」という言葉で装飾されることを知ったのは割と最近です。 マークアップだけで一人据えるのは珍しいと思うので、今やってることなど含めてつらつら書きます。 ここが変だよソシャゲ開発 依頼を受けてサイトを作る場合は次のようなフローだと思います： クライアントと打ち合わせ 仕様が決まる デザイン決まる 値切られる 価格が……決ま…る コーディング クライアントチェック 突然の無理難題に戦慄走る テスト・修正
Gruntプラグイン: selector4096
IE9以下で4096個以上のセレクターがあるとスタイルが反映されなくなるバグのチェックを行うGruntプラグイン、selector4096を作った。CSSプリプロセッサーでネストしつつ@extendするとぽんぽんセレクター増えていくので、最近はまめにチェックするようにしている。自己最多記録は3400くらいで、バグに引っかかったことはまだない。 npmで普通にインストールした後、Gruntfile.jsに以下のように書いて準備完了。 grunt.initConfig({ selector4096: { all: ['src/css/**/*.css'] } }); grunt.loadNpmTasks('grunt-selector4096'); 読み取り専用タスクなので、destとかは必要ない。 $ grunt selector4096:all 実行すると、src/css/以下のすべてのC
Perspective Page View Navigation | Codrops
Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects. Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
これだけは抑えておきたい！ jQuery や CSS の「イージング」の基礎知識
この"easeInQuad"にあたる部分が、イージングです！ イージングを設定することで、動きに、勢いや波をつけることができます。 イージングを設定して、ボールを左右に動かしたものがこちら！ ちなみに、イージングがないとこんな感じです。 イージングを使いこなそう！ イージングは結構、種類が多いです。 例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています！ でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか？ 今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、 それぞれのイージングの特徴と、使いどころを紹介します！ ちょっと、注意事項 CSSや、jQueryでのアニメーションのやり方 今回はアニメーションのやり方そのものについては、説明を省き、イージングの話を中心に書きます。
Line Menu Icon... That Is A Menu | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I had a dumb little idea the other night so I just coded it up (as you do). You know those little icons that have come represent navigation? We’ve called them Three Line Menu icons around here, but otherwise known as Navicon (clever) or Hamburger (dumb). The point of that icon is that it loo
[CSS]実装のアイデアが面白い！枠線から背景をずらして配置するスタイルシート
枠線から背景をずらして、ゆる〜い感じにデザインされたスタイルシートを紹介します。 HTMLはbutton要素一つで実装されており、二つの要素をマイナスマージンで強引に重ねるとかの荒技ではないです。 デモページ 実装は、こんな感じです。 HTML button要素一つで実装します。divなど他の要素に変更してもOKです。 色の違いはclass指定で。 <button class="yellow"> View More </button> <button class="blue"> View More </button> CSS 枠線は通常通りbutton要素にスタイルし、ずらした背景は疑似要素の:afterを使います。 ちょっとだけ傾けるのがポイントです。 body {width:70%;text-align:center;margin:40px auto;} button { positi
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
grunt-spritesmith を使って LESS でもスプライト画像を自動生成する - メモ用紙
多数の小さな画像を 1 枚の画像の上に並べ、CSS で切り分けることにより、サーバへの問い合わせの回数を減らして Web ページの表示を高速化する CSS スプライトと呼ばれる手法がある。これまで Sass + Compass ではできていたが、Grunt をはじめとする自動化ツールが充実してきたおかげで LESS でも可能になった。 あらかじめ Grunt と grunt-spritesmith をインストールし設定しておく。方法は先日の記事を参照。 Grunt を使って LESS のコンパイル環境を作る grunt-spritesmith を Mac (OS X Mavericks) にインストールする grunt-spritesmith を Windows にインストールする Gruntfile.js を書く 通常と同じように loadNpmTasks() でタスクを読み込み、 in
right: 100%か負のマージンか
これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージンを使って親要素の外側左にレイアウトする手法はそのまま使い続けることになるだろう。 ほとんど同じレイアウトを実現するright: 100%と負のマージンの使い分けを通して、レイアウト方法の選択をどう行うべきかという基本的な思想を解説することにより、今後増えてくるレイアウトの選択肢にどう相対すべきかがわかるのではないかと思う。そしてそれはCSSプロパティーの意図された使い方を理解するということでもある
実践 めんどうくさくない BEM - ダーシマ・ヱンヂニヤリング
この記事は BEM Advent Calendar 2013 の１２日めの記事です。 BEM は優れた方法論だと思うが、大変めんどうくさいことを強いてくることがある。この記事ではそんなめんどうくさい BEM を、少しでもめんどうくさくない BEM に変えられるかどうかを思索するものである。なお、めんどうくさくなくする過程で「それは既に BEM ではな」くなっている面もあると思うが、そこは承知の上なので念頭に置かれたし。 CSS セレクターにタグを書くのは本当にダメなのか 例えば以下のコードがある。 <section class="item-list"> <h1>アイテム一覧</h1> <ul> <li> ... </li> <li> ... </li> <li> ... </li> </ul> </section> 上記のコードはシンプルなので、各要素にスタイルを当てるとしたらこのような
all, initial, unsetでCSSのリセットと継承回避をする - fragmentary
追記（2018年4月13日）：紹介した機能の実装が進みました（Can I use：allプロパティ、initial、unset）。 一方で文中で取り上げたScoped Stylesheetsは仕様から削除されてしまいました。 このエントリはCSS Property Advent Calendar 2013の10日目のものです。 すみませんすみません日付勘違いしてました。ほんと申し訳ありません…… 今回はradial-gradient()のMixin…は作りません。プロパティじゃないしね。ふつうのプロパティと値についてご紹介しようかと。 CSS Cascading & Inheritanceのall, initial, unset Firefox 27あたりからallプロパティとunset値なんてものが実装されました。CSSのCascading and Inheritanceモジュールで定義
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
真面目なアニメーション (html5j 2013, Web Animations)
