CSS3 Patterns Gallery
Click on a pattern to expand Textareas are editable Browser support Submit a new one Github repo Enjoy! Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial
[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse
p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 <head> ... <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" /> </head> 各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。
経歴や会社の沿革ページに！簡単なCSSで実装するタイムライン
2014年3月28日 CSS, Webサイト制作 ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう！ ↑私が10年以上利用している会計ソフト！ サンプル Chrome, Firefox, Safari, IE9・10で動作確認。 See the Pen Timeline by Mana (@manabox) on CodePen. モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。 モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTML timeline というクラスのついたリストの中の li タ
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
icon を一枚の画像から抜き出すなど CSS で画像の一部を切り抜く方法。
アイコンなどをひとつずつ画像にして保存をしていると、管理がとても面倒になるし、なんていうタイトルを付けて良いかわからなくなります。 特に丸角テーブルがページ内にいくつもあるようなサイトでは、いろいろな種類の丸角部分を管理しなければいけないので、画像のタイトルにも気を使う必要が出てくるのではないでしょうか？ 追記(2009/8/30): 一枚の画像にまとめることで、個別に画像を読み込まなくて良いので、結果的にページの表示にかかる時間が短くなります。 しかし、今回紹介する方法を使うことで、アイコンがまとまっているような画像集から部分的に画像を切り抜くことができます。 ソース .example .icon { background-image: url(../images/example.png); background-position: 0 -50px; overflow: hidden;
CSS : 文字の回転と反転 ( matrix ) : WEB 職人
<style type="text/css"> .mtx { display:block; font-size:16px; width:16px; } .rotation90 { /* 回転 : cos sin -sin cos : Y軸下向きが正 */ -moz-transform:matrix(0, -1, 1, 0, 0, 0); -webkit-transform:matrix(0, -1, 1, 0, 0, 0); -o-transform:matrix(0, -1, 1, 0, 0, 0); transform:matrix(0, -1, 1, 0, 0, 0); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .rotation180 { /* 回転 : cos sin -sin cos
画像の隙間をなくす方法 - スタジオ・アルカナ技術ブログ
こんにちは、冷え性のともよーんです。 イヤな季節がやってきました... 今回は最近発見したコーディングのバグの解決法をご紹介いたします。 htmlで画像をdivなりpなり要素の中に入れると、変なスキマができることが多々あります。 次の画像をご覧ください。 これはdivにpaddingやmarginを指定せずに画像を入れただけのものです。 わかりやすいようにdivにcssで枠線をつけて、画像を上付きにしています。 隙間の幅は広かったり狭かったり時と場合によって色んなケースがありますが、そちらの違いの原因はまだ究明中です。 よく紹介されるcssでの解決方法はこちら line-height:1; これで行間を0にします。 これでかなりの割合で解決しますが、まれにダメな時があります。 特にIE6ではかなり大きな隙間があくことがあって、ハックで対応していました。 しかし、最近になってh2やh3に画像
[CSS]ol要素を美しくスタイルし、アニメーションをちょっとだけ加えるテクニック
擬似要素を使って、ol要素を美しくスタイルし、CSS3アニメーションをちょっとだけ加えたスタイルシートのテクニックを紹介します。 CSS3 ordered list styles [ad#ad-2] デモ 実装 対応ブラウザ デモ デモはIE9, Firefox, Chrome, Safariでご覧ください。 擬似要素のアニメーションは、Firefoxのみサポートしています。 デモページ：Demo 1 数字を矩形にスタイルし、ホバーで数字からアローが伸びます。 ※アニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルで、ol要素を入れ子にして実装するだけです。 <ol class="rounded-list"> <li><a href="">List item</a></li> <li><a href="">List item</a></li> <li><a h
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
ドロップシャドウのバリエーションを増やしたい人用、ボックスに美しいさまざまなシャドウを適用した画像素材
昨日の記事でも扱ったシャドウの美しい繊細な画像素材を紹介します。 シャドウも単にボックスの下につけるだけでなく、さまざまなパターンがあります。
Animating with CSS Transitions · jQuery Masonry
Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus
JavaScriptを使わずにPinterest風レイアウトにする
昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns"> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> ... ... </div> </div> CSS Pinterest風レイアウトをCSSで実現するには、二つの方法が考えられます。 一つ目はfloa
CSSだけで作るtableデザインテクニック
今回はCSSだけでデザインするtableのアイデアを2つ紹介したいと思います。 画像を作ったテーブルも多く見ますが、画像を使わずにも、なかなかカッコいいテーブルができますので、ぜひ参考にしてみてください。ここでは、線と塗りだけで表現するシンプルなテーブルを作ってみます。 7/22に第二段として[CSSだけで作るtableデザインテクニックVer.02(おまけ付き)]を公開しましたので、コチラもぜひ見てみてください！ またテーブルはSEO的に良くないと考えている方がいましたら、tableタグはSEOに不利というデマコチラの記事もあわせて読んでみてください。 元となるHTML <table summary="会社案内表"> <tr> <th class="t_top" width="180">会社名</th> <td class="t_top">株式会社○○○</td> </tr> <tr>
楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 | TM Life
LESS 良いですよ! ホント LESS 良いですよ!! いや, ホント LESS 良いですよ!! ! っと3回言いましたが, LESS オススメです. LESS は CSS をプログラムっぽく書けるようにするメタ言語です. 私は結構前から使っているのですが, 今ではもう LESS ナシのWeb サイト制作なんて考えられません. ただただ, オススメだとか良いよーと言っても説得力がないと思うので, LESS の基礎が学べるサンプルを 8 個ほど用意してみました. 騙されたと思って使ってみて下さい. LESS の良さが分かると思います. サンプルはすべて jsdo.it で作成しているので簡単に実行, 確認できます. よかったら fork して好き勝手イジってみて下さい. Table of contents 1. 変数を使ってみよう 2. Mixins(ミックスイン)を使ってみよう 3. M
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hp-stylelink.com/news/2013/10/20131001.php
html5-memo.com
Sassと仲良くお付き合い
