カードやボタンをはじめ、さまざまな要素をふわりと浮かび上がらせる繊細なシャドウを与えるスタイルシートを紹介します。 box-shadowを重ねがけした複雑なスタイルシートですが、スニペットに登録しておくと簡単に利用できます。 Multiple Shadows 繊細なシャドウを与えるスタイルシート カードにシャドウを与える ボタンにシャドウを与える デモ 繊細なシャドウを与えるスタイルシート シャドウはbox-shadowを使用し、複数のシャドウを重ねがけします。 カードやボタンなど、さまざまな要素に利用できるので、スニペットに登録しておくと便利です。 .shadow { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 1

June 13, 2017Results of the Ultimate CSS Survey 2017 On April 26 I posted this year’s version of the Ultimate CSS Survey, a way for us to gather information from CSS developers on their practices, habits, knowledge, and understanding of CSS. More than 1,600 people filled out the survey over the past 6 weeks and now it’s time to show you the numbers. I’ve embedded the results below, and after the e

codropsで公開されてるエフェクトのチュートリアルがステキだったので忘備録。昨年から良く見るレイヤーを追随させるアニメーションエフェクトで、このチュートリアルではアニメーションからメニュー・モーダルウィンドウなど様々なバエーションが用意されてます。 ◆以前紹介した記事 複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」

僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて

こんにちわ、メルカリアッテでFront-end Developerをしている@t32kです。 メルカリではセミナー参加補助制度があり、それを利用して海外カンファレンスに参加してきました。今回は11/30 ~ 12/01、オーストラリア・メルボルンで開催されたCSS/JSConf Australia 2016に行ってきたので、そのレポートを書きたいと思います。 今回はその中でも、CSSConfでのBarak Chamo氏が講演した内容が非常に興味深かったので紹介します。 Hey presto, CSS! 今日はお話する内容は魔法についてです。どのように自分が定義したCSSをブラウザ上で利用可能にするのかという魔法です。 その前に、魔法ではないこれまでのCSSについて振り返ってみましょう。日本には『珍道具』と呼ばれるものがあります。とても素晴らしい技術ですが、ちょっとオーバーエンジニアリングに

どうも、まさとらん（@0310lan）です。 みなさんは、「CSSフレームワーク」を活用しているでしょうか？ いきなりフレームワークと聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は誰でも利用できるようにシンプルな設計で公開されているモノが増えています。 そこで今回は、多機能でありながらも学習コストが低い「CSSフレームワーク」を厳選し、レスポンシブ対応でモバイルに優しいものをいくつかご紹介しようと思います！ ■CSSだけで多彩なサイトを構築できるフレームワーク！ 【 Picnic CSS 】 Web制作に必要なコンテンツを、とにかく簡単な手順で手っ取り早く構築できるように設計されているのが「Picnic CSS」です！ 特に、Flexboxを活用した非常に柔軟なグリッドレイアウトや、JavaScript不要でインタラクティブな要素を構築できる機能などはとても便利だと思

at DevFest Tokyo 2016.

CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…

どうも、沖縄在住ニートブロガーのケンヂ（@neetblogman）です。 実は最近、僕のブログで使用しているとある機能について問い合わせを受けることがちょくちょく出てきました。 まぁ既にタイトルにも記載しているんですが、文字が震える機能のことです。 これとか！ これね！！！ この機能が僕のブログに独自性を持たせていたともいえるため、この方法を周りのブロガーに紹介してしまうと僕の存在が消えてしまうのではないかという恐れがありますが、今回はそこについて気にしない方向で行きたいと思います。 何故なら、一度はIT業界に携わった身ですからアウトプットの大切さを僕は知っているのです。アウトプットがあるから新たなインプットが生まれる、これの繰り返して人間という生き物は成長していくのですよ。 というわけで！！誰でもサクッと簡単に使うための方法を教えちゃうよ―(‘ω‘ ) CSSなどの導入方法はこちらのペー

Optimized for UI like font, background, border, etc.

2016年5月13日 CodeGrid 四周年記念パーティーでの「ヒューマンリーダブルな CSS 記述法（異次元編、α版）」の資料です。大規模な運用でも、CSSをヒューマンリーダブルに保つ方法について、その試みを提案しました。スライド中のデモは https://github.com/storywriter/HRCSS で公開しています。Read less

以前見かけたこの記事がきっかけで、実務でもずっと引っかかっていたことがあるので書こうと思う。 ＞ remの基準となる値を行の高さにする | yoshihiko com-blog 行間 ≠ line-height という罠よくある疑問に、日本語で言う「いわゆる行間」と、CSSの「line-height」は違うというのがある。日本語の文章は、仮想ボディが基準の原稿用紙のようなグリッドがあって、それが「いわゆる行間」のピッチで繰り返されて本文ができている。文字の頭（仮想ボディの上）から次の文字の頭までがいわゆる行間とされている。もっと正確に書くと、これは行送りであって、正確な意味での行間は line-gap というものになる。 行送り= line-height、行間= line-gapで、一方ラテン語圏が基本のウェブ（CSS）では、この line-gap のくっつき方が純粋な日本語組版とは異なっ

メンテナンス性に優れ、拡張性を備えたCSSを書くための「MaintainableCSS」を紹介します。 あるスタイルを修正する際に他に影響を与えてしまわないか、せっかく書いたコードが先祖帰りしないか、似たページをつくる時にコードを再利用するのに問題はないかなど、全部はもちろん個々でも非常に参考になると思います。 MaintainableCSS 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 メンテナブルCSSにすることのメリット 1. はじめに 2. セマンティック 3. 再利用 4. ID 5. コンベンション 6. モジュール 7. ステイト 8. バージョニング メンテナブルCSSにすることのメリット モジュール化、カプセル化 スタイルはあなたの許可なしで、他のスタイルの影響を受けません。 どんなデザインの要件でも あなたの必要

Write CSS without worrying that overzealous, pre-existing styles will cause problems. MaintainableCSS is an approach to writing modular, scalable and maintainable CSS. “A handy little read on learning how to write modular and maintainable CSS.” Smashing Magazine “Finally a good book on how to write maintainable CSS.” Alexander Dajani “I actually love everything about this.” Simon Taggart

This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

Posted 11 February 2016 - totally overshadowed by some waving gravity thing. Thanks Einstein. Chrome is intending to change the behaviour of <link rel="stylesheet">, which will be noticeable when it appears within <body>. The impact and benefits of this aren't clear from the blink-dev post, so I wanted to go into detail here. Update: This is now in Chrome Canary. The current state of loading CSS <

18. <div class="speaker"> <div class="avatar"> <img src="tani.jpg"> </div> <div class="inner"> <p class="name">…</p> <div class="biography"> <p>...</p> </div> </div> </div> 19. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .avatar { float: left; margin-right: 15px; } .speaker .avatar > img { border-radius: 50%; } .speaker .inner { overflow: hidden; }

Over the 8 years of its life, Dropbox’s CSS codebase has grown to a considerable scale. Dan talks about how their CSS has grown, the pains of inheriting a large CSS codebase, and some of the approaches for refactoring and scaling CSS at scale.