サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【Ninja】jQueryとCSS3アニメーションで作る何度もクリックしたくなる「ページトップ」ボタン / SQUEEZE - Web Design Studio -
前回の記事『Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個』にならって、jQueryとCSS3アニメーションを使って遊び心あふれる何度もクリックしたくなる「ページトップ」ボタン作成してみました。 Ninjaページトップボタンブックマークバーとスクロールアニメーションを活かしたページトップボタンにしてみました。サンプルページをご覧ください。 サンプルページ » 忍者登場はCSSスプライトアニメーションコマ送りでアニメーションさせるため、1枚のPNG画像に32px×32pxの絵を10個並べました。マウスオーバーした時に、X軸方向に-32pxずつ背景画像がずれることでアニメーションしているように見えます。 .ninja{ display:block; width:32px; height:32px; background:url(images/ninja.png) no-r
PNG画像でもコマ送りのアニメーションさせてしまう、ナイスアイデアのスタイルシート -Sprite sheet
デモページ 仕組みは、横に各コマを並べたPNG画像をCSSスプライトで順に表示させて、コマ送りのアニメーションのようにしています。 「show sprite」をチェックするとその仕組みがよくわかります。 「animation-duration」の数字を変更すると、アニメーションの速度が変わります。 デモページ：スプライトを表示 スタイルシートはコマ送りのステップを定義し、背景にしたPNG画像を少しずつずらして表示します。 デモは1秒間に10ステップ、500pxの画像を50pxずつ動かしています。 CSS div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
CSS3で追加されたセレクタ「:not()」について考えてみました
CSS3セレクタで追加された「:not()」。今まで使ったことがないので、深く考えたこともなかったですが、曖昧なままじゃダメだと思い勉強してみました。 CSSセレクタって何だという方はこれらの記事が役に立つと思います。 意外と知らない!?CSSセレクタ20個のおさらい｜Webpark 保存版！CSS3セレクタの説明書｜Webpark では、「:not()」について考えてみます。これから紹介する簡単なサンプルたちはWindows7のChromeで動作確認しています。他のブラウザの場合うまく対応していない場合も考えられますのでご注意ください。 「:not()」の基本 Selectors Level 3では、「E:not(s)」という風に説明されています。日本語で説明すると、「sでないセレクタを持つE要素」という感じになります。 また、「Negation pseudo-class」というグループ
Autoprefixer ― CSSのベンダー接頭辞をいろいろする - fragmentary
以前CSS-Tricksの記事で知ったAutoprefixerというの、ようやく試してみた。 ai/autoprefixer Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way | CSS-Tricks CSS-Tricksの記事読んだほうがいいと思うけど、月一のブログ更新ノルマのためここでも書いとく。 かしこい「ポスト」プロセッサ Autoprefixerはその名前からある程度想像できる通り、ベンダー接頭辞を自動的につけたりしてくれるユーティリティ。CSSファイルを作るのではなく、CSSファイルを処理するので、ポストプロセッサと言っている。 接頭辞まわりは、すでにCompassとかのライブラリでmixinなどが用意されてるので、べつに必要ないじゃんと思うかもしれない
Webアニメーションを高速化するために知っておくべき10のこと（前編）
Webアニメーションを高速化するために知っておくべき10のこと（前編） 斉藤 祐也（株式会社リッチメディア） アニメーション／トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション／トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション／トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
初めてSassとCompassを使った際に参考にした記事まとめ
しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。 順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。 Sassとは まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽になったりします。 Sassの公式サイトは以下から。 Sass – Syntactically Awesome Stylesheets Compassとは Sassを拡張して、便利な機能を追加してくれるものです。ベンダープレフィックスを自動でつけてくれたり、リセットCSSを呼び出してくれたり、CSSスプライトを使えたりします。 Compassのドキュメントは以下から確認できます。 Compass H
animo.js • Labs by Big Room Studios
animo.js A powerful little tool for managing CSS animations Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic. August 13th, 2013 by Daniel Raftery You can easily install animo via the GitHub repo or using bower's package manager. Using First and foremost, animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 be
Transitions for Off-Canvas Navigations | Codrops
Some inspiration for transition effects for off-canvas navigations. Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the side
css基礎 レスポンシブデザインについて | Stronghold Archive
はじめまして、こんにちは。新メンバーのLanともうします。まだまだ、デザイン・技術ともに未熟なのですが勉強・復習もかね書かせていただきますのでよろしくおねがいいたします！ 早速ですが、今回のtips題名の通り・・・ 今更感漂います【レスポンシブデザイン】についてです。 私も、結構前からその存在は知ってはいたのですが、なんとなーくしか理解していませんでしたので、復習という意味も込めて執筆させていただきたいと思います！！ レスポンシブデザインとは、１つのファイルでどんなデバイスにも対応できる手段のことをいいます。 初めは、リキッドデザインと似ていると思いますが、違いはこちらになります。 なお、レスポンシブデザインについて分かりましたので早速構築方法に移りたいと思います。構築方法は、主に３種類です。 ①CSS3のMedia queryを使う 以前のmedia queryについての記事はこちら ②
レスポンシブ化に便利！CSSで画像を文字に置き換える方法 | スターフィールド株式会社
PC専用に作られたサイトをレスポンシブ対応させる場合、 画像で作られた見出しをどうするかということが問題になってくることがあります。 具体的には、 のように見出しがHTMLで組まれていた場合、 レスポンシブ化するときに、次のような方法では問題が出てきます。 画像を画面の横幅に合わせて拡大縮小する →横幅が小さくなったとき、文字が小さすぎて見えなくなる <h2>をoverflow:hiddenにして、画像をそのまま表示する →デザインによっては見え方が崩れる（一部が隠れて見えなくなるため） →文字が一部隠れてしまって見えなくなる →高解像度のデバイスで見たときに、画像がぼやけて見える <h2>の中をテキストにして（例：<h2>Title</h2>）、CSSの背景画像で置き換え、text-indent:-9999pxでテキストを隠しておき、 横幅の小さなデバイスで見たときに、背景画像を非表示
Swatch Book with CSS3 and jQuery | Codrops
Today’s tutorial is about creating an animated swatch book using CSS rotation transforms and JavaScript. The idea is to show a swatch book like structure and make the single swatches or “sheets” clickable. When clicking on a swatch, we’ll rotate the other swatches in order to reveal the selected one. Please note: the result of this tutorial will only work as intended in browsers that support the r
Creative CSS Loading Animations | Codrops
In this tutorial we’ll show you how to make some creative css-only loading animations also known as activity indicators. Today, we are going to do a lot of stuff with CSS animations. Indeed, we will talk about CSS loading animations. What do you say? Ready? A few things before we start: You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files. The goal
Multi-Level Push Menu | Codrops
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, somethin
CSS3だけで作れる格好良いローディングアニメーション５つ！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、モモコです。 ゲリラ豪雨に備えて折り畳み傘を常にバッグに入れているせいか、何となく肩が重いです。 今回はCSS3だけで作れるローディングアニメーションを5つご紹介します！ 閲覧の際にはモダンブラウザ（最新のGoogleChromeなど）をご利用下さい。 FADE LOADING FADE LOADING 入力した文字がふわっと浮かび上がるローディングアニメーション。 質感と動きが合っていてがとてもエレガントです。 CSS3 loading animation experiment CSS3 loading animation experiment DIRT3というゲームのUIにインスピレーションを得て作成されたローディングアニメーション。 多彩な変化がついており、とてもクールなアニメーションになっています。 CSS only loading spinners CSS onl
Building a Circular Navigation with CSS Transforms | Codrops
A tutorial on how to create a circular navigation using CSS transforms. In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique. Like I mentioned, there’s going to be some b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodePen - CSS transforms
Milkable: Creative & Branding Agency
HTMLとCSSでカメラを書いたよ