Jagged borders make your designs sharp! :)...
CodePen - Jagged Border Generator
Jagged borders make your designs sharp! :)...
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
Replace The Image In An <img> With CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Marcel Shields. Marcel was in a difficult place where he needed to change the image on a page but didn’t have access to the HTML. Rare, but I’m sure we’ve all be in weird situations like this. He explains how he managed to replace that image without needing t
CSS3 Animated Bubble Buttons
This week we are creating a useful set of animated buttons with the power of CSS3's multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. Four color themes and three sizes are also available by assigning additional class names. The HTML To turn a regular link on your pag
【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ | バシャログ。
こんにちは、GWは神奈川県から一歩も出ませんでした ishida です。 さてさて、今回は最近スマートフォン案件が増えてきましたので実務で使えそうなコーディングTipsをば。 スマートフォンでは、radioボタンがデフォルトのままだとかなり押しにくいですよね。 対象がスマートフォンであれば（IEちゃんを除けばOKかも）CSSだけで、意外とカスタマイズができます。 HTML HTMLのコードは以下になります。 <ul class="list"> <li><input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男性</label></li> <li><input type="radio" name="gender" id="gender2" value="2"><label for="gende
» スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic
パララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。 そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。 スクロールや、リサイズといったJavaScriptのイベントは連続で処理されます。そういったイベントの「開始した時」「動作している時」「停止した時」の状態が取れるjQueryのプラグインを作成しました。 jQuery.MovingState このプラグインを使い、CSS3 Animationsを動的に操作してみたいと思います。 CSS3 Animationsを一時的に停止
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
List of Pseudo-Elements to Style Form Controls
Styling form elements is a pain point when developing web applications. Historically, web developers have had to accept the form controls the browser provided with little hope of customization. However, web rendering engines are increasingly adding hooks through pseudo-elements to give authors some control over the display. While all of these pseudo-elements are rendering engine specific (and ther
Flexy Boxes — CSS flexbox playground and code generation tool
Flexbox browser support Three versions of the flexbox spec – each with different syntax – have been implemented in browsers. The two 2012 specs are roughly equivilant in terms of features, differing mainly in syntax. The earlier 2009 spec is less comprehensive though covers a lot of the same ground. Flexbox 2012 — W3C Candidate Recommendation, September 2012 Opera 12.1+, Firefox 22+. Chrome 21 -we
CSS3 test: hyphens
It is most likely necessary to resize the viewport to properly evaluate this test. [#p01] This is a paragraph with no embedded hyphenation hints and no hyphen-related CSS applied. Corporate gibberish follows. Think visionary. If you generate proactively, you may have to e-enable interactively. We apply the proverb "Grass doesn't grow on a racetrack" not only to our re-purposing but our power to ma
【2013年注目必至！なCSS仕様】CSSフィルタ、これはすごい！（デモ付き） | OpenWeb
以前から気になっていたCSSフィルタについて、ちょっと調べてみました。 結果、あまりにお手軽に、効果絶大なエフェクトをかけられることが判明して、ちょっと興奮しています。これはすごい！ CSSフィルタは、SVGで従来から規定されていたFilter Effectsを、CSSの世界に持ち込んだものです。 CSSとSVGのワーキンググループが共同して立ち上げたCSS-SVG Effects Task Force (FX TF)により、「Filter Effects 1.0」という仕様として策定が進められています。 この仕様によって新しく導入されるCSSプロパティはいくつかありますが、主なものはfilterプロパティです。 filterが素晴らしいのは、ぼかしやドロップシャドウといったエフェクトを、CSSのみで簡単に指定することができるからです。 例えば、要素にぼかしをかけたい場合は、以下のようなプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
csstubemap.co.uk
Css3 Tutorials and Techniques - Html5xCss3
TextFX2 - CSS3 Text Animations by CodingJack | CodeCanyon
Ceaser - CSS Easing Animation Tool - Matthew Lein
CSS3 gradient transition with background-position
Css666.com is for sale | HugeDomains
Using Flexbox: Mixing Old and New for the Best Browser Support | CSS-Tricks
