プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
え！Photoshop？って見間違うほどのUIを備えたCSSジェネレーター -LayerStyles
Photoshopのレイヤースタイルパネルを模したインターフェイスで、ドロップシャドウや角丸やグラデーションなどを生成できるCSSジェネレーターを紹介します。
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
エックスサーバー サーバー初期ページ
このウェブスペースへは、まだホームページがアップロードされていません。 早速、エックスサーバー上へファイルをアップロードしてみましょう。 アップロードの方法などは、サポートマニュアルをご参照ください。
duree dpe
Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par
2009年11月第1週号 1位は、今どきのCSSレイアウトの特徴、気になるネタは、日本版Twitter、「つぶやき」から「ツイート」に | gihyo.jp
週刊Webテク通信 2009年11月第1週号1位は、今どきのCSSレイアウトの特徴、気になるネタは、日本版Twitter、「つぶやき」から「ツイート」に ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2009年10月26日～11月1日の間に見つけた記事のベスト5です。 1. Modern CSS Layouts: The Essential Characteristics | Smashing Magazinehttp://www.smashingmagazine.com/2009/10/26/modern-css-layouts-the-essential-characteristics/ 今どきのCSSレイアウトについて5つの重要な特徴を紹介しています。 プログレッシブエンハンスメント
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
dtの方が高さが有る時のdt dd を横並び
久々に定義リストを横並びにしたら、IE7で上手くいかず、ちょっと苦戦したのでメモめもMEMO。 おそらく、ddがテキスト量などで高さがdtより多い場合は問題が無いんだろうけど、dtの方が高さがある場合、IE7だと上手い具合に回り込みが解決されない（っぽい dtの方が高さがある場合。っていうのは今回の場合は画像にdtが来て、ソレを定義付ける説明がちょろっとあるようなイメージ。 実際の表示は下のような感じ。 SQ Lifeのバナーです。 SQ Lifeのバナーです。 スタイルは以下のようになられます。 dl#sample_070228 dt { float:left; clear:both; width:125px; margin-right:10px; margin-bottom:20px; border-bottom:0; } dl#sample_070228 > dd { float:l
超クールなCSSデザインされたUIのレーティングシステムのサンプル:phpspot開発日誌
Rater ? Robarov: Webdesign, zoekmachine optimalisatie, hosting 超クールなCSSデザインされたUIのレーティングシステムのサンプル。 サンプルを使って次のようなカッコいいレーティングシステムを実装することができます。 デザインその１ デザインその２ いずれも、CSSによってデザインされており、HTMLは次のようにシンプル。 <ul id="rating"> <li id="r1"><a href="#1" title="give this site a 1"><span>Abysmal</span></a></li> <li id="r2"><a href="#2" title="give this site a 2"><span>Terrible</span></a></li> <li id="r3"><a href="#3"
MOONGIFT: よく使うスタイルをユーティリティ化「logicss」:オープンソースを毎日紹介
CSSを使うのが当たり前になり、Webエンジニアと言えどもある程度のデザインはこなす必要がある時代になっている。だがいざやってみると色々と大変なのがCSSでもある。 よく使われるスタイル指定や、テクニックをまとめてしまったのがこちらのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはlogicss、どこでも使えるCSSフレームワークだ。 logicssはがちがちな固定ではなく、通常使うタグを便利なように上書きしたり、サブセット化してくれる。例えばh-listというクラスは水平方向に、v-listというリストは垂直方向に項目をリスト化してくれる。 CSSを眺めてみるだけで、便利だと思えるスタイル指定も数多く登録されている。CSSの勉強材料としても良さそうだ。もちろん印刷時の設定もある。 また、サイトのグリッドを定義してくれるツールも付属している。これは指定した幅などで枠線やフォント
CSSデバッギングツール１０選:phpspot開発日誌
Man with no blog : CSS Debugging Tools - Gary Barber Seems lately that we are now starting to get a good spread of CSS and JavaScript (DOM Scripting) debugging tools available. CSSデバッギングツール１０選。 便利な各種ブラウザ用CSSデバッギングツールがまとまっていました。 XRay - ブックマークレット登録後、ページ内をクリックで情報を表示 YSlow - 先日Yahoo!がリリースしたパフォーマンス測定＆アドバイスツール (for Firefox) Dust-Me Selectors - 不要なCSSを調査して表示してくれるFirefox拡張 Web Developer - おなじみ、CSS用に便利機能を提
7 Advanced CSS Menus Roundup - noupe
New techniques are being developed and updated all the time for creating unique menu techniques. We keep an eye on the recent developments and collect new ideas and methods for our readers and after all the great appreciation this post got 13 Awesome Javascript CSS Menus, i thought it would be nice to get you a fresh round-up of 7 Advanced CSS Menus techniques, that might be useful for you in your
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
5509.me
http://memopad.bitter.jp/w3c/css/css_navbar.html
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix
//// COLOURlovers :: loving colours since 1981