CSSグラデーションで抜粋を徐々に消えるように表示 | hatena chips
ブログの記事一覧でタイトルと抜粋文を表示することはよくあります。抜粋文が長いときは文字数制限して「 … 」を付加するなどということをします。それを徐々に消えるような表示にするTipsの紹介です。シンプルなHTMLに適用するサンプルコードと、当ブログで使っているWordPressテーマのLuxeritasの記事一覧に適用する場合のサンプルコードも紹介します。 シンプルなHTMLに適用するサンプル一覧記事の抜粋を文字数制限して 「 … 」を付加する場合下図は記事一覧を2列タイル表示にした場合の表示サンプルです。 制限文字数を長いタイトルに合わせると短いタイトルの時の下部の空白が気になります。短いタイトルに合わせて文字数制限を大きめにすると長いタイトルの時、はみ出てしまいます。HTMLとCSSは下記になります。 <div class="tile"> <h1> 短いタイトル </h1> <p> ブ
Free Gradients Collection by itmeo.com
Free for commercial or personal use by Dima Braven. WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.
【無料】Photoshop用グラデーションパック4000種セット【2021年度永久保存版】
グラデーションを使いたいけど想像通りにならない・・・。 模写をしてみたけど見本のグラデーションと全然違う・・・。 なんていう事ありませんか？ 今回はなんとグラデーションが4000種類以上集まったグラデーションパックをご紹介します。
Gradihunt: Automated Gradient Generator
Beautiful gradient app to generate gradient color and css.
CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法
CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法 CSSで作ったボタンをマウスオーバーしたときに色を変えたい場合、「transition」を使うとふわっと色が徐々に変化するアニメーション効果を簡単に加える事ができます。 「transition:1s」なら1秒、「transition:0.5s」なら0.5秒のアニメーションになります。
グラデーションのデザインはこれで決まり！Photoshop用グラデーションファイル50選
Photoshopでのデザイン作業で使えるお役立ちツールの一つにグラデーションファイルがあります。 グラデーションファイルとはその名の通りグラデーションが設定してあるもので、使いたい時に設定するだけでいつでも任意のグラデーションを適用できます。 作業時間を一気に短縮してくれるだけでなく、最適なカラーリングを確実にできるという点も大きなメリットです。 今回は、便利なグラデーションファイルを50個ピックアップしてご紹介します。 ホームページで使いやすいものからイラストに使えるものまで多様に揃っていますので、使えそうなものがあればぜひダウンロードしてみてはいかがでしょうか。 デザイン作業の効率化を上げる！Photoshop用グラデーションファイル50選 1.Candide Ps Gradients http://feniksas4.deviantart.com/art/Candide-Ps-Gr
AndroidでCSS3のグラデーションが効かない | WEB MEMO:RE
下記のように一通りlinear-gradientを指定したけどAndroidでは無視されてしまう。 background-image: -webkit-linear-gradient(top, #ccc, #eee); background-image: -moz-linear-gradient(top, #ccc, #eee); background-image: -o-linear-gradient(top, #ccc, #eee); background-image: -ms-linear-gradient(top, #ccc, #eee); background-image: linear-gradient(to bottom, #ccc, #eee); Androidでもグラデーションを効かせる場合は、 background-image: -webkit-gradient(lin
メタルの質感が美しい、ゴールドとシルバーのグラデーション素材
ゴールドとシルバーで全400種類以上が揃っている、メタルのグラデーションが美しいPhotoshop用の素材を紹介します。
Color Inspiration: Blends, Gradients, Steps, Oh My! – Color + Design Blog by COLOURlovers
Blend, Gradient, Steps… whatever you call them, they’re fun to make and to look at. I tried to organize them as best possible, but it honestly is difficult to categorize these things. First we have blends where all the colors are in pretty much the same hue. Then blends to black or gray. Analogous blends are of colors that are near each other on the color wheel and I threw the rest in complementar
0to255
Hex code RGB functional notation HSL functional notation Distance from base color HSL lightness value Click to copy Pre-orders now open! Color Studio transforms 0to255 into a comprehensive color tool that's ultra-efficient, inspiring to use, and delightfully unique. Available Spring 2024. Read the announcement Pre-order Color Studio 1 year at $2/month + 3 months free “A near perfect color picker”
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
100 Beautiful Mesh Gradients - Free Download
https://www.pexels.com/@gradienta/
CSS Gradient Generator
コピペで簡単！CSSで作るグローエフェクト15選【光彩/ドロップシャドウ/テキスト装飾/HTML】
CSSのスニペットに登録！背景にCSSグラデーションが変化するアニメーションを実装するスタイルシート
キレイな配色の参考に！流行りのグラデが簡単に作れるCSSグラデーションカラーライブラリ10選【サンプル豊富/コピペ自由】2021年度決定版
http://www.web-codery.com/html/80
6 Sites for free Illustrator Gradient Swatches « projectwoman.com
http://www.css-lecture.com/log/css3/css3-gradient.html
Ultimate CSS Gradient Generator from ColorZilla