CSS Regionsを使った新しい CSSレイアウトを作る方法CSS Regionsを使った新しいCSSレイアウトの可能性について、CSS Regionsの基本的な考え方と応用例を紹介します。 at HTML5 Conference 2013 (Nov 30, 2013)Read less
background-blend-mode プロパティで背景をブレンドしてみよう
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 プロパティとは？
Replace The Image In An <img> With CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Marcel Shields. Marcel was in a difficult place where he needed to change the image on a page but didn’t have access to the HTML. Rare, but I’m sure we’ve all be in weird situations like this. He explains how he managed to replace that image without needing t
素敵なposition: sticky
誰かがこのタイトルで書くだろうと思っていたけど誰も書かないのでセルフ実行。 Webkitにposition: stickyが実装されましたね。 というわけで試してみましょう。 現在、Chrome 23.0.1247.0以降（今はCanaryのみ）とWebkit Nightlyで見ることができます。 Sticky Positioning サンプルをダウンロード HTMLとCSS は次のようになっています。 <div class="container"> <div class="column-left"> <section> <h2>Lorem Ipsum</h2> <p> Lorem ipsum dolor sit amet... </p> </section> <section> <h2>Cupcake Ipsum</h2> <p> Cupcake ipsum dolor sit amet
Hyperspace
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-
Flexible BoxでGrowlみたいな通知UIを実装する - slowjet
↑の画像のみたいなGrowlぽい通知UIを作るときに、一筋縄ではいかなそうなところと言えば右上から下へ順に流れていってウィンドウに収まりきらなくなったら、列が変わって左へ流れていくようなレイアウトを作るところでしょうか。言葉が下手すぎたので図を見てください・・・ こういうやつ。 CSS力がめっきり減ってきてるので、確かこういうやつCSSで出来たと思うんやけどなーぐらいの感じだったんですけど、これこそFlexible Boxですね。 Flexibile Boxの詳細はわざわざ説明するのもアレなので以下の仕様書とかサイトを見て把握すればいいと思います。 CSS Flexible Box Layout Module CSS Flexbox Please! Using CSS flexible boxes HTML <div class="mod-notifications"> <div clas
Uniqlo Stripe Hovers | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It’s kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers as possible, they used an animated GIF to produce the effect. It
27 Fresh CSS3 Tutorials
Since the advent of CSS3, designing has become a lot easier and quick. This style sheet language had made designing a lot more fun too and is usually used in combination with JavaScript or jQuery. It allows you to create amazing designs in a hassle free way and efficiently. It is used for stylizing and controlling the layout of your web pages. The possibilities of what you can create using CSS3 ar
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
CSS Shaders はじめの 2歩目、custom() で何が行われるのか | Yomotsu net
GraphicalWeb Advent Calendar 2012 の 7日目の記事です。 この記事では、CSS Shaders、つまり CSS Filters の custom 関数を利用したとき、何が行われるのかを知ります。 なお、この記事以降に登場する CSS Shader は、2012年 12月現在、Chrome Canary でしか動作せず、かつ、CSS Shader の設定を有効にしておく必要があります。実際の demo を表示したい場合にはこの記事の末尾で解説する手順で Chrome Canary をインストールし、設定を有効にしておいてください。 CSS Shader を使うcustom 関数は、CSS Filters の他の関数と違い、その引数はすこし複雑です。この記事執筆段階の草案には次のように示されています。 custom(<vertex-shader> <fragm
最近のCSS実装でベンダー接頭辞の外れたもの 2012年11月
Firefox 16、Opera 12.10、そしてInternet Explorer 10がリリースされました（Windows 7のIE 10はまだですが）。 その中で、CSSのベンダー接頭辞が外れたものをまとめてみます。 CSS Gradientsliner-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()の4つ。 IE 10から。標準構文。IE 9以下はCSSグラデーションに対応していない。Firefox 16から。標準構文。-moz-付きのは古い構文扱い。Opera 12.10から。標準構文。-o-付きのは古い構文扱い。Chrome、Safari は-webkit-が必要。古い構文。CSS Transformstransform, transform-sty
iOS6でtransitionアニメーションが少し遅れて開始する問題
iOS6でtransitionアニメーションが少し遅れて開始する問題 よくあるスワイプギャラリーを作成しているとiOS6でアニメーションが少し遅れて開始する問題にぶつかりました。 どういった感じかというとスワイプ終了時に以下のようにしてtransitionを利用して規定位置までアニメーションさせようとすると一拍あいてから動き出す。iOS5だとちゃんと動作します。 $("#carouselInner") .css("-webkit-transition","-webkit-transform 600ms ease") .css("-webkit-transform","translate3d("+x+"px,0,0)"); 色々調べていると以下のページに行き当たりました。 iOS6 html hardware acceleration changes and how to fix them
Opera News
Opera requests that the EU General Court secure the DMA’s promise of free browser choice... July 12th, 2024 Opera is appealing the EU Commission’s decision not to designate Microsoft Edge as a gatekeeper, and requesting to keep freedom... AI, Gaming, Opera GX Aria gets Buffed in Opera GX July 1st, 2024 Aria gets buffed in Opera GX. New features are being added to improve Aria's capabilities. Deskt
tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect
A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6. download Download here or go to github. Released under GPL how to use Call the plugin on any collection of images you want by adding the following jQuery: jQuery(document).ready(function() { $('.tiltshift').tiltShift(); }); Parameters on eac
Unfolding 3D Thumbnails Concept
Click on the thumbnail toggle to see the effect. This is a concept, the slider is a dummy. Best viewed in WebKit browsers. CSS transforms are not supported in your browser CSS 3D transforms are not supported in your browser CSS transitions are not supported in your browser Sorry, only modern browsers. This demo shows a concept for toggling a thumbnail view for an image slider. The idea is to revea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
公海555000kk线路检测—首页（欢迎您）
http://brkcan.net/fun/macbook/
Transit - CSS transitions and transformations for jQuery
CSS でペライチ
Steps Animation