[B! css3] forcutieのブックマーク

コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ

HTMLとCSSを中心にデザインされた、注目を集めたいときにぴったりな最新ボタンエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 CSS3が主要なモダンブラウザに対応したことから、アニメーションを加えたり、スタイリングの幅がグッと広がっています。加速するウェブデザインの進化において、これからますます楽しみな分野で、他と差の出るテクニックと言えるでしょう。詳細は以下から。コピペでラクラク、押したくなるボタン用HTMLコードスニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Fancy Button CSSのみでホバーエフェクト用ドロップシャドウとして適用した、今年のデザイントレン

forcutie 2016/06/15

ボタン button

css3

リンク

word-breakとword-wrapはややこしい

Updated 2015.01.13 / Published 2015.01.13 word-break:break-all;は一切の禁則処理を解除し、どの文字の間でも改行するため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています。望ましい折り返しの制御をしてくれるword-wrap:break-word;(overflow-wrap:break-word;)の用法について紹介します。折り返しを制御する2つのCSSプロパティ幅の狭い領域で長い英単語や長いURLの途中で折り返しを制御できるCSSプロパティは、特にスマートフォンなどの小さなディスプレイサイズ向けへの対応を考慮してよく用いられるようになってきています。ただし、CSS3には折り返しを制御できるCSSプロパティが2つ存在し、とてもややこしいので

forcutie 2016/02/09

折り返し

css3

リンク

http://11neko.com/menu-style-inspiration/

forcutie 2015/04/15

css3
css

リンク

Philips hueの新しいライティングの世界を体験しよう。話題のPhilipsアイテムを抽選で６名様にプレゼント！ | Philips hue

Philips hueはiPhoneやiPadなどからアプリケーションを使ってコントロールできる、まったく新しい照明システムです。 1600万色を超える色彩表現と高い拡張性で、いままでにないあかりの楽しさをあなたの日常にお届けします。 >>Apple Online Store >>Amazon.co.jp ブルームは、置き型LEDで、設置場所を選ばず、壁や棚などに向けて光を当てることが可能で、バリエーション豊かに「明かり」の空間を彩ることができます。 >>Apple Online Store ライトリボンは、全長2mのリボン状LED照明で、好きな長さに裁断して使用することもできます。また裏面がテープになっており、様々な場所、モノへの接着が可能なため、明かりによるより自由な空間演出を実現します。 >>Apple Online Store >>Amazon.co.jp

forcutie 2014/09/04

css3

リンク

HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利

HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに

forcutie 2014/07/07

css3
html5

リンク

これなら分かる！WEB制作を無料で「学べる」サイトまとめ

作成：2013/02/4 更新：2014/11/01 Web制作 > 基本的なところを簡単に、楽しく覚えたい自分でサービス作ったり、会社や違う職種でも色々と「基本」はおさえておきたい今回はサイト制作に必要な「基本的な知識・情報」を、分かりやすいサイトを中心にまとめました。必ずおさえておきたいスキル・知識です。エンジニア速報は Twitter の@commteで配信しています。もくじ１．HTML5 ２．CSS ３．レスポンシブ４．配色５．視線誘導 / 心理学６．インターフェース / ユーザビリティ７．SEO ８．ディレクション９．アクセス解析１０．WEBマーケティング１１．コピーライティング１２．ソーシャル１．HTML5 HTML5って何？ HTML5とは何かを簡単にまとめてみた - Yahoo! JAPAN Tech Blog Canvasについて知っておく

forcutie 2014/02/05

リンク

html5-memo.com

forcutie 2013/06/06

html5

css3

リンク

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

forcutie 2013/03/18

css3

リンク

CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ

CSS3を使ってどんなことができるのか？よく見かけるあれはどのように実装するのか？いつもと違うエフェクトを使ってみたい！など、CSSのいろいろなテクニックが見られるサイトをまとめました。 More CSS Secret あなたが知らないかもしれないCSSの10のテクニックをスライド形式で。びっくり顔はあれですが、次のプロジェクトで使いたくなるテクニックが満載！

forcutie 2013/02/28

css3

リンク

[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。

こんにちはLatinです。今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。今回はCSS3のグラデーションにまつわるエントリーです。ハッキリ言って面倒くさい！さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない分のベンダープレフィックスを探したり、filter やら毎回ググるのが非常に面倒！且つ、ボタンなどに、gradient と border-radius を併記した場合、IE9 での表示が若干おかしくなってしまいます。詳細は下記に記載しますが、今後サクッと使えるように備忘録がてら、簡単にまとめておこうと思います。 CSS スニペット（修正前） .btn { border-radius: 4px;