CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Bootstrap image hover effectsHTML Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <img class="img-responsive" src="http://placehold.it/350x200" alt=""> <div class="overlay"> <h2>Hove
通常これまでは、1px のボーダーのグラデーションを実現する際、背景画像を用意して［background-image］プロパティを利用するのが一般的な方法でした。 しかしレスポンシヴ・デザインやスマートフォン対応のWebサイトの構築などにより、この方法では相応しくないケースが多くなってきました。 何か他の方法を探して代替しなければなりません。 さて。ここでブレイクスルー。 今回は［CSS3］のテクニックの１つとして、ボーダーのグラデーションを、画像を使わずに CSS のみで表現する方法をご紹介します。 まずはサンプルをご覧ください。 綺麗なグラデーションになっていますね。 ボーダー・グラデーション：サンプル HTML の記述は以下のように。 <div id="sample"> <p>このボックスの枠（border）を、CSS3 のテクニックを使ってグラデーション化させます。</p> </d
ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか？ 従来知られているfloatプロパティを使った方法の他に、CSS3から「Flexbox」を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか？ 本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。 Flexboxとは？ Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今やすべてのモダンブラウザーで使用することができ（※1）、Bootstrap 4の新たなレイアウト方法として採用される（※2）等、次世代の標準となっていくであろう技術です。 ※1
Table of Contents Usage Sass Customization Accessibility Browser Support Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Download and include the CSS in the <head> of your site: <link href="dist/hamburgers.css" rel="stylesheet"> Add the base hamburger markup: <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></spa
Today we want to share some simple icon hover effects with you. The idea is to create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements. For the icons we are using an icon font (Eco Ico by Matthew Skiles, created with the IcoMoon app) which we add using the :before pseudo-class. The markup only uses an anchor for the icon and we wrap a set in
仕事で必要になったので作ってみました。実装方法は意外と簡単だったのでまとめてみます。これを作るにあたって下記サイトの記事が参考になったので張らせていただきます。[ CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ 今回用いたのは参考にしたサイトで紹介されていた第3 の方法、box-shadow を使用した方法です。参考サイトでは二重ボーダーを作っていますが、要はこれを角丸指定で円にしつつ真ん中のボーダーを背景と同色で作れば実現できるってわけですね。 margin: auto; background-color: #00b1f4; border: solid 6px #fff; width: 70px; height: 70px; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius:
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circle
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
Twitter's "fave" animation Twitter recently updated the design of their “fave” button, introducing a new animation. Rather than rely on CSS transitions, the animation makes use of a series of images. Here’s how to recreate the animation using the CSS animation steps timing function. Illusion of movement The effect is similar to the old zeotrope devices, which presented a series of illustrations in
Hello guys, this time I will show you other five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops. In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects. Please note that this will only work properly in modern browsers that support the CS
The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative wa
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
サイトを彩る多彩なアニメーション フラットデザインをベースに、随所に気持ちいいアニメーションを取り入れている「Omnisense」。コンテンツごとに用意されているさまざまなアニメーションは、どれも洗練された動きで、サイトの魅力をぐっと高めている。 ページトップにあるシンプルなボタンにマウスオーバーすると、上から矢印のアイコンがスライドして下りてくる。注目したいのは、マウスがボタンから離れたとき（マウスアウト時）の動きだ。 よくある:hoverで実装したマウスオーバーのアニメーションは、マウスオーバー時とアウト時の動きを別々に設定できないため、必ず逆の動きになる。マウスオーバー時に上からスライドしてきたら、マウスアウト時には上へ戻る、といった具合だ。 ところが、Omisenseのボタンは、マウスアウト時にそのまま下にスライドを続ける。細かな違いだが、最近ではこういったマウスオーバーのアニメー
Note that on mobile devices the effects might not all work as intended. Button Button Button Button Button Button Button Button Button Button Button Button Button Button Yes No Add to cart Bookmark Favorite Settings Send data Continue Return Continue Return Add to cart Delete Settings Add to cart Delete Settings Button Button Button Button Button Button Button Button Button Button Button Button Cl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
