コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ
HTMLとCSSを中心にデザインされた、注目を集めたいときにぴったりな最新ボタンエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 CSS3が主要なモダンブラウザに対応したことから、アニメーションを加えたり、スタイリングの幅がグッと広がっています。加速するウェブデザインの進化において、これからますます楽しみな分野で、他と差の出るテクニックと言えるでしょう。 詳細は以下から。 コピペでラクラク、押したくなるボタン用HTMLコードスニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Fancy Button CSSのみでホバーエフェクト用ドロップシャドウとして適用した、今年のデザイントレン
コピペで使える！ CSS Animationだけで実現するキャラクターアニメーション - ICS MEDIA
みなさんは、CSSアニメーションどのように使っていますか？ ウェブサイトのちょっとした演出でCSSトランジションを使用している方が多いと思いますが、類似のCSSアニメーションはどういった使い道があるのかよくわかっていない方も多いのではないでしょうか。実は、CSSアニメーションを使うとキャラクターアニメーションを作ることができます。 今回はシンプルな変形アニメーションを組み合わせて、1枚の画像で実現できるキャラクターアニメーションを制作しました。オリジナルのキャラクターをアニメーションさせていますが、CSSのコードのコピー&ペーストで他のキャラクター（画像）にも簡単に適応できます。 商用・個人問わず無料で利用できるMITライセンスで公開していますので、ウェブサイトやコンテンツ制作に是非ご活用ください。 伸びるアニメーション 上方向に「ぷるんっ」と伸びるアニメーションです。scale()でタイ
[CSS3] 心地よいCSS3アニメーションを実装する - YoheiM .NET
こんにちは、@yoheiMuneです。 最近githubで人気になっているtobiasahlin/SpinKitというレポジトリ（Starが2,500個も！）では、 CSS3アニメーションを使った心地よいアニメーションのサンプルが公開されています。 今回はそのレポジトリの内容を拝借して、各アニメーションの実装内容を学んで、自分も書けるようになろうというためのブログです。 SpinKitで公開されているCSSアニメーション 公開されているものは執筆時には全部で８個あり、http://tobiasahlin.com/spinkit/でデモが確認出来ます。 綺麗なものがいっぱいあって、個人的には好きです。 以下ではそれぞれのアニメーション内容を拝借して、実装内容を学びたいと思います。 <style> .spinner1 { width: 30px; height: 30px; backgroun
![[CSS3] 心地よいCSS3アニメーションを実装する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/53d67670ab9a4d96908df62696837d176e920257/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F297.jpg)
cssのskewを使ってぷるぷるアニメーション ｜ Tips Note by TAM
突然ですが、transformプロパティのskew使っていますか？ skewを使えばX軸、Y軸へのゆがみを表現できるのでちょっとした動きを作る際にとても便利です。 今回はそんなskewを使って、化粧品のクリームがぷるぷる揺れるデモを作っていきたいと思います！ 完成デモを見る 素材を用意してHTMLに配置する 下記の写真を利用して、青色にしている真ん中のクリーム部分だけを動かしていきましょう。 用意した素材は、下記の3枚で、重なり合うようにHTMLに配置していきます。 ）一番下にオリジナル写真。 ）二番目に動かしたい箇所だけを切り抜いた「クリーム」画像。 ）一番上にクリーム部分を切り抜いたマスク画像。 ※二番目のクリーム画像を動かした際に、不自然な隙間ができてしまうことがあるので 念の為背景にオリジナル写真を配置しています。 skewについて skewを使えばX・Y軸の傾斜角度をそれぞれ個別
オールインワン型スライダー | css だけで作る スライドショー・フォトギャラリー
ユニクロやミズノのサイトなどなど、トップページの上部に表示されているスライダーをよく目にする。おそらくjQueryなどのjavascriptで作成されていると思われるが、これを、本稿では純CSS（pure CSS）で作成する。これまでにも、このサイトでCSS製スライダーを作成してきたが、今回のは、写真の下に、スライド切換えボタンと、現スライドを標示するボタンを付け加えた、オールインワン型のスライダーである。本サンプルを土台に、CSSを駆使すれば、自分の意図したデザインのスライダーを作成して頂けると思う。 なお、画面のサイズに適応して表示サイズが縮小するように設定した。 サンプル（DEMO） 本サンプル表示用HTML <!-- 画面上部の帯 --> <div id="top_belt"></div> <!-- スライド表示枠 --> <div id="stage"> <!-- スライド切換え
【Labs】CSS3でグラデーションの背景色をジワジワと変更する
こんにちは（・∀・） 今回ご紹介するサンプルはグラデーションの背景色をアニメーションで変更するサンプルです。CSS3のlinear-gradientとanimationを使っただけの簡単な構造です。 linear-gradientとanimationで背景色の変更 サンプルの背景色はhslで指定してあります。値の数値を変更すればグラデーションの色を変えることができます。0の赤から始まって360で再び赤に戻ります。 サンプル body { background: linear-gradient(to bottom, hsl(180, 100%, 50%), hsl(220, 100%, 50%), hsl(300, 100%, 50%)); background-size: 100% 700%; animation: bgcolor 20s linear infinite alternate
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Clip Mask Pricing Table
Scroll/drag indicator
Animated background
CSS Fizzy Button