[B! hover][CSS] ddt2000のブックマーク

CSSのみで実装するボタン、テキストリンク、hoverスタイル19選 | Pulp Note

CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 CSSボタンのスタイルCSSボタンは11パターンあります。すべてのデザインに共通したCSSがありますので以下のコードをコピペした後に、実装したいボタンのCSSをコピペしてください。 CSSボタンの共通スタイル .btn a { display: flex; justify-content: center; align-it ems: center; position: relative; width: 300px; height: 60px; color: #333; font-size: 18px;

ddt2000 2021/04/02

css
hover

リンク

【CSS】窓のようにひらくテキストをCSSで作ってみる！ - mlog

今回はCSSを使って、窓のようにひらくテキストを作ってみたいと思います！最初に、ベースとなるCSSコードを紹介した後、カスタムパターンをいくつか紹介していきます。なるべくコピペでも使えるように構成していますので、サンプルを見て、気になるものがあれば、ぜひ試してみてください！目次ブログで使用する場合ははてなブログの場合ベースコード動作チェックカスタムパターン色を変えてみる！フォントサイズをカスタムしてみる！フォントを変えてみる！アニメーションのスピードを調整してみる！ひらく角度を調整してみる！カスタム内容を組み合わせてみる！まとめブログで使用する場合はご利用のブログがHTML記述に対応している場合は、紹介するCSSを<style>と</style>で囲んで記述してください。 ※ CSS用の入力欄がある場合は<style>と</style>の囲みなしで記述して

ddt2000 2020/08/27

css
hover

リンク

Izmir - ImageHover CSS Library

Creative Control Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

ddt2000 2019/11/11

css
hover

リンク

[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets

テキストリンクやボタン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。気になったアニメーションは、スニペットなどに登録しておくと便利ですね。

ddt2000 2019/03/15

css
hover

リンク

[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック

CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。 Stuff you can do with CSS pointer events pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。

ddt2000 2018/07/27

css
hover

リンク

CSS初心者でも簡単！画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシート -imagehover.css

外部CSS一つとclassを加えるだけで簡単に実装できる、画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシートを紹介します。アニメーションは40種類以上、他のCSSやJSは不要でわずか19KBの超軽量CSSです。

ddt2000 2018/02/27

リンク

CSSでボタンデザインを作ってみた - アプリ魂

2017 - 08 - 12 CSSでボタンデザインを作ってみたブラウザ上でコードを書いて実行できるWebエディタ「CodePen」のアカウントを作成しました。これまで使っていた Atom と同等の機能が備わっている上にサクサク動作してくれるので気に入っています。簡単にCSS・JSのPreprocessorを選択できるところも素敵です。数ヶ月ぶりとなる今回のエントリーは試しにいくつか書いてみたボタンデザインの備忘録になります。次のエントリーはもっとはやいはず。 Button #1 See the Pen Button #1 by appdamacy ( @appdamacy ) on CodePen . ボタンの下部にラインが走るホバーエフェクト。クールでシンプルなサイトデザインにぴったり合います。個人的には背景に色があるほうが格好良く感じます。 Button #2 See the

ddt2000 2017/08/13

リンク

http://www.d-3.site/entry/2017/07/09/180000

ddt2000 2017/07/09

css
hover

リンク

CSSで作る！押したくなるボタンデザイン100（Web用）

.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transf orm: translateY(4px); transf orm: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }

ddt2000 2017/04/17

リンク

[CSS]デスクトップ・スマホ対応、浮かんだり光ったりアニメーションするボタンを簡単に実装できるスタイルシート

外部ファイルを一つ加えるだけで、さまざまなボタンを簡単に実装できるスタイルシートを紹介します。鋭角や角丸の矩形、楕円形、ハンバーガーメニューに使われる円形、グラデーションやフラット、ゼリーみたいなボタンもあります。

ddt2000 2017/03/28

リンク

デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 | WebNAUT by Beeworks

デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 Webサイトのマークアップするとき、参考にするデザインはほとんどは静止画の状態ですよね。しかしWebサイトは「見るだけ」ではなく「使うもの」ですので、実際には様々な「動き」や「状態」が存在します。そんな動きや状態については都度デザイナーとエンジニアが一緒に検討していくのが理想ではあるのですが、それが難しいケースもあるでしょう。そんな時には事細かにデザイナーに確認したりデザインデータを要求するのではなく、ある程度はエンジニアが意図を汲み取って実装することが必要ではないでしょうか。今回はそんな「デザインに鋭いフロントエンドエンジニア」になるために、実装機会の多い「ホバーアニメーション」を例にしてフロントエンドエンジニアがどのように実装を決めていけばよいのかを考えてみたいと思

ddt2000 2017/03/06

hover
css

リンク

ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ - NxWorld

既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたいときに参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。 image hover 63 effects イメージにhoverするとキャプションが表示されるというエフェクトが多数まとめられています。 HTMLもシンプルでエフェクトはすべてCSSで実装されています。 Css3 Transf orm rotate, sc

ddt2000 2016/08/18

リンク

CSSでのロールオーバーアニメーションのチュートリアル集まとめ｜BLACKFLAG

古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、 CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。画像やボタンにロールオーバーした際にCSSアニメーションを使ってのさまざまな演出方法についてまとめているサイトも多々あります。そんなCSSロールオーバーの演出をさまざまなアニメーションを加えるやり方のチュートリアルを紹介しているサイトの中で個人的に参考になりそうだったものをまとめて紹介してみます。 Some More Subtle Hover Effect Ideas | Codrops Some More Subtle Hover Effect Ideas | Codrops 画像にロールオーバーすることで重なり合うキャプション等のテキスト情報をさまざまなアニメーションで表示します。デモは「SET1」

ddt2000 2016/06/07

リンク

ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

ddt2000 2016/03/28

リンク

CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10＋ - NxWorld

自分用に一覧化したものがほしくて作ったのでシェアします。あくまで個人的に思ったものなので多少合わないと思うものもあるかもしれませんが、可愛らしいデザインや遊び心あるような感じのサイトで使えそう・相性が良さそうだと思ったボタンデザインやホバーエフェクトです。いずれも画像やJavaScriptなどは使用せずに見た目から動きまで全てCSSで表現しており、CSSなのでカラー変更やフォントサイズの変更なども容易にできます。閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。基本的に必要だと思う記述は全て掲載しておりますが、例えばfont-familyやfont-sizeなどのように環境によって大きく記述が異なるようなものは省略して紹介しているので、場合にはよって実装してみたものと紹介して

ddt2000 2016/03/18

リンク

テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld

文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。また、サンプルコードに含まれていません

ddt2000 2015/09/18

css
hover

リンク

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld

自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。