Single Element CSS Spinners
.load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #ffffff; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .load1 .loader { color: #ffffff; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0
3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる
CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。 3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。 サンプルを用意していますのでご覧ください。 では、HTMLから説明します。 HTML a要素がサークルで、span要素が3本線になります。 <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a> span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。 CSS 続いてCSSです。最初に全部載せて、後で個別に解説します。 #panel-btn{ display: inline-block; posit
TideSDK :: App Development
Desktop App development for Linux, Mac, Windows using HTML5, Javascript, CSS3, and a little help from PHP, Python, Ruby if you need it!Desktop App development for Linux, Windows, and Mac using HTML5, JavaScript and CSS3 plus the power of php, python, and ruby when you need it. A little details on what this is... TideSDK (formerly Titanium Desktop) is a remarkable project inherited from Appcelerato
Bootstrap 3 released
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Today, on the two year anniversary of releasing Bootstrap to the world, we’re shipping Bootstrap 3.0. It’s been a crazy long ride to say the least and we’re stoked to finally have this out in the wild. Thanks to everyone who’s tested our RCs (er, betas), reported bugs,
CSS3 Image Styles - Web Designer Wall
When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I’m going to revisit the
CSS3のborder-radiusで画像を円形に切り抜いてボーダーを付ける時のハック | 名古屋のホームページ制作なら株式会社SPOT
最近はCSS3が普及してきたことで、サークルデザイン（円形）のデザインが増えてきていますね、2013年のトレンドデザインとしてもサークルデザインがよく取り上げられます。 今回は、CSS3のborder-radiusを使って画像を円形に切り抜き、更に円形のborderでかこむデザインをコーディングしていたのですが、iPhoneのSafariやモバイルGoogle Chromeで不具合が起こったので、メモとして残しておきます。 普通にimg要素にCSS3で装飾したら、不具合が・・・ <img src="hanako.jpg" class="circle"/> <style> .circle{ width:184px; height:184px; -webkit-border-radius:50%; border-radius:50%; border:3px solid #AAAAAA; mar
Effeckt.css
Modals # Source: Codrops From Below From Above Slide In (right) Slide In (bottom) Newspaper Side Fall Sticky Up 3D Flip (horizontal) 3D Flip (vertical) 3D Sign Just Me 3D Slit 3D Rotate Bottom 3D Rotate In Left Blur Let Me In Make Way! Slip From Top From Top, Tilt Fall From Top to Bottom From Bottom to Bottom From Top to Top
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
Twitter Bootstrap Button Generator | PlugoLabs
PlugoBrowser - TinyMCE / CKEditor Image & File Manager / Uploader TinyMCE Image & File Manager Twitter Bootstrap Button Generator - the easiest way how to set up your buttons based on Twitter Bootstrap in a seconds. The Twitter name, logo, Twitter T, Tweet, and Twitter bird are trademarks of Twitter, Inc. in the United States and other countries. 2012 © Plugo - Czech Republic based webdesign compa
すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まだ中央寄せで消耗してるの？ - @yoshiko_pg
Best CSS-SVG Loaders and Spinners | Code Geekz
CSS3を使ったアニメーションを70種類以上ダウンロードできるサイト「AniCollection」 | ライフハッカー・ジャパン
Redirecting to Animate.css
Engadget | Technology News & Reviews
制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現
IDEA * IDEA
http://brkcan.net/fun/macbook/
Code smells in CSS | en.ja | Translated Articles for Front End Developers