自由な形に画像の切り抜きができるSVGのclip-path polygonを CSSで行う | 9ineBB
CSSで画像の切り抜きをする SVG の ClipPath で polygon というものがあり 3点以上の座標をX点とY点で指定することで、その領域を切り抜くことが出来ます 画像編集ソフトでクリッピングするようなものです これを CSS で行うことが出来ます img要素やdiv要素に適応出来て画像をそのまま切り抜きが出来ます 使うのは clip-path: polygon(); polygon() のなかに座標を入れていきます 座標はpxで指定 -webkit-clip-path: polygon(103px 17px,235px 81px,214px 287px,28px 246px,26px 63px); 座標は％での指定でも可能です それぞれの座標は XとYはスペースで区切り カンマで一つの座標を区切ります DEMO (Chrome、operaでのみ動作確認してます) clip-p
MediumのCSSはこの上なく最高！ | POSTD
自分は常に最高であれって思っている。最高の香りを身にまとい、最高の振る舞いをする。ごみ1つ捨てるのだって、ほかの誰よりイカしてなきゃ。 ―Lil Wayne ずっと長いこと恥も外聞も知らずに、MediumでCSSについて執筆しようと思っていました…。 それからどうなったって？ 違うことをやっていた？ 何てこと、どうやったら同じことができるかって？ やり方を教わりたいって？ これから書くことは私たちのCSSについての覚書で、これまでに歩んできた道のりと現在のCSSについて述べています。 始まり（これまでの道のり） だいたい2年ほど前、私はソフトウェアアプリケーション開発と（皆さんが読んでくれているといいのですが） medium.com に取り組むためにObvious Corp.に加わりました。 その時、Mediumは、すでに一連の”スタイル更新”を行っていました（ スタイル更新とは デザイナ
リガチャー(合字)を使うとき必要なCSSプロパティーの解説
どちらかというとこっちが本題だったんですが、文章が長くなる感じだったんで分けてみました。リガチャーアイコンフォントを使うにはまずはWebフォントの指定を知ってから、という感じですね！というわけでWebフォントのCSS指定について知りたい人はWebフォントのCSS指定2014年度版とこれまでの歩みを読んでみてください。 リガチャーアイコンフォントの実例 もともと私がリガチャーアイコンフォントというものを知ったのは@fladdictさんのアイコンを合字Webフォントとして扱うSymbolSetが革新的にステキ | fladdictという記事でした。ここで紹介されたSymbolsetを知ったときはかなりの衝撃を受けました。 そして@kudakurageさんが制作したLigature Symbolsなどの登場もあり、アイコンフォントには実装の多様性が生まれたように思います。 以下はデモです。 Se
[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。
![[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68594e0182d8d63cfb96eda05e4f18be75583c9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091401-04.gif)
The Web Platform: Browser technologies
Include single-engine specifications • To re-sort, click on any heading. SpecificationRepoDocsTestsEnginesCategory
AMCSS - Attribute Modules for CSS
Attribute Modules (AM) is a technique for using HTML attributes and their values rather than classes for styling elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable and maintainable HTML & CSS. It's not a framework or a library, it's a style that better describes the components you're building. For an intro
srcsetとsizes
パート1：メディア・クエリのどこがまずいのか？ そう、もし君がウェブサイトを作っている時代が1993年2月23日から2010年5月25日の間だったら、画像の扱いなんてチョロかったね！ それはこんなふうに単純だった。 幅の固定されたレイアウトをにらみつける 画像がきっかり何ピクセルかを測る――その画像はあらゆるユーザーの画面で変わらないスペースを占めることになる Photoshopのエンジンをかける 画像をさっき測ったとおりのサイズで「ウェブ用に保存」する それを<img>タグでマークアップする グラスにビールを注ぎ（または新鮮なグリンピースの缶を開け）、仕事がうまくいったことを祝う ときおり聡明なる預言者が荒野から現れては、この手法に潜む問題について深遠な真実を説くこともあった。それでもこのやり方は、20年もの間、ウェブ・デザイナーを生業とするものたちに受け入れられてきた。 しかし、時代は
Tokyo Otaku ModeがStylusを使う理由 | Tokyo Otaku Mode Blog
Здравствуйте! Tokyo Otaku Modeでフロント周りを担当している今吉です。 社内でロシア人という設定を付けられていますが、ロシア語は挨拶くらいしかできません。 Webサイトを作るのに避けて通れないのがCSSだと思います。エンジニアも多かれ少なかれCSSを書く事があるかと思います。 しかし、CSSを書くのはとても面倒くさいです。出来る限り楽をしたいと常々思っています。そこで、CSSプリプロセッサを導入してCSSを作成している方も多いでしょう。CSSプリプロセッサとは、乱暴に言ってしまえばCSSをクールにラクに書く事ができる言語です。(設計が素晴らしく、COOLなCSSというものも、もちろんあるとは思いますが、これは一旦置いておきます。) 恐らく最も知られているものは、LESSとSass/Scssでしょう。 しかし、Tokyo Otaku Modeでは、Stylusとい
Ratchet
Build mobile apps with simple HTML‚ CSS‚ and JS components. Download Ratchet Currently v2.0.2 Tweet Follow @GoRatchet Code licensed under the MIT License and the docs are licensed under CC BY 3.0. Ratchet was lovingly crafted by Connor Sears. Currently v2.0.2 · Issues · Releases · Legacy v1.0.2 Docs
Medium’s CSS is actually pretty f***ing good.
I always believe that to be the best, you have to smell like the best, dress like the best, act like the best. When you throw your trash in the garbage can, it has to be better than anybody else who ever threw trash in the garbage can. — Lil Wayne The best at drawing pictures of myselfI’ve been meaning to write something about the CSS at Medium for a while because I’m not completely ashamed of it…
SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
Enduring CSS: writing style sheets for rapidly changing, long-lived projects
25th September, 2015. The methodology of this post has now been updated, expanded and detailed more fully in my book, Enduring CSS, available from Leanpub. When architecting CSS for a large scale project it’s a common aim to abstract visual patterns for re-use, DRY out code and normalise our designs as much as possible. However, for rapidly changing projects, I’m no longer convinced those principl
PostCSSとCSS MQPacker
PostCSSというCSSのパースと変更を行うNode.jsパッケージを知った。Autoprefixerで使われている。名前からわかるように、主にCSSをポストプロセスするためのパッケージだけど、単にパーサーとして使っても良さそう。 習作ということでメディアクエリをまとめるライブラリ、CSS MQPackerを作った。パース結果のオブジェクトを把握するまでがちょっと時間かかったけど、その後は特に難しいことはなく、快適にCSSポストプロセッサーを書けそうな予感がする。 PostCSSのparse()を呼んだ返り値やprocess()で呼ばれる自前の関数に渡されるオブジェクトは、その子の配列rulesの各要素にルールセット(かメディアクエリなど)が格納され、それらは以下のような構造になっている。 { type: 'rule', decls: [ { type: 'decl', parent:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
CSS box-shadow shadows
HTML5 Please - Use the new and shiny responsibly
cheetyr.com
ParallaXXX - CSSConf
WordPress › Error
Buttons Builder