あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
Styling SVG <use> Content with CSS | Codrops
An in-depth article on how to style the contents of the SVG <use> element and overcome some challenges it brings. One of the most common use cases for SVG graphics is icon systems, and one of the most commonly-used SVG spriting techniques is one that uses the SVG <use> element to “instantiate” the icons anywhere they are needed in a document. Instantiating icons or any other SVG element or image u
知らないと損するSassの組み込み関数徹底解剖 | Yuhiisk
Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
Introducing Material Design Lite
getmdl.io -a library of components & templates in vanilla CSS, HTML and JS Back in 2014, Google published the material design specification with a goal to provide guidelines for good design and beautiful UI across all device form factors. Today we are releasing our effort to bring this to websites using vanilla CSS, HTML and JavaScript. We’re calling it Material Design Lite (MDL). MDL makes it eas
デザインの視覚調整 ― 人間の認知に適合するデザインのために | POSTD
理論対デザイナー 駆け出しのデザイナーの頃は、何が正しくて何が正しくないかということについて、PhotoshopやCSSを信じ切っていました。Photoshopで整列すればそろったことになるし、形の違う2つのオブジェクトが同サイズと言うならサイズは一緒。左右のオブジェクトが同じ16進数値を持っていれば同じ色に 見える 、とそんな具合です。 この考え方は理論的なように思えますが、作業の方法としては誤っています。 画像処理のソフトなどは合理的に計算することはできても、形や色やサイズに対する人間の知覚メカニズムを考慮に入れることはできません。つまり、全体の視覚言語的背景にある複数オブジェクトの配置といった 文脈 や、それらを人がどう視覚的に捉えるかということについて、ソフトは理解できないのです。 従って、対象が視覚的に正しく見えるように、人間の非合理的な感覚で調整をしてやる必要があります。コンピ
CSS3開発者ガイド 第2版
世界的ベストセラー書“The Book of CSS3”待望の邦訳。本書では難解なCSS3仕様を平易な言葉で解説し、一般に広く使われているモダンなブラウザとCSS3で何ができるかを明らかにしながら数年先を見越した最先端のWebデザインを追求します。良いデザインの原則に焦点を当て、実践的なサンプルを豊富に使って解説しているので、読者は無理なくCSSのスキルを向上できます。ウェブ開発の中でスタイルを設計しながらどんなデザインにしてやろうかと考える開発者は必読。気絶するほど美しいリッチなウェブを作れるようになります。うまく魅せないCSSなんてCSSじゃない！ 目次 賞賛の声 はじめに まえがき 1章 CSS3入門 1.1 CSS3とは何か（どのようにしてこうなったか） 1.1.1 CSS3の歴史 1.1.2 CSS3はモジュール形式である 1.1.3 CSS3は存在しない 1.2 モジュールの標
pixiv小説縦書き機能 開発の裏側 ～横のものを縦にする～ - pixiv inside [archive]
はじめましてこんにちは。pixivでアルバイトをしているhakatashiです。 さる6月10日、パソコン版pixiv小説にて縦書き表示機能がリリースされました。この開発のあらかたを担当したので、今回の縦書き機能開発における裏側を紹介いたします。 構想 縦書き機能開発にあたり、設計段階からその大部分を一任されました。小説機能開発において自分の中に絶えず理念として存在していたのは、ユーザーに最高の読書体験を提供することです。縦書きによって得られる利益を最大化し、快適な閲覧を支援するために、以下のような構想を置きました。 縦書き横書きの組版の差異における違和感を可能な限り軽減すること。 スクロールとページングを融合した、柔軟で快適な閲覧インターフェイスを提供すること。 この2点について詳しく解説します。 縦組版 まず、ウェブブラウザで縦書き表示を実現するにあたり、どのような手法をとるかという問
![pixiv小説縦書き機能 開発の裏側 ～横のものを縦にする～ - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8cb8c8e15c630ee29bd00c32234b431a93a2053d/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhakatashi%2F20150615%2F20150615155753.png)
David Bushell – Web Design & Front-end Development
David Bushell Web Design & Front-end Development I make websites I design and build websites with a focus on standards, performance, and accessibility. With a decade of professional experience — in-house and remote — I’ve delivered for everyone. Whether it’s PWAs, WordPress, or full-stack frameworks, I have the know-how to help. What my clients say Highly skilled, personable, helpful and dedicated
A Call For ::nth-everything | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! With CSS3, we have positional pseudo class selectors to help us select specific elements when there are no other distinguishing characteristics other than where it is in the DOM in relation to it’s siblings. :first-child :last-child :nth-child :nth-last-child :first-of-type :last-of-type :nt
Pure CSS3 typing animation with steps() • Lea Verou
steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of “frames” precisely. So I used it to create headers that have the well-known animated “typing effect”: As you can see, the number of characters is hardcoded in the steps() function, but that’s the only place. Everything else is totally flexible. Apar
iPad上のSafariで幅100%のVIDEOタグの高さを取得できない | 有限会社キートン KEYTON, Ltd.
ディスプレイの幅に合わせてレイアウトが変化するレスポンシブデザインのページに、幅が可変の動画を配置するため以下のCSSを指定しました。 video { width: 100%; max-width: 100%; height: auto; } モダンブラウザやAndroidのデフォルトブラウザでは、意図したとおりウィンドウサイズに合わせて動画のサイズが縮小されます。 しかし、iPadやiPhoneでは、動画のサイズが小さくなり、動画の左右に黒く塗りつぶしたボックスが表示されてしまいます。 仕様は確認できませんでしたが、iOSのSafariではVideoのデフォルトサイズが300×150に設定されているそうです。 VIDEO要素に高さが指定されていない場合や「auto」になっている場合は、このデフォルトの高さが使用され、小さく表示されるようです。 幅に合わせて、高さが変更されるブロックを作成
3D card flipping | CSS transitions, CSS transforms and CSS animation
Flipping a simple image to a div (transitions and 3d transforms) Plan Put an image on top of a div inside a container. Put that in another container with perspective defined. When hovering on the outside container, add a rotate around the Y axis to the inside container. Demo This is nice for exposing more information about an image. Any content can go here. Code First, the markup. <div id="f1_cont
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
kirupa.com - Shocked Resource for Making Designers better Developers!
Primer
Atelierbram Open Source Projects on Github
Red Team Design
utsutsunogare.com
Honoka - 日本語も美しく表示できるBootstrapテーマ
CSS Text Smoke Effect
Skew div border of one side only using one div only