タグ

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

タグの絞り込みを解除

CSS3に関するkathewのブックマーク (176)

  • transform:rotate()－CSS3リファレンス


    transform:rotate() …… 要素を回転表示する transform:rotateX() transform:rotateY() transform:rotateZ() transform:rotate3d() transformプロパティのrotate()、rotateX()、rotateY()、rotateZ()、rotate3d()は、要素を回転表示する際に使用します。 transform-originプロパティを同時に指定することで、回転の中心を指定することができます。 ■値 rotate(回転角度) rotate()関数では、角度によって2D回転を指定します。 rotateX(回転角度) X軸を軸とする角度によって時計回りの回転を指定します。 rotateY(回転角度) Y軸を軸とする角度によって時計回りの回転を指定します。 rotateZ(回転角度) Z軸を軸とす

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

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

    [CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック
    kathew
    kathew 2018/08/02
    noneを指定する以外にもこんな使いみちが‥‥！親にnoneして子をautoにしても子が親のnoneに引っ張られたりしないのね。素晴らしい。SVGのくだりはワクワクした
    リンク

  • 段組みを使って縦書きの文章をレスポンシブ対応させる方法


    2018年7月26日 CSS, Webサイト制作 CSSで文章を縦書きにする表現、少しずつ目にする機会が増えてきたように思います。しかし、縦書きのコンテンツをレスポンシブ対応させるのはなかなか大変。様々なサイトを見てみましたが、文章を横にスクロールしたり、文字サイズを調整してなんとかモバイルに対応しているようです。今回はたった一行でそんな問題を解決する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 縦書きの設定 縦書きを設定するのはとっても簡単！縦書きにしたい箇所にCSSでwriting-mode: vertical-rl; を記述します。この﹁vertical﹂が縦、﹁rl﹂が右から左︵Right to Left︶という意味です。 また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl︵上から下、右から左＝Top to Botto
    段組みを使って縦書きの文章をレスポンシブ対応させる方法

  • [CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説


    ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ﹁backdrop-filter﹂を紹介します。 今までは非常に長いCSSが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filterCSS property 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アップデート 2020/6/8: サポートブラウザを現在の状況に変更しました。 ﹁backdrop-filter﹂だと、一行のコードで実装できる ガラス効果のさまざまなスタイル backdrop-filterののサポートブラウザ ﹁backdrop-filter﹂だと、一行のコードで実装できる 私はbackdrop-filterとい
    [CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説

  • CSS3 transition, transformを使用時に画像がぼやける | ふたえごのWEBテクニックブログ

    現象が起きた内容 以下の条件のときに、画像がぼやける問題が発生しました。 CSS a, img, input, svg, *:before, *:after { transition: all 0.5s; } a:hover img, a:hover input, a.hover:hover, .btn a:hover, .btn input:hover { text-decoration: none; opacity: 0.8; } HTML <ul> <li><a href="https://futaego.com"><img src="/asset/images/logo01.png" alt="ふたえごブログ"></a></li> </ul> 問題が起きた理由 実際の問題がこのサイトで起きたわけではないですが、問題が起きたサイトのおそらくの理由はRetina対応による大きい画像を使

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


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

  • コピペで使える！ CSS Animationだけで実現するキャラクターアニメーション - ICS MEDIA


    みなさんは、CSSアニメーションどのように使っていますか？　ウェブサイトのちょっとした演出でCSSトランジションを使用している方が多いと思いますが、類似のCSSアニメーションはどういった使い道があるのかよくわかっていない方も多いのではないでしょうか。実は、CSSアニメーションを使うとキャラクターアニメーションを作ることができます。 今回はシンプルな変形アニメーションを組み合わせて、1枚の画像で実現できるキャラクターアニメーションを制作しました。オリジナルのキャラクターをアニメーションさせていますが、CSSのコードのコピー&ペーストで他のキャラクター︵画像︶にも簡単に適応できます。 商用・個人問わず無料で利用できるMITライセンスで公開していますので、ウェブサイトやコンテンツ制作に是非ご活用ください。 伸びるアニメーション 上方向に﹁ぷるんっ﹂と伸びるアニメーションです。scale()でタイ
    コピペで使える！ CSS Animationだけで実現するキャラクターアニメーション - ICS MEDIA
    kathew
    kathew 2018/01/24
    これはやりたくても自分で書くのが面倒くさいやつなので、サンプルコードを示して頂けて大変ありがたい
    リンク

  • CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 - ICS MEDIA


    CSSFiltersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 CSSFiltersとはボカシや色調整などグラフィカルな効果が得られるCSSの機能です。この記事では﹁マウスオーバーなどの表現を作るのにCSSFiltersが便利﹂ということを紹介します。 CSSFiltersの使い方は簡単。CSSのfilterプロパティに適用したい種類の指定を行うだけです。たとえば、次のような指定をすると、HTML要素にエフェクトがかかった状態で表示されます。 CSSFiltersは実はアニメーションにも利用可能。多彩な表現が簡単に実現できます。今回紹介するサンプルは、マウスオーバーでエフェクトを適用するシンプルなもの。まずは次のビデオをご覧ください。 明るさを使った表現 明るさ調整のbrightness()メソッドを利用してみましょう。マウスオーバー時に写真を明
    CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 - ICS MEDIA

  • CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる - はしくれエンジニアもどきのメモ


    CSS3のfilterで加工ソフトなしで画像に効果を加えてみる CSS3のfilterを試してみました。 サンプル 画像を選択して、input "range"で、filterの効果を付与できます。filterの効果を重ねることもできます。 cartman0.github.io filter: grayscale(100%) にした場合 対応ブラウザ CanIuseで確認すると、現時点︵2015年07月03日︶では、Firefox 以外はベンダープリフィックスが必要のようです。 Can I use... Support tables for HTML5, CSS3, etc 対応しているベンダープリフィックスは、-webkit- のみのようです。IEは対応していません。 したがって、以下のように2つ指定してあげれば良さそうです。 XX { -webkit-filter: YY
    CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる - はしくれエンジニアもどきのメモ

  • transform:translate()－CSS3リファレンス


    transformプロパティのtranslate ()、translateX()、translateY()、translateZ()、translate3d()は、要素の表示位置を移動させる際に使用します。 ■値 translate(X方向の距離, Y方向の距離) translate()関数では、X方向とY方向の距離で2D移動を指定します。Y方向の距離は省略することができますが、この場合のY方向の距離は0となります。[tx, ty] translateX(X方向の距離) translateX()関数では、X方向の距離で移動を指定します。 translateY(Y方向の距離) translateY()関数では、Y方向の距離で移動を指定します。 translateZ(Z方向の距離) translateZ()関数では、Z方向の距離で移動を指定します。 translateZ()関数にはパーセンテ

  • CSSだけでアスペクト比を固定するテク - Qiita

    Javascriptを使わず、CSSだけでimgやdivやiframeのアスペクト比を固定したままコンテナに合わせてリサイズする方法です。 レスポンシブなデザインの場合は端末の画面サイズに合わせて要素の幅を変える必要があるので、こういうテクニックを使ってアスペクト比を固定してやります。 imgの場合 HTML

    CSSだけでアスペクト比を固定するテク - Qiita

  • CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン

    最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン

    CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン

  • 【CSS3】@keyframes と animation 関連のまとめ - Qiita


    はじめに animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。 簡単にアニメーションの設定ができるので、覚えると楽しいです。 そもそもアニメーションって？ アニメーションの意味をググると動画と書かれていますが、動画というよりは、動きまたは変化という意味で捉える方が理解しやすいかと思います。 この記事でも、アニメーションという単語を用いて説明しますが、動きまたは変化という意味で読んでください。 最初は @keyframes について見ていきましょう。 説明するときに英語の読み方も記載していますが、参考程度に見てください。 keyframes について @keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。 @keyframes は、@規則のため、@から始まり、波括弧内
    【CSS3】@keyframes と animation 関連のまとめ - Qiita

  • CSSでボーダーをボックスに沿って走らせる | UNORTHODOX WORKBOOK | Blog


    昨日に引き続き、CSSの小ネタを紹介します。﹁CSSでボーダーをボックスに沿って走らせる﹂とか、よく分からないタイトルですが、簡単にいうとボーダーをボックスに沿って移動させる方法で、四角いボックスの外周を回り続けるエフェクトの実装方法になります。 正確には、CSSでいうところのborderプロパティではなくて、1pxの高さ(または幅)を持った要素をCSSのアニメーションで動かしています。 四角いボックスの外周を回り続けるエフェクトとは 言葉では説明しづらいので、以下の奴がそうです。DEMOというテキスト部分をマウスホバーすると、2本の線が現れて外周を回りだします。DEMOヒーローイメージとゴーストボタンを使いたかったという理由だけで、デモも作ってみました。ただの自己満足。 これのやり方 個人的になかなか面白い効果だなと思っているのですが、全てCSSで比較的簡単に実装できます(正方形の場
    CSSでボーダーをボックスに沿って走らせる | UNORTHODOX WORKBOOK | Blog

  • CSSのみでボーダーをスタイリッシュにアニメーションさせる - Qiita


    はじめに 何て表現すれば良いかアレですが、こんなエフェクトを見かけたので再現してみました。マウスオーバーで四方のボーダーがシュッと伸びてきます。Coolデスネ :) [動作イメージ] なお実際の動作・ソースは以下で確認ができます http://codepen.io/nekoneko-wanwan/pen/EVjdvX http://nekoneko-wanwan.github.io/demo/mouse-action/hover/border/ 仕組み 実はアニメーションしているのはborderではなく、幅or高さ1pxの擬似要素です。リンク要素とその内側要素に::before, ::afterを設定して、それぞれ四隅に配置し、:hoverでサイズを100%にする動作をtransitionしているだけです。 コード <a href="#" class="button change-bord
    CSSのみでボーダーをスタイリッシュにアニメーションさせる - Qiita

  • CSS 枠線アニメーションを作る - Qiita

    #wrap{ height: 100%; display: flex; justify-content: center; align-items: center; background: #000; } .box{ position: relative; background: red; width: 300px; height: 300px; } .box:before,.box:after{ content: ''; position: absolute; height: 3px; width: 3px; background: #fff; transition: width 0.3s,height 0.3s; } .box:before{ top: 0; right: 0; box-shadow: -297px 0 0 0 #fff; /* 配置位置:親要素の大きさ(300) - 自

    CSS 枠線アニメーションを作る - Qiita

  • CSSで実装するボタンホバー時のボーダーアニメーションエフェクト - NxWorld

    ホバーすると4辺それぞれに中央から外に向かっていくようにボーダーがひかれるものです。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 .button { position: relative; display: inline-block; padding: .5em 4em; border: 2px solid #fff; color: #fff; text-align: center; text-decoration: none; outline: none; transition: all .3s; } .button::before, .button::after { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: 2; content: ''; transiti

    CSSで実装するボタンホバー時のボーダーアニメーションエフェクト - NxWorld
    kathew
    kathew 2018/01/09
    おしゃれ！
    リンク

  • box-shadow－CSS3リファレンス


    box-shadowプロパティは、ボックスに1つまたは複数の影をつける際に使用します。 box-shadowプロパティでは、例えば以下のように影を指定します。 box-shadow: 10px 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4); box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset; 影は2～4つの長さの値で定義されますが、任意で色、insetキーワードを指定することもできます。 insetキーワードを付けると、影がボックスの外側ではなく内側につくようになります。 長さの指定を省略すると0となり、色の指定を省略するとユーザーエージェントが選んだ色になります。 複数の影を指定する

  • flex-wrap - CSS: カスケーディングスタイルシート | MDN

    CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

    flex-wrap - CSS: カスケーディングスタイルシート | MDN

  • CSSのcalc()関数を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ


    pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる﹁calc()﹂がどのように機能し、どのように使うのか、﹁calc()﹂を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに﹁calc()﹂はサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 How calc() Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ﹁calc()﹂とは値を計算式で指定できる ﹁calc()﹂を使う理由 ﹁calc()﹂の使い方 ﹁calc()﹂を使うと便利になる実装テクニック ﹁calc()﹂とは値を計算式で指定できる CSS3の﹁calc()﹂は、プロパティの値を計算式で
    CSSのcalc()関数を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ
  • 1 2 3 4 5 6 7 8 9 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

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

  • @hatebu

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

はてなブックマーク

公式Twitter

はてなのサービス

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