2/3 CSS3のborder-imageで、しましまの目立つ枠線を作る [ホームページ作成] All About
border-imageプロパティを使って、枠線に画像を指定し、しましま柄の枠線を引く方法 それでは、border-imageプロパティを使って、枠線に画像を指定し、しましま柄の枠線を引いてみましょう。以下の3手順で解説致します。 枠線として使いたい画像を用意する CSSで、通常の枠線を引くよう記述する CSSで、border-imageプロパティを使って、枠線の模様を画像にする 1. 枠線として使いたい画像を用意する まずは、画像を用意します。ここでは例として、右図のように72×72ピクセルのサイズで用意しました。 どんな画像でも構いませんが、縦横とも「3で割り切れるピクセル数」で作っておく方が望ましいです。詳しくは後述しますが、ここで用意した画像は、縦横3つ(合計9個)に分割された上で枠線に使われるためです。 なお、サンプルで利用した3種類の「しましま柄」の画像は、ご自由にダウンロード
![2/3 CSS3のborder-imageで、しましまの目立つ枠線を作る [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/d59c9acbd3259c34d17ea32c3d92a212f41149b1/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F4%2F1%2F0%2F2%2F5%2Ftopimg_large.png)
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT
SassやCompassを使って、ズルいデザインテクニック：ズルいデザイン（2）（1/2 ページ） SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 1: ズルいグラデーション CSS3ではグラデーションを扱えるようになったことから、画像を使わずに自在にグラデーションを描画して、CSSだけでよりリッチなビジュアル表現が可能になりましたが、一口にグラデーションといっても、う
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
2万以上もの各種ボタン・アイコン・バーなどのユーザーインターフェースパーツのデザインを検索してダウンロードできる「UICloud」
「Download button」「CSS button」「Music Player」など、テキストボックスに欲しいユーザーインターフェースパーツを記入するだけで、総合計2万個以上のパーツの中から欲しいものを検索してきてくれるのが「UICloud」です。 UICloud | User Interface Design Search Engine, UI Elements, GUI Design, Free Downloads http://ui-cloud.com/ トップページのテキストボックスに探したいパーツの名称を記入して「Search」ボタンを押します。今回は「Download button」で探してみました。 すると検索結果一覧が表示されます。色んなダウンロードボタンがずらり。 気になったものをクリックします。 すると、大きめサイズのイメージが表示されます。 画面右端には詳細情報
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
CSS3の「gradient」で斜めのストライプ背景
html { color:#fff; background-color:pink /* Opera、IE用代替スタイル指定 */ ; background-position: left top; background-repeat: repeat; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px; /* --Firefox用指定------------------------ */ background-image: -moz-linear-gradient( top left -45deg, purple, purple 25%, pink 26%, pink 50%, purple 51%, purple 75%, pink 76%, pink
画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する
CSS3を使って、画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションなどを適用するさまざまなテクニックを紹介します。 また、Chrome, Safari, Firefoxなど、最近のブラウザで期待通りに表示されないのを回避する方法もあわせて紹介します。 CSS3 Image Styles [ad#ad-2] 最近のブラウザで生じる問題点 画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。 Chromeでの表示 デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。 また、Firefoxでは「border-radius」は期待通りですが、「box-shad
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Icons | Font Awesome
Welcome webdesigncrowd.com - Justhost.com
Welcome webdesigncrowd.com - Justhost.com
gradientを使用した斜めストライプ | マスダァアアア！
CSS3だけで作るボタンデザインいろいろ
http://www.css-lecture.com/log/css3/css3-gradient.html
[CSS]金属の質感が美しすぎる、スタイルシートで実装されたボタン