This post is the first topic I discussed in my jam session presentation at Fronteers 2012. It’s about the drop-shadow filter. You may have looked at it and thought “this is pretty much the same thing as a box-shadow” right? Well, not exactly. The big advantage of the drop-shadow filter is that it acknowledges the outline and transparency of an element. Have you ever wanted a box-shadow that follow
Joshua Hibbert氏の記事、Don't Forget the CSS Value 'inherit' - Joshua Hibbertでは忘れられがちなinheritによる値の継承について説明している。 inheritを使えば親要素のスタイルの継承ができるが、これは要素とその擬似要素の関係においても、擬似要素が継承させることができる。 で、この記事における本題としては、Bonus transition trickとして紹介されている、inheritを使えば、擬似要素でもCSSアニメーションが有効になるという話のこと。 擬似要素では"基本的に"アニメーションが無効となる Hibbert氏の記事にあるbasic sampleを見てもらうとわかるのだが、右側（赤い方）では擬似要素に大しては継承を使っておらず、そのためアニメーションになっていない。大して一方では擬似要素もアニメーションを
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
人は途中出て行っまし。かっこうは二あるセロのようがしてもらっな。表情はセロボロンボロンたりおれを云いてっだ。 いちどはねずみからいきなりになるからろへあたりのようが云いで頭が行ってどんとかっこうが明けているた。 じっともうゴーシュがドレミファをたべましん。何ぴたりに窓をあけよてかっこうがしましな。キャベジに考えますまし。 CSS #scroll-all-2 .scroll-box{ overflow-y: auto; } #scroll-all-2 .scroll-box::-webkit-scrollbar{ width: 5px; background: #9aadfc; } #scroll-all-2 .scroll-box::-webkit-scrollbar-thumb{ background: #435295; border-radius: 2px; }
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Version 1.4. Made by Mike Plate @mikeplate Source code on GitHub User interface made with Dojo Reference of CSS3 capabilites from Where can I use and QuirksMode Icons from Farm-Fresh Web Icons Font stacks selected from A Way Back Clipboard copying with Zero Clipboard No copyright. Use everything in any way you like. Use this web application to experiment and learn about new css3 capabilities. The
textShadowForIE9、スクリーンリーダーなどアクセシビリティ面への配慮を加えた新版に書き直して再度公開です。 テストケース 以前に公開していたtextShadowForMSIEなどを利用している方はこの新版に差し替えていただけますよう強くお願い申し上げる次第です。 使用方法 CSSファイルからtext-shadowの値を自動的に読み込んで適用させていますので基本的に以下の設定をするだけでOKです。 また、手動で個別指定できるようにもしています。（後述） ソースをコピーしてJavaScriptファイル（textshadow.jsなど）を作成し、HTMLから外部JavaScriptとして読み込む。 または、既存のJavaScriptファイルにソースをコピペして追加。 以前のスクリプトからの主な変更点 スクリーンリーダーでダブって読み上げられないよう、影にはWAI-ARIAのaria
counter-incrementプロパティは、Q&Aやサイトマップ、よくある質問などを記載する時に、テキストの先頭に数字を連番で割り振りたい場合などに利用できます。単なる連番であれば、ulタグやolタグで実現可能ですが、「第1章」や「Q1.」などのように数字と文字を合わせて挿入することは出来ません。そういった際にcontentプロパティを使用します。 カウンタの制御は、counter()、またはcounters()の形式で、()内に「カウンタ名やスタイル（list-style-type）、区切り文字をcontentプロパティに指定します。通常のカウンタはcounter()を用いて、同じカウンタ名のリストがネストされた入れ子構造のリスト等の場合には、counters()で一括指定が可能です。
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！ アメーバゲーム部門でディベロッパーをしております、なるげと申します。 現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。 ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。 今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。 ガールフレンド（仮）とは 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲー
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. And, for the designers, we offer a free PSD Download. It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps. Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome. Download (Version 2.0.4) MIT Licensed - Version 2.0.4 Learn more Designed for e
CSS3で追加したプロパティ「box-sizing」が結構便利です。皆さんブログで良さを紹介していますが、私なりに具体例を入れつつ解説してみますので、これを読んで「box-sizing」への理解が深まれば嬉しいです。 以前「初めてスマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark」という記事を書いたときに、スマホ用サイトを作るときにbox-sizingが便利という内容を書きましたが、スマホ用だけでなくレスポンシブなサイトにも便利です。 box-sizingとは box-sizingの値には「content-box」「border-box」「inherit」があります。content-boxは初期値で、要素の大きさを、width、padding、borderで計算されます。 今回便利というのborder-boxを使った場合です。border-boxを指定すると、要素
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
Classes The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Install Get started... $ git clone https://github.com/elrumordelaluz/csshake.git or $ bower install csshake or $ npm
クソッ！ IEのクソッ！！ 失礼しました。 最近、Wordpressのテーマを作りました。 でもIEを考えてなかったので一応確認したら案の定レイアウトは崩れてます。 面倒くさいし、ブスだからインターネットエクスプローラーは無視しようと思ってたんですが、チラチラ|ω・｀)（←IE）こっちを見やがるから、 いやいやだけど対応させてみました。 ということで今回は、html5とcss3で作ったレスポンシブサイトを、 ブラウザ界のブスことInternetExplorerにも対応させてみようって話。 手を煩わせるんじゃないよ。まったく。 あんたかわいくないんだよ！ で、世間の方々を参考にしようと検索するとたくさん出て来ました。 [browser-shot width=”200″ url=”http://www.arch-web.jp/archives/771/” target=”_blank”] IE
cssで破線を使おうと思ったらdottedとdashedの2種類しか用意されていないので、それ以外の間隔の破線を使用したい場合にはあらかじめ白黒のgif画像を用意して、背景に繰り返して使用する事が多いです。 しかしCSS3のlinear-gradientを使用すれば任意の間隔の破線を描画する事が可能です。 CSS3を使用するので対応ブラウザがちょっと狭くなりますが 1 2 、画像を用意するのとくらべて線分や間隔の調整も容易になりますし、Retinaディスプレイにも対応する事を考えたら（奇数の破線を使用する場合など）2種類の画像を用意する手間が省けますのでCSSで描画する方が楽チンです。 手順やり方は下記の4つの指定をすれば良いだけです。 破線の部分はbackground-imageを使用して背景画像として描画します縞模様はlinear-gradientを使用してグラデーションの濃淡で表現し
1) Click the timeline to add a new keyframe 2) Click the circle button to build your animation's css 3) Click the x button to delete the active keyframe Properties Base Style width: 250px; height: 250px; position: absolute; background-color: rgba(255,34,5,0.8); top: 50%; left: 50%; margin-top: -125px; margin-left: -125px; border-radius: 250px; Name Duration Timing Function Delay Iteration Count Di
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
