タグ

2020年12月4日のブックマーク (3件)

  • 複数行に対応した3点リーダーをCSSで装飾する - Alternative Architecture DOJO

    こんにちは!オルターブースアドベントカレンダー12日目は、 弊社ただ一人のフロントコーダーの榛葉(しんば)が担当します! adventar.org 今回は複数行に対応した3点リーダー(...)をCSSで実装する方法をシェアしたいと思います。 複数行に対応とは、文章が3行以上になるとき、2行目の文末に3点リーダーを配置するような装飾のことを指しています。 まず 従来通りのCSS onlyな方法だと3点リーダーは必ず1行目に付いてしまい、複数行に対応した3点リーダーを配置したい場合は、JSで処理を入れる必要がありました。 しかしながら現在ではベンダープレフィックスと呼ばれる「-webkit」を使用すればCSSのみで装飾することが可能です。 webkitChromeやSafari系としておなじみですが、firefoxやedgeを始めとしたメジャーブラウザであれば相互に利用することが可能なCSS

    複数行に対応した3点リーダーをCSSで装飾する - Alternative Architecture DOJO
  • サイズがバラバラな画像をレスポンシブで縦横比を揃えて表示させる - Qiita

    追記(2021/10/14) この記事のやり方は古いやり方です。 IE や過去バージョンのブラウザに対応したい場合に参考にしてください。 今は aspect-ratio プロパティを使ってくださいね。 参考:CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法 | コリス やりたいこと サイズがバラバラな複数枚の画像を表示サイズを合わせて表示したい。 レスポンシブで縦と横の比率も揃えたい。 画像のトリミングは縦方向も横方向も中央部分が表示できれば良い。 CSS で画像をトリミングする方法 CSS で画像をトリミングするには…で思いつくのは2パターン。 ただしどちらも今回のやりたいことが達成できない object-fit を使う方法 object-fit - CSS: カスケーディングスタイルシート | MD

    サイズがバラバラな画像をレスポンシブで縦横比を揃えて表示させる - Qiita
  • Photoshopで顔にぼかしを入れる方法|betaのPhotoshop写真画像加工講座

    こんにちは、betaです。今日はPhotoshopで人物の顔にボカシをかける加工方法を書きたいと思います。画像はフリーで利用できるサイトから入手した女性の画像です。正直、ぼかさないほうがいいと思うくらいですが、一部の業界だと顔にボカシを入れる必要がありますので仕方ないですね。逆に、ボカシがあることで綺麗に見えたりする『ボカシマジック』なんて言葉もあるくらいです。 これの仕上がりで画像の仕上がりか変わることもありますが、工程は驚く程簡単です。やり方を知っているかどうかがポイントだと思います。なぜなら、自分がそうでしたので。それでは、さくさく進めていきましょう。 ボカシにはこんなのがあります 一口にボカシって言われてもどんなのがあるのか分からないとお話になりません。今回の様なパターンで使うと思われるのは大体次に挙げる3つです。中でもガウスが多いんじゃないかと思います。とりあえず、下にガウス・ボ

    Photoshopで顔にぼかしを入れる方法|betaのPhotoshop写真画像加工講座