タグ

関連タグで絞り込む (32)

タグの絞り込みを解除

CSSとcssに関するkasumaniのブックマーク (38)

  • [CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック


    ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させるスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルなので、簡単に利用できると思います。 Rotating menu 実装 HTML HTMLは非常にシンプルです。 <nav> <a href="#">Home</a> <a href="#">About us</a> <a href="#">Serviсes</a> <a href="#">Contacts</a> </nav> CSS ナビゲーションの各アイテムはflexboxで配置し、くるくるっとしたアニメーションはtransformで設定します。 body { font-family: "Open Sans Condensed" sans-serif; display: -webkit-flex; display: -ms-fle
    [CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック
    kasumani
    kasumani 2015/01/08
    水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック Tags: feedly, ifttt, recently read, saved for later from Pocket January 08, 2015 at 10:53AM via IFTTT
    リンク

  • [CSS]スクリムを使ってちょっとリッチなアイキャッチを作る覚書 | WP-kyoto


    CSS Advent Calendar 2014 24日目です。 Photoshop VIPの﹁ゴージャスなUIデザインを作成する7つのルール﹂という記事にて﹁スクリム﹂というデザイン手法が紹介されていました。 今回はこ […] CSS Advent Calendar 2014 24日目です。 Photoshop VIPの﹁ゴージャスなUIデザインを作成する7つのルール﹂という記事にて﹁スクリム﹂というデザイン手法が紹介されていました。 今回はこの﹁スクリム﹂とアイキャッチ・記事タイトル部分に適用させる方法を紹介します。 スクリムとは？ ﹁スクリム﹂は写真撮影用機材のひとつで、反射する光を和らげる効果があります。これはビジュアルデザインにおいて、イメージ画像上のテキスト文字を読みやすくしてくれるテクニックと同じです。よりWebサイトをズームアウトすると、文字の下にだけ影が表現されているのが
    [CSS]スクリムを使ってちょっとリッチなアイキャッチを作る覚書 | WP-kyoto
    kasumani
    kasumani 2014/12/24
    スクリムを使ってちょっとリッチなアイキャッチを作る覚書 Photoshop VIPの「ゴージャスなUIデザインを作成する7つのルール」という記事にて「スクリム」というデザイン手法が紹介されていました。 Tags: feedly, ifttt, recently rea
    リンク

  • [CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ

    divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。

    [CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ
    kasumani
    kasumani 2014/12/02
    素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ Tags: from Pocket December 02, 2014 at 05:30PM via IFTTT
    リンク

  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

    サービス終了のお知らせ - NAVER まとめ
    kasumani
    kasumani 2014/10/26
    floatを使わないで要素を横に並べる方法を使ったデザイン例 - NAVER まとめ Tags: from Pocket October 26, 2014 at 02:54PM via IFTTT
    リンク

  • [CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs

    一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。 デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種

    [CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
    kasumani
    kasumani 2014/10/22
    一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, O
    リンク

  • [CSS] 台形をつくる（角を丸くしてみたり、中に文字を入れてみたり。） - Qiita

    Help us understand the problem. What is going on with this article?

    [CSS] 台形をつくる（角を丸くしてみたり、中に文字を入れてみたり。） - Qiita
    kasumani
    kasumani 2014/07/13
    台形をつくる（角を丸くしてみたり、中に文字を入れてみたり。） 0 ストック 0 コメント この投稿をストックする まずは普通に台形を作ってみます。 trapezoid.html trapezoid.css . Tags: ifttt, kasumaniのストックした投稿 - qiita from Po
    リンク

  • [CSS]OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート


    昨日発表された2014年秋リリースのOS X 10.10 Yosemiteで採用予定の背景を半透明のブラーで透けさせる美しいパネルを実装するスタイルシートを紹介します。 記事は一日遅れですが、スタイルシートは当日で、仕事が早いですｗ OS X Yosemite Style UI※Chrome, Safari, Firefox, IE11でどうぞ。 コードは、簡略化するとこんな感じになります。 実際のコードは上記ページを参考にしてください。 HTML タイトルのバーとコンテンツをdivで実装し、articleで内包します。 <article> <div class="title"> <h1>タイトル</h1> </div> <div class="content"> <p>コンテンツ</p> </div> </article> CSS 半透明のパネルのスタイルシートです。 *, *:aft
    kasumani
    kasumani 2014/06/06
    OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート 記事は一日遅れですが、スタイルシートは当日で、仕事が早いですｗ ドラッグで移動もでき、透ける背景も変わります。キレイですね！ Tags: feedly, ift
    リンク

  • [CSS]ボタンにぷるるんとかわいいアニメーションを与えるスタイルシート -Galatin effect

    a要素にテキストを配置して実装したシンプルなボタンに、ゼリーのようにぷるるんとさせるアニメーションを与えるスタイルシートを紹介します。 ↓は、デモをアニメーションgifにしてみました。 Gelatin over button effect with Sass HTML HTMLは非常にシンプルです。 <a href="#" class="btn">Click Here</a> <a href="#" class="btn btn-secondary">Click Here</a> CSS スタイルシートは少々長いですが、こぴぺでそのまま利用できます。 Sass版は、Gelatin effectをご覧ください。 a.btn { display: inline-block; margin: 15px 15px 0; padding: .6em 1.1em; font-size: 26px; f

    kasumani
    kasumani 2014/05/22
    ボタンにぷるるんとかわいいアニメーションを与えるスタイルシート -Galatin effect a要素にテキストを配置して実装したシンプルなボタンに、ゼリーのようにぷるるんとさせるアニメーションを与えるスタイルシートを紹介し
    リンク

  • [CSS]シンプルな美しいボタンを簡単に実装するだけのスタイルシートの超軽量ライブラリ -beautons


    使い勝手のよいさまざまなスタイルのシンプルなボタンを実装するだけのライブラリというか、スタイル集を紹介します。 スタイルシートは1.4kbで、超軽量！ beautons beautons -GitHub 使い方は非常に簡単で、外部スタイルシートを記述し、各ボタンにclassを加えるだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に記述します。 <head> ... <link rel=stylesheet href=beautons.min.css> </head> Step 2: HTML ボタンで使用する要素に﹁.btn﹂を加え、個別のスタイルを適用します。 <!-- ベーシックなボタン --> <a href="#" class="btn">Button</a> <!-- 個別のスタイルを適用したボタン --> <a href="#" class="btn bt
    kasumani
    kasumani 2014/05/08
    シンプルな美しいボタンを簡単に実装するだけのスタイルシートの超軽量ライブラリ -beautons 使い勝手のよいさまざまなスタイルのシンプルなボタンを実装するだけのライブラリというか、スタイル集を紹介します。 使い方
    リンク

  • awesome-css-tutorials-2014-spring.html


    CSSの進化が止まりません。 ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します。 Zig Zag Border Created CSS 最近見かけるようなったジグザグのボーダー。画像の使用はなし、divの三角形をたくさん並べるでもなく、普通にdiv一つだけで実装できます。区切り線としてもパネルの飾りとしても利用できます。 SVGを使った版はこちら、Pinked Border
    kasumani
    kasumani 2014/04/25
    次のプロジェクトで使える！スタイルシートの極上テクニックのまとめ Tags: feedly, ifttt, recently read, saved for later from Pocket April 27, 2014 at 09:29PM via IFTTT
    リンク

  • [CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック

    画像を使用せずに、多階層のリストをツリー状にデザインするスタイルシートのテクニックを紹介します。 ピュアCSSなので、リストのアイテムは増やしても減らしても、ツリー状のスタイルを適用できます。 Parent child vertical list menu コードはこんな感じです。 HTML リストは階層ごとに入れ子を使用します。 コードは、CodeのjQueryまで。 <nav class="nav"> <ul class=list> <li> <a href="#">Home</a> <ul> <li> <a href="#">Lab</a> <ul> <li> <a href="#">Code</a> <ul> <li> <a href="#">Html</a> </li> <li> <a href="#">Css</a> </li> <li> <a href="#">Jquery<

    kasumani
    kasumani 2014/04/21
    多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック 画像を使用せずに、多階層のリストをツリー状にデザインするスタイルシートのテクニックを紹介します。 ピュアCSSなので、リストのアイテムは
    リンク

  • [CSS]デモが楽しい！要素にclassを与えるだけでさまざまなCSS3アニメーションを適用するスタイルシート -Magic

    Slide, Math, Tin, Bomb Magicの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="yourpath/magic.css"> </head> Step 2: 要素にアニメーションを指定 アニメーションはmagic.css単体で動作しますが、jQueryと組み合わせることでユーザーのさまざまなアクションをトリガーにすることができます。 まずはjQueryのセレクタで要素を指定し、例えばホバー時にアニメーションさせる時はこんな感じに。 $('.yourdiv').hover(function () { $(this).addClass('magictime puffIn'); }); 特定の時間、ループでアニメーションさせる時はこんな感じ。 setInt

    kasumani
    kasumani 2014/04/13
    デモが楽しい！要素にclassを与えるだけでさまざまなCSS3アニメーションを適用するスタイルシート -Magic 要素をアニメーションでスライドさせたり、ペラッとめくったり、ワイプさせたり、回転させたり、フェードさせたり
    リンク

  • [CSS]画像にキャプションをさまざまなCSS3アニメーションで表示するスタイルシート、コピペで簡単に利用できます -iHover

    デモページ：スクエア iHoverの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 ※スクリプトは不要です。 <head> ... <link href="styles/ihover.css" rel="stylesheet"> </head> Step 2: HTML 基本的にはノーマル時に表示するサークル（スクエア）とホバー時のものをdivで内包します。細かい点が各デモごとに異なるので、それぞれのデモページを参考にしてください。 Effect 1だと、こんな感じです。 <div class="row"> <div class="col-sm-6"> <!-- normal --> <div class="ih-item circle effect1"><a href="#"> <div class="spinner"></div> <div cl

    kasumani
    kasumani 2014/04/08
    画像にキャプションをさまざまなCSS3アニメーションで表示するスタイルシート、コピペで簡単に利用できます -iHover スクリプトは不要、ピュアCSSで画像ホバー時にさまざまなCSS3アニメーションでキャプションを表示するス
    リンク

  • [CSS]div要素一つでパンツを実装♪


    Underpants このイラストにインスパイアされて、実装したそうです。 実装は、こんな感じ。 � HTML HTMLは、空のdiv要素一つです。 <div class="underpants"></div> CSS CSSはちょっと長め。 カラーはお好みのものに変えて、簡単に利用できます。 .underpants { width:20em; height:13em; background: #82e1ec; margin:0 auto; border-radius:0em 0em9em9em; border:0.7em solid #00373f; overflow:hidden; position:relative; box-shadow:inset 0em 1.4em 0em #fff, inset 0em 2.1em 0em #00373f; display:inline-b
    kasumani
    kasumani 2014/03/29
    div要素一つでパンツを実装♪ アイデアの元となったのは、こちらのイラスト。 このイラストにインスパイアされて、実装したそうです。 実装は、こんな感じ。 Tags: feedly, ifttt, recently read, saved for later from Pocket March 29, 2014 at 1
    リンク

  • たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス


    iframeを使った地図Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
    kasumani
    kasumani 2014/03/26
    この発想はなかった！たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity 画像やテーブル、地図などを配置するiframe, video, canvas, svgなど、主にボックス系のHTML要素をシンプルなコードでレスポン
    リンク

  • [CSS]画像やボタンなどのクリック・ホバー時にCSS3アニメーションを簡単に与えることができる -All Animation


    画像やボタンなどの要素にclassを与えるだけで、さまざまな面白いCSS3アニメーションを利用できるスタイルシートを紹介します。 トリガーにjQueryを使うことで、クリックやホバーなどのアクションでも簡単に利用できます。 All Animation All Animation -GitHub All Animationのデモ All Animationの使い方 All Animationのデモ デモでは数多くのCSS3アニメーションが楽しめます。 ほんの少しですが、gifアニメーションにしてみました。 ぶるぶる震えて拡大して、フェードでスライドして、ぱたっと開いて、ぷら〜んと落ちます。 実装できるアニメーションの一覧 All Animationの使い方 アニメーション自体はCSSで、クリックなどのトリガーにjQueryを使用します。 もちろん、ホバーなど他のアクションを利用することもでき
    kasumani
    kasumani 2014/03/04
    画像やボタンなどのクリック・ホバー時にCSS3アニメーションを簡単に与えることができる -All Animation 画像やボタンなどの要素にclassを与えるだけで、さまざまな面白いCSS3アニメーションを利用できるスタイルシートを紹介
    リンク

  • [CSS]このホバーエフェクトかわいい！蝶番を軸にぷら〜んと開くCSS3アニメーション


    Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。 パタリと開いた後、ぷら〜んとするのいいですね。 Hinged Twitter Button 実装は、こんな感じです。 HTML TwitterのアイコンにはFont Awesomeが使われており、アイコン、アカウント、蝶番をそれぞれspan要素で配置しています。 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <a href="http://twitter.com/jonitrythall"> <span class="button"> <i class="fa fa-twitter"></i> </span> <span cl
    kasumani
    kasumani 2014/02/27
    このホバーエフェクトかわいい！蝶番を軸にぷら〜んと開くCSS3アニメーション Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。 パタリと開いた後、
    リンク

  • [CSS]アイコンのデザインに合ったかわいい動きをclassを加えるだけで実装できるスタイルシート -Font Awesome Animation

    classを加えるだけでさまざまなアイコンが利用できるFont Awesomeを使って、各アイコンのデザインに合ったかわいい動きをアニメーションで与えるスタイルシートを紹介します。 ベルはリンリン♪、いいねは上下に、スピナーはぐるぐる動きます。 Font Awesome Animation 左はアニメーションのトリガーをページのロード時、右はホバー時にしたものです。 Font Awesome Animationの使い方 Step 1: 外部ファイル Font Awesomeと当スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="font-awesome-animation.min.css"> Step 2: HTML まずは、Font

    kasumani
    kasumani 2014/02/26
    アイコンのデザインに合ったかわいい動きをclassを加えるだけで実装できるスタイルシート -Font Awesome Animation classを加えるだけでさまざまなアイコンが利用できるFont Awesomeを使って、各アイコンのデザインに合ったかわいい
    リンク

  • [CSS]シャドウとグラデーションを巧みに使ったかわいらしいテキストエフェクト -Milky Effect


    テキストにtext-shadow、背景に美しいlinear-gradientを効果的に使い、かわいらしいエフェクトに仕上げたスタイルシートを紹介します。 Milky Font Effect 実装は簡単で、コピペで利用できます。 HTMLp要素などに、classを添えておきます。 <p class="milky">美しい日本語</p> CSS エフェクトの大切なポイントは﹁text-shadow﹂と﹁background﹂、カラーを変更しても面白そうですね。 .milky { font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;; text-transform: uppercase; display: block; font-size: 72px; color: #f1ebe5; text
    kasumani
    kasumani 2014/02/24
    シャドウとグラデーションを巧みに使ったかわいらしいテキストエフェクト -Milky Effect スタイルシートは、日本語に適用してもなかなかです。 エフェクトの大切なポイントは「text-shadow」と「background」、カラーを変更して
    リンク

  • [CSS]ごくシンプルなHTMLとCSSで実装するアニメーションがかっこいいメガメニューのデモ

    最小限のシンプルなHTMLとCSSで実装する、アニメーションで表示されるメガメニューのデモを紹介します。 デモ：Mega Menuオープン時 HTML HTMLは、トリガーとなるチェックボックス、メガメニューのリスト、コンテンツ、の3つで構成されています。 デモのコードをシンプルにしてみました。 <input type="checkbox" id="nav"> <label for="nav" class="entypo-menu"></label> <nav> <ul> <h2>カテゴリ</h2> <li><a href="#">アイテム</a></li> <li><a href="#">アイテム</a></li> <li><a href="#">アイテム</a></li> </ul> <ul> <h2>カテゴリ</h2> <li><a href="#">アイテム</a></li> <l

    kasumani
    kasumani 2014/02/05
    ごくシンプルなHTMLとCSSで実装するアニメーションがかっこいいメガメニューのデモ 最小限のシンプルなHTMLとCSSで実装する、アニメーションで表示されるメガメニューのデモを紹介します。 左上のアイコンをクリックする
    リンク
  • 1 2 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.