目標必達のために鬼努力を惜しまない個人事業主。フリーライターとWeb制作のお仕事をしています。IT・セキュリティ・Web制作・金融・障害福祉など、専門性を活かして様々な分野で仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。所有資格：情報セキュリティスペシャリスト、応用情報技術者、FP2級、AFP、ウェブ解析士、SEO検定1級 など。
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. I learned something the other day when we were fleshing out the background properties in the Almanac. It’s such an intuitive thing, that I guess I just never stopped to think about it before. By default, background-position is 0 0, the top left corner. Now imagine you set it to 50% 0. That backgrou
Patternbolt is a fine selection of SVG pattern backgrounds, packed in a single or SCSS (or CSS) file. The pattern is added in the ::after element and your original DOM's element still be inalterate and ready for manipulations. As .svg they weigh much less than .png or .jpg and they are also really easy to manipulate by CSS rules. As they are vectors they never pixelate, not even on a 4k display. T
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
JavaScriptで背景画像を動かすだけで怒られる。CSSでやればJavaScriptを無効にされても動かせるので、もっと怒られるのかもしれない。いちいちCSSアニメーションを書くのは面倒なので、transitionプロパティーを使ってインスタントに動かせるような工夫を考えた。 Demo: Animated Background ループできないtransitonプロパティーで擬似的に永続アニメーションを提供するには、transition-durationプロパティーで大きな値を指定すれば良い。またアニメーションの開始に必要になるトリガーは主に擬似クラスを利用することになるが、body要素に:hover擬似クラスを直接使うとアニメーションをうまく起こせない問題があり、:target擬似クラスではIDの指定とURLが限定される問題がある。ルートのhtml要素に:hoverを指定することで、こ
CSS Property Advent Calendar 2013、6日目の記事です。「CSS のプロパティに関することだったら何でも OK です」 とのことでしたが、広く使われているプロパティについて今さら書いても仕方ないし、多分他の人とかぶるしってことで、最近になってブラウザが対応したあまり一般的じゃないプロパティを選択してみました。 それが今回取り上げる、background-blend-mode プロパティです。 Compositing and Blending Level 1 W3C Last Call Working Draft 10 October 2013 3.4.3. The 'background-blend-mode' property ： Compositing and Blending Level 1 background-blend-mode プロパティとは？
While minimal flat style designs are the current hot trend, some designers are eliminating solid blocks of color from their designs with the use of subtle textures. The use of grainy textures really helps give a design a tactile appearance and fits perfectly with designs using an old school or retro style. This post showcases some great websites which are perfect examples of grain texture use. The
In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through basic CSS3/CSS2 techniques, or by using some open source third-party jQuery plugins. There are no right or wrong answers, just varying levels of support in older legacy browsers. Dig through this collection of riveting development techniques and see what you
This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportio
What is Patternify? Patternify is a simple pattern generator. I built it to save myself the pain of launching Photoshop just to export a 2px by 2px stripe pattern. Not only can you build your pattern online, but with the base64 code, you don't even need an image file anymore: just include the code in your CSS and you're ready to go! Instructions Draw your pattern on the grid. You can use the curso
We build tailored data systems for firms that depend on accuracy and speed. From finding new legal cases to extracting and analyzing custom financial data, every solution is designed to get you the best results. We write programs to acquire, sort, and filter large amounts of data. Our programs, refered to as “crawlers” or “spiders” get your information quickly, accurately, and effectively. This pr
Atlanta based web design firm specializing in providing fast loading, interactive websites with content-driven design.Instructions In addition to your regular CSS ':hover' style, a class of 'hover' must be added for targeted elements. This is required because there is no way for JavaScript to detect the CSS ':hover' styles, which are essential to this plugin. Normal CSS :hover style: #navHome:hov
We build tailored data systems for firms that depend on accuracy and speed. From finding new legal cases to extracting and analyzing custom financial data, every solution is designed to get you the best results. We write programs to acquire, sort, and filter large amounts of data. Our programs, refered to as “crawlers” or “spiders” get your information quickly, accurately, and effectively. This pr
CSS playのエントリー「A flyout menu over flash objects」から、Flashを背景にして動作する、階層型ナビゲーションの紹介です。 A flyout menu over flash objects 通常、Flashを背景とするとうまく動作しませんが、下記の手法を使用して実装しています。 swfの埋めこみの記述 「wmode」に、「transparent」を指定。 ※swfファイルの背景色を確認する。 <textarea name="code" class="html" cols="60" rows="5"> <param name="wmode" value="transparent" /> <embed wmode="transparent"></embed> </textarea>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
