[CSS]ボタンのホバー時にアニメーションを適用するCSS3初心者向けのチュートリアル
ボタンのフォントとカラーをセットし、下線を消します。 .buttonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; } [ad#ad-2] 実装：アニメーションでボタンのサイズを変更 ボタンのサイズをアニメーションで変更します。 デモページ: demo 1 CSS:Basic ボタンに「display:block;」でブロック要素にし、ボタンの基本となるスタイルをセットします。 #button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px;
[CSS]シンプルなHTMLでタブを角丸にするチュートリアル（イラスト付き）
シンプルなHTMLでどのように角丸のタブを実装するか、分かりやすいイラストを交えたチュートリアルを紹介します。 Tabs with Round Out Borders デモページ [ad#ad-2] HTML HTMLは非常にシンプルで、リスト要素で実装しています。 <ul class="tabs group"> <li class="active"><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> <li><a href="#three">Four</a></li> </ul> classのactiveは、現在のタブを明示するものです。 リスト要素をどのように角丸のタブにするか、イラストでご紹介。
[CSS]CSS3非対応も配慮、通知パネルをブラウザの上部に配置するチュートリアル
アニメーションでスライドする通知パネルをブラウザの上部に配置するスタイルシートを紹介します。 実装では、CSS3アニメーション対応ブラウザと非対応ブラウザへの配慮もされています。 Pop From Top Notification [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ デモページでは、CSS3アニメーションをサポートするブラウザと非サポートブラウザでの挙動の違いを確認できます。 デモページ ※上部のイエローのパネルです。 CSS3アニメーション サポート アニメーションでパネルがスライド表示され、アニメーションで隠れます。 CSS3アニメーション 非サポート スタティックにパネルが表示され、クローズボタンのクリックで隠れます。 実装：パネルをブラウザ上部に配置 まずは、パネルをブラウザの上部に配置します。 HTML パネルはdiv要素で実装します。 <div id
[CSS]HTMLは汚さずに、ディテールにこだわったリボンをつくるチュートリアル
HTMLはclassを一つ追加するだけで、リボンを折り返したスタイルを適用するチュートリアルを紹介します。 Create a Swish CSS3 Folded Ribbon in Five Minutes デモページ [ad#ad-2] リボンの実装 HTML HTMLは非常にシンプルです。 h1要素にclassを付与するだけです。 <h1 class="ribbon">Swish CSS3 folded ribbon effect.</h1> Webフォントの設定 フォントも美しく表示されるように、Webフォントを利用します。 <link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'> このフォントはGoogle Web Fontの「Montez」を使用します。
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
50 Responsive Free jQuery Photo Gallery/Album With Tutorial
Category: Webdev Published: Wednesday, 08 June 2016 06:32 Written by vision widget jQuery image galleries and albums are very common on portfolio sites and are also useful for any other type of site for displaying images and photos. In this post we’ll see tutorials and plugins that can provide you with the resources that you need to get a gallery of slider on your site. You must have seen many of
Tripwire Magazine | Handpicked goodies for entrepreneurs, developers and web designers
The quality and availability of WordPress e-commerce themes makes WordPress a serious choice as an online shop platform. In fact, WordPress has moved rapidly from being mainly a blogging platform and is now one of the top CMS systems for traditional websites. Lately,... Welcome to our Website Awards for best free WordPress themes. We are hosting this award to showcase the best websites to visit wh
Basic Beginners' Guide to Installing a jQuery Lightbox
Home » Tutorials » Basic Beginners’ Guide to Installing a jQuery Lightbox Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more Learn how to install a jQuery lightbox, by following this easy, step by step tutorial. Check it out and start learning! Have you always wanted to add those cool Javascript lightbox
250+ HTML5 Tutorials. Roundup from DesignFloat | DesignFloat Blog
If you are close to the latest technologies and looking for the professional tutorials on HTML5, this weekly post is created especially for you. Today’s roundup features the resources regarding this new fundamental markup language for the web. These resources provide you with useful information for experimenting with the new HTML5 features and encourage you to try all of them. While browsing them,
jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル:phpspot開発日誌
Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ
Web Site Design Tutorial: Wellknown.as Case
Last month I met some guys that are working on a really nice project that involved an iPhone app. So they invited me to design the web site, called Wellknown.as. I loved the idea and started looking for references and inspiration so I could start the design itself. So in this tutorial I will show you a little bit of how I created it using Fireworks. Of course you can do the same thing in Photoshop
jQueryでタイピングゲームを作るチュートリアル:phpspot開発日誌
Typing Game with jquery jQueryでタイピングゲームを作るチュートリアル。 ページ内に表示されるボールに表示されたアルファベットをひたすら打っていくという単純なゲームになっていますが、意外と面白いです。 動作デモはこちら スピードを速めたり、制限時間を付ける等してより面白くすることが出来そうですね。 関連エントリ jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル 打ちやすいバーチャルキーボード実装が可能なjQueryプラグイン「VirtualKey」 jQueryを使った映り込みエフェクトがかかったイメージギャラリー リッチで使いやすいＵＩを作成するためのjQueryライブラリ＆サンプル集
jQueryでスライダー実装関連のチュートリアル２０:phpspot開発日誌
20 Useful jQuery Slider Tutorials - Web Design Blog ? DesignM.ag jQueryでスライダー実装関連のチュートリアル２０。 実に様々なスライダーの実装チュートリアルが公開されており、チュートリアルをこなすというより、サンプルとして活用することが出来そうです。 この手のUI実装にまよったら参考にしてみるのもよさそう。 関連エントリ 軽量のイメージスライダー実装jQueryプラグイン「Orbit」 なんでも埋め込めてマウスホイールでページ送りができるスライダー実装jQueryプラグイン「hash slider」 jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル ２つの要素を組み合わせたクールなスライダー実装jQueryプラグイン「dualSlider」
30 Best jQuery Plugins and Tutorials to Supercharge Wordpress | Web Design Tutorials and Inspiration | Learn Photoshop Online | Creative Inspiration | Web Resources
Today lets take a look at 30 of the best jQuery plugins and tutorials that will help you supercharge Wordpress.In the past we have discussed the power of jQuery in your web design and development…not to be outdone, there are a growing number of jQuery plugins and tutorials built for WordPress as well. For a long time now jQuery has been very popular and easy to use method of displaying text, image
[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル
画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w
[CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル
Keep Margins Out of Link Lists 下記は各ポイントを意訳したものです。 HTML：スタイルシート無しの状態 CSS：リンクをブロックレベルに CSS：さらによい実装方法 [ad#ad-2] HTML：スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ（当方作成） リストのアイテムはブロックレベル、リンクはインラインレベルになり、リンクのクリックできる領域はテキストの長さに依存するため、小さく窮屈なものになっています。 CSS：リンクをブロックレベルに a要素をブロ
[JS]かっこいいアニメーションを取り入れたポートフォリオギャラリーを実装するjQueryのチュートリアル
かっこいいスライドやフェードのアニメーションを取り入れたポートフォリオギャラリーを実装するjQueryのチュートリアルを紹介します。 Animated Portfolio Gallery with jQuery デモページ [ad#ad-2] 左側のサムネイルをクリックすると、前のコンテンツをフェードアウトし、次のコンテンツがオーバーレイで表示し、スライドのアニメーションで表示します。 デモページ（クリック時のキャプチャ） 元記事では、HTML, CSS, JavaScriptの全コードの解説をはじめ、全ファイルのダウンロードも用意されています。 スクリプトのオプションでは、フェードやアニメーションのスピード、アニメーションの種類などが調整できます。 [ad#ad-2] また、左側のサムネイルのスクロールに使用されているのは、「jquery thumbnail scroller」です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3、HTML5、jQuery、デザインなどウェブ制作のテクニックが動画で学べるサイト
Daftar 20 Situs Judi Slot Online24jam Terpercaya 2022 -
How to use FlexUnit in Flex - Ntt.cc