CSSでホバーすると下からさっと別の背景が広がるエフェクト | ITハット
Hover! .btn { position: relative; display: inline-block; padding: 0 36px; color: #fff; line-height: 1.9; font-size: 28px; border-bottom: 5px solid #b0b8ba; background: #b0b8ba; } ボタン上層部をつくる Hover! .btn { position: relative; display: inline-block; padding: 0 36px; color: #fff; line-height: 1.9; font-size: 28px; border-bottom: 5px solid #b0b8ba; background: #b0b8ba; } .btn:before { position: absolut
CSS3で作るマウスホバーするとぼよーんとアニメーションするエフェクト | ITハット
CSS3で作るマウスホバーするとぼよーんとアニメーションするエフェクト CSS3を使って滑らかにアニメーションするエフェクトです。以下のデモでは、ボタンを例にしていますが、画像などにも使えるエフェクトとなっています。サイトのワンポイントとして導入してみるといいかもしれません。 デモ .btn { display: block; padding: 14px 0; width: 180px; color: #fff; font-size: 24px; border-radius: 70px; background: #009688; } .btn:hover { -webkit-animation: boyooon .9s; -moz-animation: boyooon .9s; animation: boyooon .9s; } @-webkit-keyframes boyooon { f
[css] CSS3時代の上下中央に配置するパターン
最近多用するので…。 要素の全画面化について 先に親になる要素を画面いっぱいに広げる方法について補足しておく。 大きく分けると絶対配置とサイズ指定の２つある。 絶対配置は、position:absoluteを指定した上で ４方向の位置を0（または任意の値）にする。 #wrapper { position:absolute; top:0; right:0; bottom:0; left:0; } サイズ指定は、widthとheightを指定するだけだが、 対象の要素だけでなくその親も高さと横幅がないと指定したサイズにならない。 特に高さについての指定がハマりやすい。 単純にbody直下に要素を配置しただけの場合、 <body> <div id="wrapper"></div> </body> htmlとbodyもheightを指定してないと画面いっぱいに広がらない。 html, body,
![[css] CSS3時代の上下中央に配置するパターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Bootstrap4の主な更新点 - Qiita
こうして見てみると、一段階上のサイズが追加されたというよりも、xs と sm の間が細かくなったという感じですね。 flexboxのサポート $enable-flex: true;を設定することでflexbox Layoutが使用されるようになります。これにより、tableやfloatを使っていた様々なハックが改善されるとのこと。ただし、IE9はflexbox Layoutをサポートしておらず、IE10でも古い仕様にしか対応していないため、デフォルトではこのオプションはfalseになっています。 well, thumbnail, panel を廃止、card に統一 コンポーネントの well, thumbnail, panelがなくなり、cardに統一されました。 CSSリセットを Reboot というモジュールに統一 CSSリセットには、Bootstrap3ではNormalize.cs
CSSで文字列をドラッグして選択したときの色や背景色を変更する | ITハット
CSSで文字列をドラッグして選択したときの色や背景色を変更する 意外と多くのブラウザに対応しているテクニックです。IE9+とモダンブラウザで使用可能です。こういった細かいところもしっかりとカスタマイズしてあるサイトを見るとほっこりします。 テキスト選択時の色を指定できる 通常は、文字を選択するとこんな感じの色ですよね。 .text::selection { color: #fff; background: #555; } .text::-moz-selection { /* Firefox */ color: #fff; background: #555; } ::selection を使えば、自由に選択したときのスタイルを変更できます。 ::selection { color: #fff; background: #555; } ::-moz-selection { /* Firefox
CSSで作るホバーすると波紋状にリングが広がるエフェクト | ITハット
CSSで作るホバーすると波紋状にリングが広がるエフェクト CSSで簡単に波紋エフェクト作れないか考えていたところ、いいアイデアが思い浮かんだので紹介します。ホバーするとリングが波のように広がって消えます。 ソースコード ハイクオリティーなエフェクトとなっています。 HOVER HTMLはこんな感じでシンプルなマークアップです。 .button { display: block; width: 5.5em; height: 5.5em; margin: 2em auto 0; line-height: 5.5em; text-align: center; font-size: 40px; border-radius: 100%; background: #0288d1; box-shadow: 0 0 0 35px #424242, 0 0 0 40px #424242; overflow:
Angular Materialのflexboxを使ったLayoutを解説してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、店長です。 最近は実案件でAngularJSを使う機会が増えてきました。 そこで導入しているのがAngular Materialという、Googleが提供するAngularJS用のUIコンポーネントです。 Angular MaterialのLayoutコンポーネントはflexboxを使用したものになっています。 Angularと書きましたが、AngularJSらしいことは今回出てきません……。 どのようにLayoutにflexboxが使用されているのか、詳しく解説していきたいと思います。 今回のDEMOはこちらからご覧になれます。 flexboxについて まず、Angular MaterialのLayoutコンポーネントを使用する前に、簡単にflexboxのレイアウトについて解説したいと思います。 flexboxレイアウトは、以下のように親要素のflexコンテナと子要素のfle
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (
![[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/9632aee4416db718e0899706ace859f7fdcdf363/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072201.png)
CSSだけでハイクオリティーなモーダルウィンドウを作る | ITハット
CSSだけでハイクオリティーなモーダルウィンドウを作る すごく時間かかりましたが、ついに完成しました！ とりあえずPC版のみの対応です。JSを一切使わずCSSだけでモーダルウィンドウを作ることができました。モダンブラウザ向けなのでブログに組み込んだりできます。よくネットに載っている方法は:targetを使った方法です。これだとモーダルウィンドウを表示する�度に履歴に追加されるので戻るときにまたウィンドウが表示されてしまいます。その欠点を無くしたのが今回の方法です。 ソースコード Open Modal html, body { position: relative; margin: 0; padding: 0; height: 100%; text-align: center; background: #f5f5f5; } .button { display: inline-block; m
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita
WHAT CSSには詳細度（Specificity）という概念があります． 詳細度は、どのプロパティ値が最もある要素に関係があり、適用されるかをブラウザが決定する手段です。 詳細度 - CSS | MDN 簡単に言うと，「スタイルが重複したとき，どのスタイルを優先するか」の優先度を定量評価したものになります． 詳細度はa, b, cのようなカタチで表されます． 細かい説明するのは面倒なので，ざっくりと以下にリストアップします． 全称セレクタ: a=0, b=0, c=0 * 要素，擬似要素: a=0, b=0, c=1 li, ::before, ::first-line, etc. クラス，擬似クラス，属性: a=0, b=1, c=0 .classname, :first-child, [type=password], etc. id: a=1, b=0, c=0 #idname あと
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
AngularJSでマテリアルデザイン風のページ遷移アニメーションを作ろう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 6月から役職が変わりフロントエンドリーダーからCTOになりました、先生です。 もうAngular1.4にアップデートしましたか？ Angular1.4になりマテリアルデザインを意識したアニメーション関連の変更や実装がおこなわれました。その分Breaking Changesもあるのでアップデートには注意する必要があります。 今日はそんなAngularJS 1.4を使って、マテリアルデザイン風にページ遷移するアニメーションを作ってみたいと思います。 今回のデモ デモは下記リンクになります。 各メンバーをクリックするとスムーズにアニメーションして詳細ページに遷移します。まずは触ってみてください。 http://frontainer.com/ligblog-sample/angular-morphing-animation/#/ 必要なもの AngularJS1.4 – https:
Writing Good CSS
I'm always trying to learn new things. However, more importantly, I also try to learn ways to improve the way I already do things. Both at my full-time gig and for client side-projects, the thing I've always wanted to improve was my CSS. I've always felt I'm pretty good when it comes to CSS, but I've always found it messy to read, and often hard to maintain. What I've been trying to do, is find ou
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
CSSでfloatを使わずに「text-align:justify」で特定のテキストや画像を左端・右端に配置する方法もあった｜今村だけがよくわかるブログ
CSSでfloatを使わずに「text-align:justify」で特定のテキストや画像を左端・右端に配置する方法もあった cssでfloatを使って特定のテキストや画像を左端、右端に配置することってあると思います。例えば「header要素内のサイト名やロゴマークなどは左、ソーシャルボタンは右にそれぞれ配置する」などです。 下のような感じです。 「float」を使って左端・右端に配置 上の方法は私もよく使っているんですが・・・最近、floatを使わずに「text-align:justify」を使って似たようなことができることを知りました。結構前からこのやり方あったみたい。 「text-align:justify」を使って左端・右端に配置 floatを使うと、背景色などを入れたい場合はclearfixなどを使うこともあったんですが、「text-align:justify」を使えばclear
ブラウザにやさしいHTML/CSS
1. HTML/CSS 〜 「お・も・て・な・し」をブラウザにも 〜 TAKEHARU IGARI Front-end Engineer / Evangelist ブラウザにやさしい <html5j パフォーマンス部 第⼀回勉強会 /> 2. プロフィール • TAKEHARU IGARI 猪狩 丈治 - 所属 • 株式会社 Lei Hauʼoli フロントエンドエンジニア - 略歴 • 表⽰速度、保守性、ブランディング、SEOを考慮したフロントエンドエンジニアリングを得意とし、 現在、各ナショナルクライアントのプロジェクトや、株式会社リクルートの主要サービスのフロント エンド開発に携わり、⾼速化コンサルティングも⾏う。 - 執筆 • 技術評論社「WEB+DB PRESS」 • Vol.66 〜我流コードからの卒業HTML構造化指南 • Vol.59 〜「Webサイト超⾼速化実況中継 ──
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの擬似要素:beforeや:afterのcontent内の任意の位置で改行する | ITハット
http://www.designwalker.com/2010/05/css3.html
