タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便利です。 実際の動作は、デモページでご覧ください。 See the Pen Gradient Overlay with border-image by coliss (@coliss) on CodePen. HTMLはシンプルです。 テキストのh1要素と背景を設定したdiv要素があるだけです。
【CSS】border-radiusとborder-imageは併用不可、ですが、強引になんとかしてみました。 - Little Strange Software
どうも！LSSです！！ 【CSS】虹色の枠線、もう２種類！ - Little Strange Software で作った枠線ですが、こちらはborder-imageを使って描いていました。 border-imageを使うと枠線の表現の幅が広がって面白いのですが、「border-radius（角丸）」や「border-style（枠線の種類を点線や二重線にする）」の指定と共存できない、というのが、ちょっと惜しいところです^^; 画像ファイルを用意して表現する事は可能ですが、gradientを使って…となるとあまり自由が利かなかったりもします。 今回は、「なかばインチキ」な方法ではありますが、「虹色の枠線」を角丸にする方法を試してみました！ 虹色の角丸枠線 解説 border-box、padding-box、content-box あとがき 虹色の角丸枠線 虹色の枠線 角丸１ コード <div
【CSS+SVG】枠装飾、border-imageによるバクダン２種と雲型 - Little Strange Software
どうも！LSSです！！ 【CSS+SVG】雲型の枠を作れないか試み中…【実験】 - Little Strange Software で試みていた装飾枠ですが、色々と応用してみました。 バクダン その１ バクダン その２ 雲型の枠 その４ その他の調整について あとがき バクダン その１ バクダン その１ ちなみに、このトゲの数は幅・高さに応じて変化します。 サイズによっては稀に変なスキマができてしまう事も？？ コード <style><!-- .bakudan1{ border:30px solid transparent; border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewbox="0 0 90 90" stroke="%
【CSS】border-image-sliceをkeyframesアニメーション【実験】 - Little Strange Software
どうも！LSSです！！ 未だ掴みきれないborder-image。 ちょいと試しに「border-image-sliceはkeyframesでアニメーションにできるのか？」を試してみました。 実験 コード アニメ化できましたね！ 実験 呼吸してるみたい コード <style> @keyframes testa{ 0%{border-image-slice:49%;} 100%{border-image-slice:35%;} } .test{ height:200px; border:40px solid; border-image-source:radial-gradient(farthest-side,transparent 59%,gray 60%,white,gray 89%,transparent 90%); animation:testa 3s infinite alterna
【CSS】border-imageとgradientで作る枠線３種 - Little Strange Software
どうも！LSSです！！ little-strange.hatenablog.com で「border-styleでは表現できない枠線を、border-imageを使って作る」事をやってみました。 border-image を使うと、border-radius（角丸）やborder-style（線種）が無効になってしまいますが、border-imageに指定する画像によって「おおむね」近い表現ができる事もあるようです。 特にradial-gradientはborder-radiusの代わりに角丸を表現するのに使えて、中身を工夫するとborder-styleでは表現できなかった事もできちゃったりしますね^^ 今回は、そんなborder-imageならではの枠線を考えてみました。 枠線３種 コード とりあえず３種、ですが 枠線３種 ぼやけた角丸枠 トリプル角丸枠線 縦に虹色 コード <div s
【CSS】border-imageとconic-gradient【実験】 - Little Strange Software
どうも！LSSです！！ ちょっとまた、border-imageを試してみました。 border-style:outset;で盛り上がったような枠線になりますが、それよりもborder-colorを四辺別々に設定した方が角が四つとも切れ目が生じてかっこいい！ …のを更に、conic-gradientを用いると四辺の中で更にグラデーション変化を入れる事ができます。 ついでに背景色をアニメーションで変化させて、様々な色に合う事を確認しています。 border-imageとconic-gradient コード outsetの場合 四辺別々に色設定した場合 ただし、今回のconic-gradient版には欠点が… border-imageとconic-gradient こんな風になります。 よく見ると４つの辺の中でも明るさがグラデーション変化していますね。 コード <style> @keyframe
【CSS】画像を使った枠線（border-imageとborder-image-slice使用） - Little Strange Software
どうも！LSSです！！ 前回の記事で、border-imageとborder-image-sliceを使ってグラデ―ションの枠線を描きましたが、border-imageはその他に「画像ファイルを枠線として使う」という事もできます。 できます、というより、多分、おそらく、そっちの方がメインの用途なんじゃないか？という気がします。 今回は、その「画像を使った枠線」を扱うCSSをやってみた話です。 画像を使用したborder-image 使用した画像 サンプル コードと解説 テストその１ width: 300px; height: 200px; border: 20px solid; border-image: url('画像ファイルのURL'); border-image-slice: 20; テストその５ border-image: url('画像ファイルのURL') 20; コピペする場合
The Complex But Awesome CSS border-image Property — Smashing Magazine
The CSS border-image property is one of those properties you undoubtedly know exists but may not have ever reached for. Or maybe you have reached for it but found all of its slicing logic difficult and cumbersome. That’s because it is! But the property is also capable of some really interesting things if we take the time to understand its syntax. In this article, Temani Afif demonstrates different
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます
blog.domesoccer.jp
www.dpfp.or.jp
news.yahoo.co.jp
www.wwdjapan.com
www.tokyo-np.co.jp
news.mynavi.jp