Experiment: Using Flexbox Today - Chris Wright
Flexbox adds a level of control to our layouts that we didn't really have before, we hacked our floats and clearfixed, we fought whitespace with inline-block, pushed display:table, and even stretched content with position:absolute. We no longer need to rely on these solutions beyond providing something visual to browsers without flex features. Flex's features will add an important set of tools to
真似したい!使いたい!オシャレなCSSテキストエフェクト31個 | 楽天ティップスRakutenTips
CSS 3 Transform Experiment CSS3トランスフォームを使ったpure CSSトリック。モダンブラウザ＆IE9＋みたいなので使うサイトは選ぶかなっと。 Animated Text Fill javascriptを使わずcssアニメーションでストライプを表現したテキストエフェクト Text Animation 見出しに追加して置きたいアニメーション Elastic Stroke CSS + SVG SVGを使ったカラフルなテキストアニメーション Fun With CSS Text-Shadow イベント時などに使いたいテキストシャドーを使ったインパクトあるポップなテキストエフェクト Box-bubble Cutout in CSS 写真にフィルターを掛けた背景に合わせた日付入りボックス Fly in, fly out JS &CSSで実装するアニメーション Maske
Re: CSSの content プロパティーを使いこなそう！
2015年4月10日 著 まず先に結論を書いてしまうと、Webクリエイターボックスの「CSSの content プロパティーを使いこなそう！」という記事には、アクセシビリティ的に好ましくない事例が掲載されているので注意しましょうね、ということです。また同記事の著者は、「文章として扱いたい場合は、CSSを使わず、ちゃんとHTML内に記述しましょう」と呼びかけていますが、これは誤解を招く表現だと思っています。文章の体をなしているかどうか、が論点ではないでしょう。閲覧環境を問わず、より多くの人により確実に届けたいと思う情報であれば、contentプロパティに頼らず、本文中にマークアップすべきと考えます。記事の末尾に 擬似要素と content プロパティーでできることの多くは、装飾としてデザインに付け加える程度のものが多いかと思います。 と書かれていますが、むしろ装飾の意味合いでしかconten
最近のoverflow: scroll事情 - console.lealog();
もちろんモバイル情報です。 iOS4やらAndroid2.x時代にはまったく使い物にならなかったこの指定、 最近はどうなの？っていう。 overflow: scroll 対象をiOS5以上、Android4以上とするのであれば十分に使えるものだと思います。 ただスクロールすれば良いだけであれば、jsなしに実現できる時代きた！すばらC！ -webkit-overflow-scrolling: touch 勘の良い人ならお気づきでしょうが、コレも使いたいですよね。 スクロールできる部分で慣性スクロールができるようになるやつです。 .carousel { overflow: scroll; -webkit-overflow-scrolling: touch; } みたいな。 ただこいつは、まだ要注意です・・。 手元で再現したバグなので、すべてのケースに当てはまるわけではないと思いますが、 一応こ
Override Gmail's Mobile Optimized Emails | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. Many emails are designed with a large screen in mind. Text that looks great on a large screen can be difficult to read on a mobile device, though. If Gmail deems that the font-size of any text in an email is too small to be legible, it will increase the size and flag th
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
日本語Webフォントの革命 - 3846masa's memo
日本語Webフォントに革命がおきた． 詳しくは続きを読んでくれ． ちょっと大きく出てみた． 実装についての記事はこちら この記事で言いたいこと 動的に日本語フォントのサブセットを作成してくれるOSSを作りました． サンプルページはこちら 臨時のサンプルページはこちら 追記 herokuが落ちてる，メモリ不足だな．早い所Dockerfileつくろう． 追追記 herokuで運用は再検討したほうがよさそう．「こういうこともできます」の事例ということでひとつ． （やっぱり普通のサーバで動かす分には大丈夫そうな気がする．どうだろう） そんなわけで，どうぞご利用ください。 （ちなみに粗い作りなので，pull-requestやissue投稿をしてくださると嬉しいです．） 何が革命なんだ 革命が起きたというけど，どこが革命なの？ 僕には革命が起きたようには思えないけど そんなこと言わんといて，泣くわ．
UIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアル
ボタンやパネル、レイアウトなど、最近はWebのユーザインターフェイスでさまざまなアニメーションが利用されています。WebページのUIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアルを紹介します。 アニメーションを魅力的に動かすテクニックを段階的に解説しているので、それぞれの効果がよく分かります。 Giving Animations Life 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Step 1: まずはシンプルに動かしてみよう Step 2: バウンドを加える Step 3: バウンドを自然な動きにする Step 4: ディズニー®の12の基本原則を取り入れる Step 5: アニメーションを誇張する Step 6: アニメーションに命を吹き込む キーフレームを簡単に設定できるスクリプト St
BEM 101 | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-Tricks staff. Joe wanted to do a post about BEM, which we loved, and just about everybody around here had thoughts and opinions about BEM, so we figured we’d all get toge
Multi-Level Push Menu | Codrops
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, somethin
iOS8のバグ-webkit-overflow-scrollingで要素が消える不具合 | 2eb
iOSで慣性スクロールを有効にするCSS「-webkit-overflow-scrolling:touch;」を追加するとiOS8で発生することがある要素が消えるバグとその解決方法を紹介しています。iPhoneやiPadなど、iOSで慣性スクロールを有効にするCSS「-webkit-overflow-scrolling:touch;」を追加することで、疑似フレームを使用した要素も滑らかにスクロールさせることができます。 操作性が格段によくなるので、是非とも指定したいプロパティなのですが…複数の条件が重なると不具合が発生してしまいます。 発動条件は［iOS8でページ読み込み時に非表示の要素に-webkit-overflow-scrolling:touch;を指定している］場合のようで（実際はもっと複雑かも）、スクロールしようとタッチした瞬間にその要素が消えてしまうという悲惨なバグです！！:
接頭辞つきのクラス名にマッチする CSS セレクター
Kraken というフロントエンドのフレームワークのコードを見ていたら、なるほどと感心する CSS セレクターの書き方を見つけた。grid-one、grid-two みたいな接頭辞つきのクラス名にマッチするセレクターで、こんな感じ: [class^="grid-"], [class*=" grid-"] { /* ... */ } 単純に考えると [class*="grid-"] でいけそうな気がするけど、それだと foo-grid- みたいに頭に余計なものがついていてもマッチしてしまう。そこでホワイトスペースを接頭辞の前に置いて [class*=" grid-"] とすることでそれを避けている。すると今度は class="grid-one" みたいに class 属性の先頭で頭にホワイトスペースがない場合にマッチしないので、[class^="grid-"] という前方一致のルールを追加。
Loading CSS without blocking render
This article demonstrates a technique to get content in front of visitors as quickly as possible by asynchronously downloading stylesheets to prevent them from blocking page render. Warning! I posted this with the best of intentions, but it would be irresponsible not to make readers aware of the following issues. Community feedback is coming in thick and fast (something I'm very grateful for) and
親要素に transform をかけると position: fixed が absolute 扱いになる
親要素に transform をかけると子要素の position: fixed が absolute 扱いになってしまう。これはブラウザ関係なくどのブラウザでも起こるようだ。 サンプルはtranslateXになっているが検証した結果scalerotateskewでも同じ現象が起き、ここまで起これば試していないがもちろんmatrixでも起きるだろう。 CSS Transforms Module Level 1のW3C Working Draftにもissueとして記載されているが、バグレポート（バグレポートの中身が理解できてないが）の方は、もう1年半ほどほったからしになっている。 タスクはちゃんと処理して！
Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS
Software Engineer at XB Software EnjoyCSS changed the work process a lot. It minimized time and efforts spent on creating complex CSS styles as it is easy to use. No deep background is required to get complex CSS. I personally like is that with this CSS code generator I can easily create numerous graphic styles and immediately get their code or code of separate elements within seconds., EnjoyCSS g
Flexible Grid System – ทางเข้าสล็อตออนไลน์
เล่นสล็อตออนไลน์กับ PG SLOT ควรปั่นกี่ครั้งถึงจะชนะ หนึ่งช่องทางที่จะทำให้นักเดิมพันทุกคนก้าวไปสู่ชัยชนะกับเกมสล็อตออนไลน์ที่ดีที่สุด คือการมาร่วมสนุกกับเกมสล็อตจากค่าย PG SLOT ที่จะทำให้ทุก ๆ คน เป็นแชมป์เปี้ยนเซียนสล็อตออนไลน์ได้อย่างยั่งยืน
リファクタリングHTML/CSS ～レガシー世界を超えて～ #scripty03
2015/3/10の勉強会にて発表された資料です。 SCRIPTY#3 ～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/12374/Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Experiment: Flexbox Adventures - Chris Wright
Loaders.css
GitHub - ConnorAtherton/loaders.css: Delightful, performance-focused pure css loading animations.
