サイト構築 -CSS

[CSS]さまざまなスタイルのツールチップが簡単に実装できるSassでつくられた -Simptip

Post on:2013年11月7日

classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。

...記事の続きを読む

[CSS]コンテンツを水平・垂直にぐぐぐっと傾けてナビゲーションを表示するスタイルシート

Post on:2013年11月7日

最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。 Animated CSS3 Perspective Menu

[CSS]文字にちょっとかわいいエフェクトを加えるスタイルシート -Opening Type

Post on:2013年10月29日

画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ!

デザインの勉強にもなる、CSSで実装するパンくずのまとめ

Post on:2013年10月28日

角丸や三角形、アイコンなどを添えたり、CSS3アニメーションを加えたりなど、CSSで実装するパンくずを紹介します。 機能的にはもちろんシンプルなテキストベースのものと同じですが、サイトのUIにあったデザインのパンくずも素

...記事の続きを読む

[CSS]アイデアが面白い!画像に美しいインタラクションを加えるスタイルシート

Post on:2013年10月18日

風景写真など、普通の画像の上にグリッドを描き、各マス目をホバーした際に尾ヒレのようにフェードで追従させるエフェクトが美しいスタイルシートを紹介します。 便利になるとかそういった類いのものではありませんが、ちょっとした何か

...記事の続きを読む

[CSS]日本語にもマッチする、見出しの文字をかっこよくするスタイルシートのまとめ

Post on:2013年10月16日

スタイルシートで文字を装飾すると、かっこいいのは英語が多いですが、今回紹介するのは日本語にもなかなかマッチするスタイルを紹介します。

さりげないアニメーションがいい感じ、HTML/CSSでシンプルに実装するタブコンテンツ

Post on:2013年10月8日

スクリプト無し、HTMLとCSSで実装するシンプルなタブコンテンツを紹介します。 コマ数を落としているから、アニメがうまく見えてないかも

[CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック

Post on:2013年10月7日

1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとア

...記事の続きを読む

[CSS]スマフォでも印刷してもレイアウトが紙のように美しいフォームを実装できる -Grid forms

Post on:2013年10月4日

デスクトップでの表示はもちろん、スマフォやタブレットでも、そして印刷してもかっこいいレイアウトのフォームを実装できるスタイルシートのフレームワークを紹介します。 将来的にはスクリプトを使って、機能を強化していくようですよ

...記事の続きを読む

[CSS]シャドウもくるっと!ふわりと浮かせた画像をくるっと回転させるスタイルシート

Post on:2013年9月4日

画像にシャドウをつけてふわりと浮かせ、そのシャドウごとくるっと回転させるスタイルシートを紹介します。 シャドウ用の余計なマークアップは必要ありません。 CSS 3D Image Flip Gallery With Dyn

...記事の続きを読む

top of page

©2024 coliss