シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。 デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方 Izmirの特徴 画像をホバーすると多彩なアニメーションを適用します。 エフェクトを組み合わせることで、2000通り以上のエフェクトを使用可能。 20種類のボーダーエフェクト、9種類の画像エフェクト、12種類のテキストエフェクト。 オーバーレイのスタイル、アニメーションの遅延、テキストのレイアウトなど、classも豊富。 アクセシブル（デスクトップはホバー、スマホはフォーカス）。 2Kbの超軽量ライブラリ。 実装・カスタマイズ用のドキュメント完備
フッターを CSS で画面下部に固定したいのはよくあるケースなようで、『CSSStickyFooter』 とか、『A CSS sticky footer』とかが有名どころでしょうか。 CSSStickyFooter は昔は Clearfix Hack を使っていたようですが、今やシンプルなCSSでフッターの固定化を実現しています。 ここではとってもシンプルな『A CSS sticky footer』をステップ バイ ステップ で見ていきましょう。 最初は2つのボックスからスタート 2つのボックス div.wrapper と div.footer を定義してみます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <bod
CSSを使えば画像の拡大、縮小はwidth、heightを使って行えますが これだと拡大した時の位置が動いたり、周りの要素に影響を与えたりします そんな時scaleを使えばとても簡単に画像を拡大・縮小する事が出来ます CSSのscaleを使ったデモ 画像の上にマウスポインターを乗せると上では拡大、下では縮小します いつもそのまま中央から拡大・縮小されます、分かりやすいように動作をアニメーションにしています コード HTML <div class="big"> <img src="img.jpg" alt=""> </div> <div class="small"> <img src="img.jpg" alt=""> </div> CSS img { margin-top: 68px; -webkit-transition:all 1s; -moz-transition:all 1s; -
ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト Jan 28th, 2013 Tweet Twitter Bootstrapはデザインが苦手なプログラマのための必須ツールです。今回は、一味違ったBootstrapサイトを作るときにきっと参考になるテンプレートをまとめてみました！ (03/05 追記) FlatUI、Bootstrap Expoを追加しました (03/24 追記) Flatstrapを追加しました (04/03 追記) MagicSuggestを追加しました (04/04 追記) Bootstrapのリソースネタを別の記事にしました 無料のテンプレート 無料のBootstrapテンプレートの紹介です。BootswachのようにCSSだけで適用できるものと、HTML/CSS/JSなどいろいろ追加しないと実現できないものがあります
We’re getting things ready Loading your experience… This won’t take long.
Free Bootstrap Templates What is a bootstrap template? A Bootstrap Template is a pre-made design built with Bootstrap framework - a web design kit for creating cross-browser, consistent and visually effective designs. The features that will make our Bootstrap themes interesting for you are their native Bootstrap functionality and unique add-ons specifically created by TemplateMonster developers. [
Bootstrap Magic 4.0 Create your Bootstrap 4.0 themes easily. Live preview, live HTML coding to help you create your Bootstrap 4.0 theme direclty in your browser Create your theme Github project Morbi Phasellus arcu Morbi molestie justo et finibus auctor. Nunc accumsan leo vel metus sollicitudin dapibus. Praesent rutrum nibh tincidunt sagittis mattis. Metus sollicitudin Morbi molestie justo et fini
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
-prefix-free Break free from CSS prefix hell! Only 2KB gzipped -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. “[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it.” — Eric Meyer Features Processes every stylesheet in <link> or <style> elements
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.8 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
対応中や対応済のチケットを認識しやすくするため、色分け表示します。対象ステータスNoのclassを指定してスタイルを記述します。 Watersky Redmine Theme 1.1 Google Code Archive - Long-term storage for Google Code Project Hosting. こちらのテーマに合わせて編集したものですが、通常テーマでも使えます。優先度で赤と青が使われているので、それ以外で。 /* yellow style */ tr.odd.status-2 { background: #ffe; } tr.even.status-2 { background: #fffff2; } tr.odd.status-2 td, tr.even.status-2 td { border-color: #ffc; } tr.status-2 td
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
