Avgrund - A modal UI concept
A modal concept which aims to give a sense of depth between the page and modal layers. Click the button below to give it a try. Open modal Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of it, not intended for any practical use. Avgrund is Swedish for abyss. Created by Hakim El Hattab @hakimel — http://hakim.se
The 29 Best WordPress Plugins For Just About Any Site [2024]
Some things just instantly make other things better. Three examples: Ketchup, french fries.Coffee, mornings.Plugins, WordPress. Now there may be people living on the fringes of society and decency that would deny the first two. But no one would claim WordPress is better without plugins. No one. Sure, they may say there are bad plugins to avoid if you don’t want your site to crash irreparably. And
![The 29 Best WordPress Plugins For Just About Any Site [2024]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1d33726ab694ca7e6acc7f49fed0baf2ae31792a/height=288;version=1;width=512/https%3A%2F%2Fe8y8n8b5.rocketcdn.me%2Fwp-content%2Fuploads%2F2020%2F03%2Fcapw-featuered-graphic-29-best-wordpress-plugins-final.jpg)
IE6-8 にも レスポンシブ・ウェブデザインを適用する「respond.js」
allWebクリエイター塾のスマートフォン講座では、レスポンシブ・ウェブデザインを徹底的に教え込みます。そのなかで、IE6-8 （IE6はすでに対象外かもしれません）へ Media Queries を適用する JSを紹介しています。それが、「respond.js」です。 「respond.js」は 非常に軽くて(最小化バージョン3kb /gzipバージョン 1kb)使いやすい JavaScript ライブラリです。作成したのは、jQuery UI や thmem roller などを作成した 「Scott Jehl」、最近人気が急上昇の開発者です。jQuery Mobile も大きく関わっています。 利用方法 利用方法は簡単で、「respond.js」を<head></head>内の CSSファイルの後に設置するだけです。 <head> <meta charset="utf-8" /> <
CSS3 GitHub Buttons
CSS3 GitHub Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs. The "buttons" can be created by adding class="button" to any appropriate <a>, <button>, or <input> element. Add a further class of pill to create a button pill-like button. Add a further class of primary to emphasise more important actions.
Expression Web 4を使ってみよう
W3C勧告のWeb標準に準拠し、フリーソフトになったマイクロソフトのホームページ作成・管理ソフト、Expression Web 4の使用方法を解説します。 Expression Web 4を使ってみたい2012年12月21日（日本時間）をもって、Expression Web 4はフリーソフトになりました。FrontPageユーザーの方もダウンロードして使ってみてください。なお、Expression Web 4すでに購入された方も、問題が修正された無料版にアップグレードすることをお勧めします。 Expression Web 4 無料版をダウンロード ContentsChapter 1 Expression Web 4の概要とカスタマイズExpression Web 4の特長をはじめ、起動方法や画面構成、および、カスタマイズ方法について説明します。 Chapter 1の記事一覧はこちらChap
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
Powerful New CSS Techniques And Tools — Smashing Magazine
A carefully selected list of useful (and powerful!) CSS techniques and tools. Collected, analyzed and curated resources for you to use them right away or save them for future reference! The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, anal
Coding up a semantic, lean timeline – CSS Wizardry
14 March, 2011 Coding up a semantic, lean timeline Written by Harry Roberts on CSS Wizardry. Table of Contents The markup The CSS The spine The arrow and dot The branches Odd/even styling CSS feature detection? Final word I absolutely love coding up the more semantic aspects of a build. Usually forms and tables, it’s these massively semantic (read; lots of elements with very specific jobs) that I
Xlune::Blog
BlogをMTからMiddleman+S3にしたよ Date: 2013/11/03 05:20 非同期ページ遷移なjQueryプラグイン書いたよ Date: 2011/05/15 21:07 【３】Cubeで遊ぼう！ 経路探索編 - はじめてのthree.js Date: 2011/04/24 07:42 【２】Cubeで遊ぼう！ Tweenアニメーション編 - はじめてのthree.js Date: 2011/04/18 12:33 【１】Cubeで遊ぼう！ 迷路生成編 - はじめてのthree.js Date: 2011/04/16 09:40 GoogleSuggestっぽいjQueryプラグイン書いたよ Date: 2010/02/21 07:20 可変グリッドレイアウトのjQueryプラグイン書いたよ Date: 2009/09/06 16:17 PHPからSkypeチャットを
高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス
Blueprint: A CSS Framework | Spend your time innovating, not replicating
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing. What does Blueprint have to offer? A CSS reset that eliminates the discrepancies across browsers. A solid grid that can support the most complex of layouts.
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
シンプルでフリーな使えるCSSのレイアウト集７１５:phpspot開発日誌
715 Awesomely Simple and Free CSS Layouts | Design Shack シンプルでフリーな使えるCSSのレイアウト集７１５が紹介されています。 １から作らないでもこうしたものに頼ればすぐに出来ますね。自分の好みの使いやすいページを覚えておくとレイアウト作成をすぐに終わらせ、肝心のツール部分に集中できそうです。 Primary CSS: 22 Layouts Little Boxes: 16 Layouts CSS Easy: 8 Layouts Max Design: 25 layouts Iron Meyers: 224 Layouts 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」 複雑なCSSレイアウト
HTML/CSS:FirefoxとSafariのCSS徹底検証 - builder by ZDNet Japan
ウィンドウサイズによってスタイルシートを変える ブラウザのウィンドウサイズは環境によってさまざま。特定サイズを想定し作成すると、それ以外でコンテンツが読みづらくなる。最近はiPhoneなどに対応する必要もあるが、サイズ別にページを用意するのは制作・管理面で手間。こんなときはCSS3のMedia Queryを利用するといい。 2010-03-02 08:00:00 CSS 3のアニメーション機能を使ったロールオーバーやフェードインの設定 CSS 3のアニメーションの機能を利用すると、これまではJavaScriptやFlashを使わないと設定できなかった効果をスタイルシートだけで設定できるようになる。今回はアニメーションを利用したロールオーバーボタンの作成やフェードインの設定を行いながら、アニメーション関連プロパティの細かな機能を見ていきたい。 2010-01-04 13:41:01
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Media Queries
Demo: CSS drop-shadows without images – Nicolas Gallagher
Rethinking the mobile web - QuirksBlog
最前線 - フィクション・コミック・Webエンタテイメント
CSS HappyLife ZERO