[B! CSS3] ryownetのブックマーク

ryownet id:ryownet

CSS3に関するryownetのブックマーク (35)

プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏 1. @2015.07.25 マカベン HTML5fun 2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介平尾優典（ひらおゆうてん） === 株式会社ディーゼロ Web...
ryownet 2015/08/05
cssの出来る子たち

css3
リンク
【2013年注目必至！なCSS仕様】CSSフィルタ、これはすごい！（デモ付き） | OpenWeb
以前から気になっていたCSS フィルタについて、ちょっと調べてみました。結果、あまりにお手軽に、効果絶大なエフェクトをかけられることが判明して、ちょっと興奮しています。これはすごい！ CSSフィ...
ryownet 2014/12/20
filterサンプル。webkit専用

CSS3

webデザイン
リンク
Profiling Long Paint Times with DevTools' Continuous Painting Mode
Chrome Dev Summit 2020 is back & going virtual on December 9-10. Learn more By Year @f @r1 Continuous painting mode for paint profiling is now available in Chrome Canary. This article exp...
ryownet 2014/10/22
html5

高速化

CSS3
リンク
動くCSSのためのメモ。
2020.4.12. Sunローディングのくるくる2019.11.19. TueSVGでやることのまとめ。
ryownet 2014/06/06
transition,animationなどのめっちゃ丁寧な解説。transition-delayのマイナス値知らんかったわー

CSS3

webデザイン

web制作
リンク
「CSS Regionsを使った新しいCSSレイアウトを作る方法」HTML5 Conference2013レポート | HTML5Experts.jp
「CSS Regionsを使った新しいCSS レイアウトを作る方法」HTML5 Conference2013レポート馬場美由紀（HTML5 Experts.jp 編集部） 11月にiOS7のSafariでサポートされることになり、一躍注目を集めることに...
ryownet 2013/12/26
css regions。コンテンツとレイアウトの分離ができる。リフロー前後でレイアウトを作る必要があるのか、SEO的にどうなのかなど疑問残るけどスマホ最適化の一環として。

Webデザイン

css3
リンク
SpinKit | Simple CSS Spinners
.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease...
ryownet 2013/12/19
ローディングのくるくるをcss3で

CSS3

ローディング
リンク
[CSS]アイテム数が不明でもカラム数に合わせてぴったりに配置するスタイルシート | コリス
下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。もちろん余白のままでも良い場合...
ryownet 2013/11/12
display:flexにすると計算できるので、カラム数のあまり数を算出して幅を指定

css3

web制作
リンク
クリックしてカードをめくる - jsdo.it - Share JavaScript, HTML5 and CSS
(function($){ $.fn.rotate_box = function(){ var elm = $(this), elm_in = $('.inner', this), btn = $('.face, .back', elm), deg = 0, turn = false, turn_cls = 'reverse'; var rotate_anm = func...
ryownet 2013/10/06
css3

html5

jquery
リンク
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew...
ryownet 2013/09/05
css3バリバリ

webデザイン

css

css3
リンク
Compassで書き出すCSSファイルを軽量化する - to-R
Compassで書き出すCSS ファイルを軽量化する Compassは便利な半面、書き出されるCSSのサイズが非常に大きくなってしまうことがあります。設定を変更することで書き出されるCSS ファイルの容量を削減する...
ryownet 2013/09/03
ベンダープリフィクスをつけんなという話

compass

css

CSS3
リンク
スマホでタップできることを示すアイコンなどをCSSのみで実装してみましょう | clear sky source
あたり前だろうと思っていることが実はあたり前ではないとうことがありますね。スマホサイトのデザインでよくある、タップできる領域の右端に矢印みたいなのがついてるものがあります。こんなやつで...
ryownet 2013/06/17
スマホの矢印をつくるcss

css3

css

スマホ
リンク
https://ameblo.jp/ca-1pixel/entry-11497184837.html
ryownet 2013/03/28
むかしflasherが通った道をcss3やる人が通ることになる。そしてeaseは0.4秒が最高に気持ちいいとか言い出す

アニメーション

css3

Webデザイン
リンク
CSSだけでスライドショーはつくれるよ。
この記事はCSS Programming Advent Calendar 2012、22日目のための記事です。 CSS Programmingとは、jsを使わないでHTMLとCSSを駆使してゲームとかスライドショーとか作る技術ですということで、ここ...
ryownet 2013/01/13
css3

チュートリアル
リンク
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
Transcript 少ない手間と知識で “それなり” に見せる、ズルいデザインテクニックとりあえず、これやっとけば大丈夫（多分） @ken_c_lo TAEKO AKATSUKA Z u r u i D e s i g n 1 ...
ryownet 2012/10/30
sass/scssの時代が来てるという話。書き方はおいといて、言ってることは2012年現在の正解そのもの

Webデザイン

css3

Sass
リンク
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | Developers.IO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。はじめに - パララックスエフェクトについてパララ...
ryownet 2012/10/18
パララックスの作り方と良い例

css3

パララックス

webデザイン
リンク
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感...
ryownet 2012/10/02
respondは使わない、1ファイルでクエリで全部書く、デバイス用には上書きして書く。。。だけど幅に数字入れてたら全部上書きしないといけないよね？

Webデザイン

Web制作

css3

レスポンシブ
リンク
”レスポンシブなデザイン” のアドビ HTML5/CSS3 特設サイト制作者インタビュー | デベロッパーセンター
アドビの HTML5/CSS3 特設サイト（http://adobe-html5.jp/）の制作を担当した、面白法人カヤックの比留間さんに、”レスポンシブなデザイン” についてお話を伺いました。初めてこのようなサイトに関わっ...
ryownet 2012/05/16
box-sizingを使うとレガシーなpadding+width計算をしなくてもレイアウトできた

html5

スマホ

CSS3
リンク
-webkit-border-radius なんて書いているWeb開発者は腹を切って死ぬべきである - hogehoge @teramako
地獄の火の中に投げ込むものである。いや、まあそんなネタはどうでも良くて... そのベンダー接頭辞はいつまで書くの？ | Unformed Building 書いてあることは至極真っ当なこと。もろ手をあげて賛成で...
ryownet 2012/05/15
言いたいのは、書くなじゃなくて、書いた後に仕様が変わったらすぐ対応できるようにしておけ、ってことでしょ。リリース前まではしっかりテストするけどリリース後は面倒みません、っていう開発者は死ねってこと

CSS3

Web制作
リンク
Mobile Boilerplate: A best practice baseline for your mobile web app
★ Analytics, icons, and moreA lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icons; and several mobile-focused tools and helpers. ★ Norm...
ryownet 2012/05/14
HTML5bpのスマホ版。プロジェクトが分かれたので、HTML5bpは(ver3から)よりPC向けなコードになった(モバイルファーストとはいえ最低限どまり)。真のモバイルファーストはこっち

CSS3

html5

boilerplate
リンク
Realtime Data Stream Network Blog | PubNub
New: Visualize and Monitor Your PubNub Usage with Datadog Da...We’re pleased to announce Datadog dashboards, our new live ops support offering for customers on Platinum support plans....
ryownet 2012/05/14
軽量なセレクタとhtml記述でレンダリングを早くする。Good: #idselector{} Bad: nav .hoge #idselector{} / Goog: <div id=my_id> Bad:<div id="my_id">

CSS3
リンク
1 2 次のページ

iOS / Androidアプリ

アプリでもはてなブックマークを楽しもう！

公式Twitterアカウント

@hatebu

最新人気エントリーを配信します。

ヘルプ・その他

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx