Cross-Browser CSS Gradient
The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check ou
少しのコードで実装可能な20のCSS小技集
少しのコードで実装可能な20のCSS小技集CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能な CSS 小技集 シリーズ【第 2 弾】少しのコードで実装可能な 20 の CSS 小技集【第 3 弾】少しのコードで実装可能な 15 の CSS 小技集まずは CSS 基礎編1. div を中央揃えにするほとんどのサイトが基準となる div を画面の中央揃えに設定しています。左右の margin を auto にして中央揃えに。 3. 複数のクラスを指定実はクラスは一度に複数指定できます。スペースを空け
Top 10 Html/CSS Web Templates Of March 2010 For Free Download
Top 10 Html/CSS Web Templates Of March 2010 For Free Download By Vikas on Apr 6th, 2010 in Design Save On Delicious Share When we are thinking about creating a Website, then we mostly go to some free templates website where we can find some predefined Web templates. These templates are always helpful to you. Thanks to all kind & generous designers and developers who have put in lots of effort a
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
画像置換 height: 0;バージョン 修正版 | A Day in the Life
July 25, 2009 以前エントリーした記事、画像置換 height: 0; バージョンで少々不具合があったので修正版をエントリーしておきます。 何が不具合だったかと言うと、a要素にheight: 0、overflow: hiddenを指定していても一部のブラウザでテキストが見えてしまう時がありました。この問題はa要素に指定していたoverflowプロパティを親要素であるliに指定し、置き換える画像の高さを指定することにより回避出来ます。 XHTML <ul id="globalNav> <li id="nav1"><a href="#">Nav1</a></li> <li id="nav2"><a href="#">Nav2</a></li> <li id="nav3"><a href="#">Nav3</a></li> <li id="nav4"><a href="#">Nav4
Web制作に役立つサイト集 – creamu
6133716, Hemera/ Thinkstock Web制作の参考になる情報を探している。 そんなときにおすすめなのが、『All Showcases』。Web制作に役立つサイト集です。 CSSやFlashなどのカテゴリーに分けて、かなりたくさんのサイトがまとまっていますね。 いくつかご紹介します。 CSS Best CSS Design ブログ型のCSSデザインギャラリー CSS Flavor クールなサイトを集めたCSS Flavor Flash Design Charts 週刊のかっこいいFlashサイトランキング DOPE Awards クールなFlashサイトをグリッド状に並べているDOPE Awards その他 CMS Showcase CMSで構築されたサイトギャラリー We Love WP 美しいWordPressで作られたサイトのデザインギャラリー サイト名やUIもか
Moving Domains - Balkhis is now SyedBalkhi.com
In 2008 when I launched my personal blog to share my experiences, I decided to call it Balkhis instead of using my full name (Syed Balkhi). As time passed on, I regretted that decision because it created a lot of confusion. People thought that my last name was Balkhis instead of Balkhi. I basically combined my last name with the first letter of my first name. I was @syedbalkhi across all social me
Sponsor Flip Wall With jQuery & CSS
Designing and coding a sponsors page is part of the developer's life (at least the lucky developer's life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design. We ar
web制作者のための2009年話題になったサービスいろいろ
ちょいと古めのうっとりくるサービスやエントリーを持ってきました。 なんて事はない。私がお勧めする2009年度に話題になったwebサービスや、ジェネレータを中心に、厳選してお届けいたします。 Twtiiter関連多し Twitterプロフィール検索 その名のとおりついったーのプロフィールを検索する検索エンジン。同じような趣味を持っている人を探すときなどに使われる。 ついったーの友人関係を可視化するwebサービス 友人関係というか会話関係があられもない姿で現れる恐ろしいサービス。 TweetLevel ついったーの影響力を測定するサービス。 影響力というか戦闘力。やってる事は単純なサービスなんだけど、こうやってしっかりデザイン組んで作り上げるところが本当に参考になった。どんなサービスであれ、愛情は見習わなければならない。 Twib - Twitter ホットエントリー Twitterでのホッテ
WordPressプラグインを使わずに記事ごとにcssを加えられるようにするカスタマイズ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 記事単体に別のcssを加えられるようにする為のメモ。プラグインは使いたくないよ、という方向けのカスタマイズ方法になります。functions.phpで投稿画面にcssの追加用boxを作成します。 ※追記・プラグインにしました 記事ごとにスタイルを追加出来るように、投稿画面にcss追加用のboxを加える為のカスタマイズ。add-css-jsなら簡単ですが、カスタムフィールドが個人的に面倒だったのでfunctions.phpを使いました。 方法 ↑ こんな感じでcss追加用のboxを作成します。お使いのテーマファイルのfunctions.phpを開いて以下のコードを追加するだけ。 add_action('admin_menu', 'custom_css_hooks');
How to work with Node.js App - Hosting - Namecheap.com
Our Setup Node.js App feature allows for the choosing a specific version of Node.js in order to run the apps using Node.js 6.x, 8.x, 9.x, 10.x, 11.x, 12.x, 14.x, 16.x, 18.x, 19.x, 20.x, 22.x and 24.x versions. The currently available Node.js version pool on our Shared servers is available at this page. This function provides ultimate flexibility and features a user-friendly interface that helps yo
YUI 2: Reset CSS
YUI Reset CSS The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions. Note: YUI Base CSS (introduced in version 2.3.0) can compliment Reset by applying a style foundation for common HTML elements that i
Reset Reloaded
After a bit of time to bake and a few more suggestions from readers, I have what I’m willing to call the final version of my take on the topic of reset styles. To wit: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt,
div等に指定した背景をページの下まで伸ばしたい | Takazudo Clipping*
背景を下までずずーっと伸ばしたい時は、bodyにbackground-imageを指定すればよいですが、div等に指定した背景やborderをページの下まで伸ばしたい時は、以下のようにします。 <body> <div id="Container">高さ100%</div> </body> *{ margin:0;padding:0; } html{ height:100%; } body{ height:100%; } #Container{ height:100%; min-height:100%; width:80%; background:Khaki; border-right:1px solid red; } body > #Container{ height:auto; } 下まで背景伸びたHTML完成サンプル 以下、なぜこれで実現できるのかの解説と疑問点。とても長い。 Step
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://aext.net/2010/04/jquery-shadow-motion-effect
CSS Lecture: CSSで可変対応した角丸のボックスを作る その2
マウスオーバーをデザインする | DesignWalker
わずか四文字でIE6/7/8を区別するCSSハック | コリス
レタープレスエフェクトのチュートリアル、あなたは画像派？ CSS派？
ピュアCSSで実装された吹き出しのデザイン例色々:phpspot開発日誌