CSSグラデーションの構文変更とベンダー接頭辞 | Web標準Blog | ミツエーリンクス
前回のベンダー接頭辞に関するエントリで、接頭辞なしの機能を併記してもうまくいかないことがあると書きました。 これは、標準化された（接頭辞のない）機能の構文もしくは解釈が変わってしまう場合を意図しています。そして、CSSのグラデーションでそうした変更が加えられています。 linear-gradient()のキーワードが変更に 少し前の話になりますが、9月8日に更新されたCSS3 Image Values草案では、linear-gradient()の構文で利用されるキーワードの書式が変更されています。 これまでの構文 linear-gradient( [deg | to side-or-corner] , color-stops) これまで、キーワードは、topなら下向きのグラデーション、rightは左向きのグラデーションなど、グラデーションの基点を示していました。 しかし、7月12日版の草案
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.
[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ
ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <
[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル
IE6などの非サポートブラウザも配慮した、角丸、ゼブラ柄、ハイライトなど美しくて分かりやすいテーブルを実装するCSS3のチュートリアルを紹介します。 デモページ:Zebra stripes, footer 角丸、セルを交互にカラーリング 実装のポイント CSS3を使って美しく、そして機能するテーブルを実装するポイントです。 画像を使用しないで、角丸を実装。 余分なid, classは使用せず、更新が容易。 ※tableにclassを一つだけ ユーザフレンドリーで、読むことが簡単。 実装 HTML HTMLは非常にシンプルです。 classは、tableタグにのみ使用します。 <table class="bordered"> <thead> <tr> <th>#</th> <th>IMDB Top 10 Movies</th> <th>Year</th> </tr> </thead> <tr
Thematic WordPress Theme Toolbox: 10 extremely useful hooks
Today, a website must not look good only on a desktop screen, but also on tablets and smartphones. A website is responsive if it is able to adapt to the screen of the client. Responsive web design is extremely important nowadays and is in fact one technique you need to master as a web developer or web designer. In this article, I’ll show you how to easily build a responsive site and how to apply r
CSSアニメーションの基礎
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
3D Ribbon Generator - CSS3d.net
Elements Add parent selector (i.e. "#content") Add wrapper selector (i.e. ".myribbon") Add shadows CSS 3 box-shadow Shadow on content Colors Front Back (left) Back (right) Edges Sizes (in pixels) Front width Ribbon height Back left width Back right width Left overlap width Right overlap width Left overlap distance Right overlap distance Top left overlap height Top right overlap height Bottom left
A Hand-Coded Designer CSS UI Kit
Web UI sets have been around for ages, but this takes things a step further. This free UI Kit is coded by hand using HTML5 and CSS3 so you can easily drop these elements into any project you're working on. This code is made to take advantage of modern browsers and to degrade gracefully in older versions of internet explorer, so no matter what your client or visitor is using they will be see an exc
13 Pure CSS Techniques for Creating JavaScript-like Interactions
24 Comments Hi Henry, nice showcase and thanks for including my tutorial here! Much appreciated! Very nice effect. Hope CSS3 is fully supported in all browsers soon. If only I could use these. Unfortunately, I still have to support IE6. When will that browser ever die? Very nice collection, but if you want some more don’t miss Bouncing Navigation (CSS3-Animation Tutorial)! Ha! CSS3 will definitely
「少しの手間で大きく変わる、細部にこだわったWebデザイン」をできるだけCSSでやってみた - 今日もスミマセン。
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス を読んで、「CSSだけである程度できそうだな」と思ったのでやってみた。 デモページ とりあえず完成品が見たい方は、ここ まず基本となるHTMLを用意する とりあえず、角丸四角形でボタンらしきものを作る。 <html> <head> <style type="text/css"> .buttonBase { position: relative; width: 300px; background-color: #3699D0; text-align: center; border-radius: 10px; cursor: pointer; } .caption { color: #02659C; font-family: impact; font-size: 40pt; font-weig
外部リンクにアイコンを付ける :: veefour's digital life
パソコン関係もろもろ忘れないためのメモ（備忘録）です。Windows、Linux、自作、ブログなどなど。 記事中にある外部リンクにアイコンを付けました。内部リンクはそのまま。 こちらの記事を参考にしました。 → [CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート CSSのセレクタを使って "http://" と "https://" で始まるリンクに対して、外部リンク用のアイコンを背景として表示するようにします。 ↓こんな感じ。（細かい設定は省略してます） a[href^="http://"], a[href^="https://"] { /* 外部リンクアイコン */ background:transparent url(外部リンクアイコンのパス) right center no-repeat; padding-right:12px; } 内部リンクに "htt
外部リンクや各ファイルに合ったアイコンを自動的につける｜web bibo
CSSで外部リンク、PDF、Excel、Word、zipなどのファイルへのリンクにアイコンを自動的に付ける方法です。 HTML <p><a href="http://webbibo.com/">ホームに戻る</a></p> <p><a href="http://www.google.co.jp/" target="_blank">GoogleのTOPページ</a></p> <p><a href="test.pdf">Webアンケート結果</a></p> <p><a href="test.doc">FAX送付状</a></p> <p><a href="test.xls">月別売上集計表</a></p> <p><a href="test.zip">アクセス解析プログラム</a></p> CSS p a{ padding:4px 20px 4px 0; } a[href^="http"]{bac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
css3-mediaqueries-js - Project Hosting on Google Code
css-eblog.com
http://www.onlinecasinodemar.com/webdesign/xhtml-css/beeindruckende-effekte-mit-der-css-eigenschaft-text-shadow/
Media Queries
http://lab-five.com/2010/08/neighbour_selecter/
Demo: CSS drop-shadows without images – Nicolas Gallagher