JavaScriptは使用せず、CSSのみで展開時にちょっとしたアニメーションも加えたシンプルなドロップダウンメニューのサンプルです。 最近ではスマートフォンやタブレットに対応させたりレスポンシブ対応したりで、クリック時にも対応とかウィンドウサイズによって見栄えを大きく変えるといったものが多いとは思いますが、こちらは主にPCで使用するような単純にhoverで展開されるタイプのものになります。 はじめに 以下で紹介しているドロップダウンメニューは、全て下記のようなHTMLとベースとなるCSSが指定してあります。 <ul> <li><a href="#">nav</a></li> <li> <a href="#">nav</a> <ul> <li><a href="#">sub nav</a></li> <li><a href="#">sub nav</a></li> <li><a href=
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
本書のサンプルサイトの背景をファブリック調にして、デザインも背景にあわせて少しだけ変えてみましょう。 HTMLは変更せず、CSSの修正だけでかなりデザインイメージを変えることができます。新たなCSSプロパティを覚えることはありません。 書籍内で登場するCSSプロパティだけでデザインを変更してみましょう。 デザインをナチュラル系に変更したサンプルサイトを見る 左のような継ぎ目の目立たない背景画像を用意します。 ここでは、「【解説】背景画像を指定する（P181）」に登場する背景画像「bg1.png」を利用します。 「/common/images/bg1.png」となるようにフォルダに配置しましょう。
In this tutorial, we look at four different ways of styling CSS buttons that will add a little extra flavour to your site. Each button will have an appearance by default, on hover, and when active. Get Source View Demo Out with the old, in with the new. We’re in a day and age where we need to simplify our stylesheets and lighten our page loads to be efficient across all devices on all connections.
In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements. The HTML The first step is to define the HTML backbone of the website. We are using HTML5 tags extens
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
Lea Verou 氏の Blog に、CSS のみで、Google の Web アプリケーションで使われているようなプリローダー （画面ロード中に表示されるインジケーター） を作るっていう記事がアップされていましたので紹介。 CSS だけで再現しているため、サイズの調整などにも柔軟に対応できます。 Flexible Google-style loader with CSS ： Lea Verou 基本的には元記事のソースコードを見ればわかると思いますので、簡単にだけ紹介しますが、プリローダーの HTML に関しては、下記のような感じでシンプル。 <div class="progress">Loading...</div> 元記事ではサイズバリエーションのため、下記のような class を追加したものも併記されています。 <div class="small progress">Loadin
So, for a while I had noticed the nice sutble loader Google apps use and I was wondering if it would be easy to make with CSS and CSS animations: Yesterday, I realised that you can get this effect by increasing border size until about the middle of the element, as long as the total width stays the same (by using box-sizing: border-box): However, as you can see above, after the midpoint, the border
YouTube Fill from left Fill from down Expanding box 3D Bar Bottom Pie Timer Centered Expanding Line Fill Sides Surrounding Borders Corner indicator Big Counter Filling Title Flat Top Bar Loading animations don't have to be restricted to a tiny indicator. Here is some inspiration for some creative loading effects.* *Note that not all browsers support animated pseudo-elements (last four effects).
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! It’s a common need in web apps: you click something and the text of the thing you just clicked changes. Perhaps something simple like a “Show” button that swaps to “Hide”, or “Expand Description” to “Collapse Description.” This is a fairly simple thing to do, but there are various considerat
Responsive Navigation... Navigation patterns in responsive web design can be tricky to tackle - especially while keeping a consistent look, feel, and experience on your site. Your website's navigation is how users get around on your website and discover all that you have to offer. So when your site is viewed on smaller screens - make sure it's still easy to navigate. I've put together a list of po
CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a
1つ前のエントリーで、:target 疑似クラスを利用した CSS だけで作るタブ切替 UI を実装してみるテストしてみました。詳しいことは下記のエントリーをご覧ください。 CSS だけで作るタブ切替ユーザインタフェース 先のエントリーで作ったサンプルは、position: absolute; を使って、各タブの内容を重ねちゃった上で表示を切り替えるっていう方法を使ったのですが今回は、float プロパティを使ったサンプルを紹介してみます。 実際のサンプルは下記に。 CSS だけで作るタブ切替ユーザインタフェース サンプル 最新の Firefox、Google Chrome、Safari、Opera など、:target 疑似クラスに対応したブラウザであれば問題なく動作するはず。IE は IE9 以降のみ。その他、スマートフォンなどでは動作に問題ないと思います。 HTML はほぼ変更なし
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The align-items property is related to CSS layout. It effects how elements are aligned both in Flexbox and Grid layouts. .container { display: flex; align-items: flex-start; } align-items in Flexboxalign-items in Grid Syntax align-items: flex-start | flex-end | center | baseline | stretch Th
Description The problem with most CSS3 based breadcrumbs is that they use border based triangles for the arrows which is awful because: 1. Hover effects are not pixel perfect - hovering on the arrows creates issues because they appear to be triangles but occupy a square region. So hovering/clicking at the edge of a link could trigger the event on the next/previous link actually. 2. You cannot use
In this tutorial we'll walk through four variations of patterns where navigation and page content is placed off canvas to conserve space until requested. It's time to stop copying and pasting, let's start understanding! To recap, the first in this series focused on patterns where the navigation remained in the header. The second looked to patterns that moved the navigation to the footer. The third
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く