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
3 Cool Techniques For Your Next Web Design Project
2017年3月27日 CSS, jQuery, Webサイト制作 Webデザインの勉強を始めたという方によく質問されるのが、「どうやって勉強すればいいですか？」。私はWeb制作の学校の学生だった頃から実践しているふたつの事があります。素敵だなって思えるWebサイトを見つけたら、どのように作られているのか自分なりに分析してみること。そしてそこで使われている技を実際に試してみること。そこで今日は最近見かけた素敵Webサイトと、そのサイトで使われていた技術を解説してみたいと思います！ ↑私が10年以上利用している会計ソフト！ 準備：分析＆実践に役立つツール Chrome、Safariなら付属のデベロッパーツール ChromeとSafariならブラウザーにはじめからデベロッパーツールなる開発のためのツールがついています。私が愛用しているのはこのツール。表示しているWebページのHTMLやCSSが確
Goodbye -9999px: A New CSS Image Replacement Technique — SitePoint
The -9999px image replacement technique has been popular for the best part of a decade. To replace a text element with an image, you use the following code: <h1>This Text is Replaced</h1> <style> h1 { background: url("myimage") 0 0 no-repeat; text-indent: -9999px; } </style> The element’s background is displayed and it’s text is moved off-screen so it doesn’t get in the way. Simple and effective.
画像置換に -9999px はつかわない
画像置換という言葉を知っているでしょうか？テキストを「text-indent:-9999px」と指定して、画面の外に飛ばしてしまい背景画像をその代わりに表示する技術です。 画像置換の歴史 画像置換は長いこと使われているCSSのテクニックに１つでしょう。では、このテクニック自体はどのようにして、生まれてきたのでしょうか？ 意外にも、このテクニックは元はC.Z.Robertson氏が1999年に考案し、それを「Todd Fahner」氏やTwitterのDouglas Bowman氏がチュートリアルで説明し、一般的に広めたものです。この時点ではテキストを非表示にするために「display:none」を利用しており、音声リーダーでは読み上げされないなどの問題がありました。 その後、このアクセシビリティ上の問題を解決するために「-9999px」というテクニックを生み出したのです。 現在の画像置換
Flexible multiline definition lists with 2 lines of CSS 2.1 • Lea Verou
If you’ve used definition lists (<dl>) you’re aware of the problem. By default, <dt>s and <dd>s have display:block. In order to turn them into what we want in most cases (each pair of term and definition on one line) we usually employ a number of different techniques: Using a different <dl> for each pair: Style dictating markup, which is bad Floats: Not flexible display: run-in; on the <dt>: Brows
デザインに使えるちょっとしたCSSのスニペットいろいろ
Webサイトのデザインには、画像が必須といってもいいと思うんですけど、画像を使わずにピュアな CSS でできるデザインにも、とても素敵なものがあったりします。これからはスマートフォンサイトを作ることも増えそう ...。回線の遅いスマートフォン向けのサイトでは、画像を使わないで CSS のみでデザインする ... っていう機会も増えそうですね。 8 になっても CSS3 が使えない IE ですが、CSS3 を使わなくても、工夫しだいでいろんなデザインエフェクトを表現できますよね！記事中 CSS3 を使ったスニペットもたくさんでてきますが、どれも簡単にできて、ちょっとデザインを素敵にする？コード集です。自分のブログなどでやっているものを中心に、少しまとめてみました。 ちょっとした CSS スニペット 目次 ボックスに使うCSSスニペット テキストに使うCSSスニペット 画像に使うCSSスニペッ
手軽にWebを彩るCSSコーディングテクニック50 - 海外デザイン事情第7回 - MdN Design Interactive
第7回「手軽にWebを彩るCSSコーディングテクニック50」 2010年03月15日 基本的なCSSを使ったWeb制作はそれほど難しくないが、より高いレベルのデザインを実現しようとすると、難易度はグッと上昇する。そんなときは、世界中のデザイナーやデベロッパーが提供しているCSSテクニックを使ってみるとよいだろう。ここでは、世界各国のデザイナーやデベロッパーが紹介している、ビジュアル表現やレイアウトなどを中心としたCSSのコーディングテクニックを紹介していこう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) http://www.smashingmagazine.com/2010/0
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
CSSサンプル集 vol.1 ::: Webデザインレシピ
WebデザインレシピのCSSサンプルのページです :D ヘッダーに入れるものがなくなってしまった w ど、ど、ど、どーしよー X( まぁメインのページじゃないからいいことにしよう ... CSSで気をつけたい事やつまづいたときのちょっとしたこと :: サンプル集 自分の意図したとおりのデザインを邪魔するのがCSSです w あれ？これってどうやってやるんだっけ？となかなか覚えきれないものをちょっとまとめてみました。 目次 ページを中央に配置する フロートで2カラムレイアウトを作る 画像に対してテキストを回り込みさせない リストを横並びにする 横並びブロック要素の余分なマージンを調整する 2行目以降をインデント（字下げ）してスッキリ！ リストの最初の余分なボーダーを消す 単語の途中で改行させない はみ出した英字のリンクを改行させたい！ フロートしている小要素をキチンと内包させる 縦のリストに画
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
CSS で記述の入れ子を可能にする「LESS」と、サヨナラCSSハック
LESS « The Dynamic Stylesheet language http://lesscss.org/ CSS を書いているとき、 コメントアウトに /* ～ */ じゃなくて // を使いたい 入れ子で書いたのを解釈して欲しい と思ったことがある人なら多分夢のようなライブラリだと思う。 使い方は簡単で、説明に書いている通り head タグ内に less.js を読み込むための定義と、LESS で記述したスタイルを読み込むための定義を追加するだけ。 <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> styles.less にいつも通りの CSS を書けば普通に解釈してくれるし、以下のような書
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 - builder by ZDNet Japan
スタイルシートでボックスの横幅や高さを指定すると、中身のコンテンツがボックスに収まらない場合がある。収まらないコンテンツをどのように表示するかは、overflowプロパティで指定することが可能だ。今回は、このoverflowプロパティを紹介したい。 また、overflowに関連したoverflow-xやoverflow-y、text-overflowプロパティも紹介する。これらはInternet Explorerが独自拡張したプロパティだったが、CSS 3での採用が進むとともに他のブラウザでもサポートされるようになっている。 overflowプロパティ overflowはボックス内に収まらないコンテンツの表示方法を指定するプロパティだ。CSS 2から定義されているプロパティで、主要なブラウザであるFirefox、Safari、Opera、Internet Explorerはすべて対応してい
CSS Optimization Tips - Optimizing Style Sheets - CSS Optimization Tutorial
Does your style sheet ever feel bloated and overweight? If you notice some love handles growing on your style sheets, it may be time to stop and give it a good make over. Learn the following steps and your style sheet will be in shape in no time. Step #1 - Learn How to Group Selectors What is a Selector? For those who are not familiar with the term “selector” you can refer to this quick overview
IE6のmin-width、min-heightハックに関して - Webtech Walker
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 という記事を見かけたんですが、min-widthってこれじゃダメな気がするんです・・・ IE6では min-height や min-width が効かないため、それを効かせるためにはいろいろなハックやブラウザごとのスタイルシートが必要だった。 しかし以下のようにすればIE6にも対応したものが実現できる。 min-widthのソースは以下のとおり .bar { min-width: 100px; width: auto !important; width: 100px; } min-widthはIE6で実装されていないので、無視されます。そして、同一ブロック内では!importantが無視されるというIE6のバグを利用して「width:100px」を
CSS（スタイルシート）でフッターをフェードアウトさせる
使えるかどうか分からないけどスタイルシートと画像1つでフッターをフェードアウトさせる方法があったので紹介します。 方法は簡単。以下のコードをどこでもいいので入れるだけ。 <div id="bottom_fade"></div> CSSはこんな感じ。ちょっと変えてます。 #bottom_fade { width: 100%; height: 200px; z-index: 99; position: fixed; bottom: 0px; background: url("bottom-fade.png") bottom center repeat-x; } widthは100%に背景の繰り返しをrepeat-xにしています。底から0pxのところに常に高さ200pxの画像があるということですね。 また、透過画像が使えないIE6用に以下のようにCSSを記述しています。 <!--[if lte
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わずか四文字でIE6/7/8を区別するCSSハック | コリス
Quick Tip: Multiple Borders with Simple CSS
