利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
[CSS]ホバー時に素敵なエフェクトでパネルを変更するスタイルシート | コリス
animated icon on hover デモページ [ad#ad-2] デモではパネルにマウスホバーすると、背景を変更しアニメーションのエフェクトを適用します。 実装方法 HTML HTMLはシンプルです。 ポイントとなるのは、h3やpなどのブロック要素をa要素で内包している点です。これはHTML5を使用する限りvalidです。 <!doctype html> <html lang="en"> <head> </head> <body> <a href="#" class="hover-panel"> <h3>Panel Title</h3> <p>Additional information about the panel goes in a paragraph here</p> </a> </body> </html> [ad#ad-2] CSS：ノーマル時のスタイリング まずは
[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS：シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
Creating a CSS3 Dropdown Menu #2Script Tutorials - Web Development Tutorials
CSS3 Dropdown Menu #2 tutorial. This is our second drop down menu. Today it is in the green palette. The menu will include a submenus that will slide when we hovering the parent elements. That menu will good for green palette templates. And of course – no any JS – only pure CSS. Since this menu is made using CSS3 – it renders perfect on Firefox, Chrome and Safari browsers (possible last Opera will
[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。 このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。 デモページ 左から、ノーマル、ナロウ、ス
CSSPrefixer
keep your styles clean You hate writing vendor prefixes for all browsers? Just let CSSPrefixer do it for you! See it in action: .my-class, #my-id { border-radius: 1em; transition: all 1s ease; box-shadow: #123456 0 0 10px; } Installation easy_install cssutils (or pip install cssutils if you have pip) Usage: From console cssprefixer my1.css my2.css --minify > result.css From Python import cssprefix
スマートフォン向けサイトのラジオボタンを良さ気な感じに。
昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。 なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。 ラジオボタンといえば、よく見かけるのは性別の選択とかでしょうか。 何にせよ、下記のような感じです。 ラジオボタン1 ラジオボタン2 んで、これをiPhoneとかで見ると、何の変哲もない普通のラジオボタンですが、iPhoneってラベル部分をタップしても選択できなかったりして使い勝手が悪いと思ったりしませんか？ ボクが持ってる、iPod Touch では反応してくれなかったです。 そこで、ラジオボタンをもっと良さ気なボタンっぽくしてみたら良いんじゃないかと思ったのでやってみました。 サンプルはiPhoneかwebkit系ブラ
Gradient Button CSS: Create Stunning Effects
Not long ago, I delved into the realm of CSS cross-browser gradients, and just last week, I revisited the topic, delving once more into the world of CSS3 gradients. Now, you might be wondering, what’s on the agenda for today? Well, today’s agenda involves unveiling a practical application for the CSS gradient prowess. Within the confines of this piece, you’ll be privy to the art of employing CSS g
[CSS]CSS3 Transitionsを使用して、ホバー時に繊細なアニメーションを与えるスタイルシート
a要素に余白をpaddingで設定し、カラーを指定します。 a.foo { padding: 5px 10px; background: #9c3; } a.foo:hover { background: #690; } [ad#ad-2] 繊細なアニメーションを与えるスタイルシート CSS3 Transitionsを使用して、ふわっと繊細なアニメーションを与えます。 デモページ（当方作成） 追加するのは、L4-7です。 ※デモページではpaddingなどの値を若干変更しています。 a.foo { padding: 5px 10px; background: #9c3; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: al
CSS3 Menu. Free CSS Menu Maker
Fancy Drop Down Menus with Pure CSS! Create responsive, mobile-friendly web menus with CSS only. Light, fast, gorgeous menus - completely code-free. FREE download More demos Overview CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amaz
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
Creating a Realistic Looking Button with CSS3 | Inference
I had previously created the Cadmus “post” button in Photoshop and it was essentially three images for the different states. I wanted to use this style for all our buttons, but doing it with single images is not a good idea. So I set about creating the same style of the buttons with CSS3. And this is what I ended up with. I want to go into detail on the steps I took to create the button and the ef
CSS3Generator by @RandyJensen
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s w
CSS3 Please! The Cross-Browser CSS3 Rule Generator
CSS3, please! This element will receive instant changes as you edit the CSS rules on the left. Enjoy! /* ------------------------------------------------------------- CSS3, Please! =================================================== Update: We recommend using Autoprefixer instead of CSS3Please. You can edit the underlined values in this css file, but don't worry about making sure the corresponding
CSS3 Dropdown Menu - Web Designer Wall
While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow wi
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.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins
NameBright - Coming Soon
[CSS]角丸を少しでも滑らかに実装するスタイルシートのテクニック
Loading...