[CSS]テキストの天地に美しいグラデーションのボーダーと背景を適用するスタイルシート
p要素などで実装したテキストの天地に、美しいグラデーションのボーダーと背景を適用するスタイルシートのデモを紹介します。 カルピスもちはおやつにもらったのがおいしかっただけで、スタイルシートには何の関係もありません。 上記は当方でテキストやサイズを変更したもので、デモは下記にあります。 Gradient Borders 実装はシンプルなので、他にも応用がききそうですね。 HTML p要素をdivで内包します。 <div class='backbox'> <p>This is the future.<br>Live it & love it.</p> </div> CSS まずは、Webフォントと背景カラーの設定です。 @import url(http://fonts.googleapis.com/css?family=Josefin+Slab); html { background-colo
Ajaxload - Ajax loading gif generator
Indicator type : Background color : # Transparent background Foreground color : # Create easily your own ajax loader icon : Select the type of indicator you want Enter the background code color you want (tick "Transparent background" if you don't want one Enter the foreground code color you want Press "Generate it"
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
CSS3のtransition-timing-functionの動きをサンプルで理解しよう
<div id="transition">マウスを乗せてみてください <div id="ease">ease</div> <div id="linear">linear</div> <div id="ease-in">ease-in</div> <div id="ease-out">ease-out</div> <div id="ease-in-out">ease-in-out</div> </div> transitionはまとめて指定しています。transition-propertyとtransition-delayは省略しています。省略した場合、transition-propertyは「all」、transition-delayは「0s」になります。 #transition{ width:510px; padding:10px 20px; background:#f1f6fc; bo
PSDgraphics - Download high resolution backgrounds, textures, and PSD icons for your web and graphic design project.
Download 15 most popular graphics for free, subscribe:
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
Sassの@extendでCSSとHTMLをシンプルに - あと味
明日、UPGRADE JAPANにて、Sassについて話す予定です。 それ用にSassの記事増やしておきたかったんですけど、あまりそれもできず。しばらくは、UPGRADE JAPANのフォローアップとして、いくつかSassの記事を投稿する予定です。 さて、「Sassの@extendでCSSとHTMLをシンプルに」ということですが、Sassの@extendを使わなかった場合と、使った場合の対比を書いてみます。 したいこと サイドバーがある とあるページのサイドバーは、既存のサイドバーのスタイルと背景色が違うだけ これですね。つ First Look: Object Oriented CSS - SitePoint 単純なCSS 単純にこれをCSSで対応すると以下のようになるかもしれません。 .sidebar { /* sidebarのスタイル */ } ...省略... .onsalesid
DOMAIN ERROR
ドメインウェブの設定が見つかりません 考えられる原因 ドメインウェブの設定がまだ行われていない。 ドメインウェブの設定がまだ反映されていない。(反映には数時間～24時間かかることがあります) ドメインウェブ・DNSの設定が誤っている。 アカウントが存在しない、契約が終了している、削除されている。
CSS Animationsを使ってローディング用アニメーション
なんとなく思いついたので、CSSでローディングアニメーションを作ってみました。 画像とかcanvas使えよって話ではあるんですけどね……。まあアニメーションの練習ってことで。 今回は『jsdo.it』で作ったので、それを置いておきます。 Firefox 5以上、またはWebkit系のブラウザで動きます。 2020年1月8日 追記： 『jsdo.it』は2019年に閉鎖されましたので、回収できた自分のコードだけデモページに移行しました。 CSS Loading Animation 簡単にですが解説してみたいと思います。 まずHTMLから。 <div class="loading style-1">Now Loading...</div>使うのはdiv1個です。 class名が2つ付いてるのは、最初いくつか作ろうと思ってたからです。 （結局思いつかなかったので諦めましたが……） では次にCSS
[CSS]画像無しで作成する美しいデザインのボタンのスタイルシート
Photoshopで作成したかのような美しいデザインのボタンを実装するスタイルシートを紹介します。 キャプチャは上から、ノーマル時、ホバー時、クリック時です。 Make CSS3 buttons that are extremely fancy デモページ デモページ（カラーバリエーション） ※更新：カラーバリエーションを増やしました。 ボタンはCSSで実装されているため、ブラウザの文字サイズの拡大に伴いサイズも変更し、カラー変更も簡単におこなえるように設計されています。 ※CSS3非対応のIE7/8などでの見栄えはそれなりになります。 実装はシンプルながらもテクニカルで、先日当サイトで紹介した「Safariで見かける角丸のにじみを解消するスタイルシート」なども利用されています。 HTML ボタンのカラー変更が簡単にできるようにインラインスタイルシートを使用しています（下記キャプチャ参照）
Seamless Paper Patterns » WebTreats ETC
Today’s web treat is a free combo pack of large (1024px * 1024px) seamless paper textures in .jpg format as well as a corresponding Photoshop tileable pattern (.pat) set. Click thumbnails below to view the fullsize versions and download individually, or download the complete zip below. Included Images Included in the zip Full size versions of all the thumbs shown above Photoshop .pat pattern set o
Tartan Maker
Fatal error: Uncaught Error: Undefined constant "INACTIVE_USER" in /home/mhd-01/www.tartanmaker.com/htdocs/modules/authentication.php:5 Stack trace: #0 /home/mhd-01/www.tartanmaker.com/htdocs/sg_require.php(9): require_once() #1 /home/mhd-01/www.tartanmaker.com/htdocs/modules/user.php(5): sg_require() #2 /home/mhd-01/www.tartanmaker.com/htdocs/sg_require.php(9): require_once('...') #3 /home/mhd-01
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
[CSS]Safariで見かける角丸のにじみを解消するスタイルシート
ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. - Google Project Hosting