ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
使いやすくて高機能なものが多数！スライダー実装時に便利なプラグインやチュートリアルまとめ - NxWorld
実際に使用して良かったものも含め、スライダー系のスクリプトやチュートリアルで覚えておきたいと思ってメモしてたのが溜まってきたので備忘録兼ねてまとめました。 とにかく高機能なものから動きがユニークなものまで様々なタイプがあり、ほとんどが最近実装する機会が多いと思うレスポンシブやタッチ・スワイプといった動きにも対応しています。 Slider Pro プラグイン名にProとついているのでパッと見は有料かと思うのですが、無料で使用できるjQueryプラグインです。 とにかく高機能でレスポンシブやタッチ・スワイプといったものはもちろん、下記のように様々な設定や機能が用意されています。 modular architecture responsive touch-swipe CSS3 transitions animated layers (and static) infinite scrolling
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
Home | CSS3 Animate It
CSS3 Animate It is a new CSS3 lightweight animation plugin that triggers animations when they come into view using CSS3 animations.Include css3-animated.js at the end of your file and animations.css in the head. Once you have done that you can just define "animatedParent" as the parent class which is what will trigger the child class "animated" to animate whichever animation is defined, here we ar
スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクトがかっこいいっ！
ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ！と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです！ 各エフェクトのソースは上記ページからまとめてダウンロードできます。
[CSS]ボタンにぷるるんとかわいいアニメーションを与えるスタイルシート -Galatin effect
a要素にテキストを配置して実装したシンプルなボタンに、ゼリーのようにぷるるんとさせるアニメーションを与えるスタイルシートを紹介します。 ↓は、デモをアニメーションgifにしてみました。 Gelatin over button effect with Sass HTML HTMLは非常にシンプルです。 <a href="#" class="btn">Click Here</a> <a href="#" class="btn btn-secondary">Click Here</a> CSS スタイルシートは少々長いですが、こぴぺでそのまま利用できます。 Sass版は、Gelatin effectをご覧ください。 a.btn { display: inline-block; margin: 15px 15px 0; padding: .6em 1.1em; font-size: 26px; f
[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート
このレトロ風の凝ったデザインのリボン、HTMLはh1要素だけで実装されています。 余分なspan, div要素もなく、もちろん画像は一切使用されていません。 Single Element Pure CSS3 Double Fold Ribbon CSSはそれなりのボリュームになりますが、スタイルシートだけでデザインする見出しのバリエーションとしてストックしておきたいですね。 HTML HTMLは非常にシンプルです。 「contenteditable」はコンテンツの編集許可で、見出しのテキストを編集できます。 <h1>Single Element - Pure CSS3 - Type here...</h1> 外部スクリプト スタイルシートのベンダープレフィックスを自動で付与するために、外部スクリプトを使用します。 CSS スタイルシートにベンダープレフィックスを記述すれば上記のスクリプトは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Magic Animations CSS3
Progress Button Styles
制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現