【CSS】clip使ってみた & アニメーションサンプル作ってみた | バシャログ。
GWはこもります。さがさないでくださいhakoishiです。 さて、本日はCSSのclipプロパティで実験してみたまとめ。画像をトリミングするやつですね。 どこまでできるか、アニメーションバナーっぽいものも作ってみました。 使い方 切り抜きたい画像に対し、position:absolute;を指定した上、各辺までの距離を指定します。 marginなどとは右辺、下辺までの距離の取り方が違うので、注意したいところです。 また、IE7以下にも対応させる場合は、各値の区切りはカンマではなくスペースで。（各ブラウザもこの記述に対応しています。） アニメーションなし サンプル html <div class="sample-clip"> <a href="#"> <img src="img/img01.jpg" alt="" width="500" height="330"> <dl> <dt>タイト
Pure CSS Parallax Websites
This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website. If you find this article useful and want to explore CSS Parallax further, you may find my follow-up article "Practical CSS Parallax" an interesting read. Parallax is almost always handled with JavaScript and, more often than not, it’s implemented badly with th
FN1404001 | CSS3: 3次元空間に立方体をつくって回す ー transformプロパティ | HTML5 : テクニカルノート
CSS3のtransformプロパティは、要素に回転・伸縮・傾斜・移動などの座標変換を加えます。さらに、transform-styleプロパティも合わせて用いれば、要素が3次元空間で変換できます。記事「Creating an animated 3D CSS cube using 3D transforms」のサンプルを参考に、CSSで3次元空間に立方体をつくって回してみます(サンプル001)。 サンプル001■CSSで3次元空間に立方体をつくって回す 01 3次元空間の座標変換で使うCSSプロパティ CSSのtransformプロパティは、要素に座標変換を加えます。具体的には、要素の回転や伸縮、傾斜、平行移動がプロパティで定められます。transformプロパティの値には、変換関数を与えます。次表001に掲げたのは、2次元平面の座標変換を行う関数です[*1]。 表001■transform
CSS3でアニメーション【vol.5】- ちょっと複雑なアニメーションを作ってみる。 | Stronghold Archive
どうもこんにちは。Toshikuraです。今回のtipsは【CSS3でアニメーション【vol.5】- ちょっと複雑なアニメーションを作ってみる。】です。全5回に分けてステップアップ式に記事化している最終回です。これまでの全4回の記事を統合してすこ複雑なアニメーションを作ってみます。 【vol.1】- とりあえずはじめの一歩。 【vol.2】- ホバーでアニメーション実行 & 複数アニメーションの組み合わせ方法 【vol.3】- イージングを生成してくれる便利なジェネレーター 【vol.4】- クリックでアニメーションを実行させる方法（複数同時実行例含む） 【vol.5】- ちょっと複雑なアニメーションを作ってみる。 【vol.6】- CSS3アニメーションで動作するjQueryスライダーを作ってみる 【vol.7】- jQueryでCSS3アニメーションの終了のタイミングを取得する方法 ア
HTML5 × CSS3 × jQueryを真面目に勉強 – #18.1 画像ファイルからカラーパレットを作ってみる (後編) | DevelopersIO
HTML5 × CSS3 × jQueryを真面目に勉強 – #18.1 画像ファイルからカラーパレットを作ってみる (後編) 前回の記事にて Canvas 上に画像データを表示したり、ピクセル単位で色情報を取得するなどといった操作の基本を学びました。これらの知識を踏まえて、画像ファイルから特定の色を抽出してカラーパレットを生成する処理を JavaScript でやってみるとします。結構難易度は高めですが(※オレ調べ)、なるべく丁寧に解説していきたいと思います。 はじめに - カラーパレット まずはカラーパレットの要件を大まかに書き出してみます。 画像ファイルを読み込み、その画像を構成している色から平均的な色情報を抽出 カラーパレットの色数制限はなし まだまだ試行錯誤の段階ということで、要件はこの程度に留めておきます。次にどういった処理の流れで実現するかを書き出してみます。 画像ファイルを
レスポンシブ化に便利！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
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
Circle Hover Effects with CSS Transitions | Codrops
A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which
CSS 3のボックスレイアウトでコンテンツを画面の中央に配置する - builder by ZDNet Japan
DNSを守り、DNSで守る 高度・巧妙化し危険度を増すサイバーリスク いま考えるべきモダンセキュリティのあり方 仮想環境データ保護の新次元 高度化・複雑化するIT環境の課題への解決策 最新鋭データ保護・管理ソフトウェア基盤 勝つためのクラウド活用術 New Value on Azure ビジネスを次のステージへ！ サステナビリティの今と未来 企業戦略としてのサスティナビリティ推進 世界の通信インフラを支えるコルトの取組み 今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 すぐに実践できる仕事効率アップ術 驚きの効果をもたらす外付けディスプレイ なんと最大50％の業務効率アップも！ 最新ストレージで変わるIT運用 仮想化テクノロジーとFlashArrayの組合せで 運用負荷軽減と高性能化を実現したDMM Kubernetes活用の
Understanding Border-image | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article, I explain how the border-image shorthand property works in today’s browsers.
[CSS]グラフィカルで美しい3Dの棒グラフを実装するスタイルシート
画像を使用しないで、3Dの棒グラフをスタイルシートで実装するチュートリアルをmarco folioから紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのAからZを学べる映像チュートリアル『A to Z CSS』 | 100SHIKI