jQueryとCSS3を使った円形の画像がフリップするスライドショー – creamuKunitaka Kawashimo アートディレクター・デザイナー・フォトグラファー。株式会社クリーム代表取締役。グラフィックデザイン／Webデザイン／撮影の仕事のご相談・ご質問は、お気軽に以下までご連絡ください。info@creamu.co.jp
新しいものを制作できる予感！垂直・水平のリズムを大切にしたレイアウトを組み立てるフレームワーク -xy.css
Documentation -xy.css Step 1: ダウンロード xy.cssを下記ページからダウンロードします。 ダウンロード -xy.css Step 2: 水平のグリッド設計 HTMLは非常にシンプルで、classなど余計なものは一切ありません。 <header></header> <article></article> <aside></aside> <footer></footer> 天地にヘッダとフッタ、コンテンツとサイドバーを2カラム水平に配置します。 header, footer { width: 100%; } article { width: 66.6667%; float: left; } aside { width: 30.769231%; float: right; } Step 3: 垂直のグリッド設計 articleとaside内に、見出しとパラグラフ
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation
ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na
[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners
デモページ 実装 Step 1: HTML パネルは4つのコーナーのエフェクトを疑似要素で作成するため、2つのdiv要素で実装します。 <div class="tucked-corners-top"> <div class="tucked-corners-bottom"> <!-- コンテンツ --> </div> </div> Step 2: CSS 「[class*='tucked-corners-']」以下が、4つのコーナーのスタイルです。 .tucked-corners-top { position: relative; width: 500px; min-height: 200px; margin: 100px auto; padding: 20px; background-color: #fff; /* Fallback */ background: linear-gradie
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com
[CSS]永遠にスクロールしていたくなる、気持ちいいエフェクト -CSS Scroll Effects
CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery