10 Free Code Snippets for Creating Beautiful CSS Buttons
Web designers no longer need to rely on Photoshop for creating awesome buttons. With CSS3 you can manipulate everything from background gradients to drop shadows and glossy/shiny effects. We’ve organized 10 unique CSS buttons collections & snippets from CodePen which you can study and freely use in your own web projects. 500,000+ Fonts, Stock Photos, Themes & Design Assets Unlimited downloads of e
画像をCSSで斜めにマスクした時の知見 - kojika17
サイト全体が斜めになったサイトで、画像をクリッピングする必要がありました。しかもレスポンシブWebデザインです。 その時の知見と、利用しませんでしたが、ちょっとしたテクニックを思いついたので、メモとして残しておきます。 画像を斜めクリップにする方法 画像を斜めクリップするイメージは、こんな感じです。 要素を斜めにする方法は、IE9以上から利用できます。 IE8もIEの独自フィルターを利用して頑張ればできるようですが、底が見えない感じだったので、IE8は斜めにせずに対応させていただきました。 要素を斜めにするCSSは、transformプロパティを利用します。 transformプロパティには、いくつかの関数が用意されており、主に「skewY()」を利用し、場合によっては「rotate()」も利用しました。 CSSの記述例 .foo { -webkit-transform: skewY(10
Showcase - Materialize
Help Materialize Grow We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Support Us
CSSフレームワークを使って今から始めるお手軽マテリアルデザイン - Qiita
はじめに 初めまして。 こちらの記事はHamee Advent Calendar 2015 12日目の記事となります。 流行りの？デザインのお話でもしてみようと思います。お手柔らかにお願いします。 マテリアルデザインについて なんだか最近よく聞いたりそれっぽいもの見たりするけど実際どういった考え方かまで分かっていない方は以下の記事を参考にすると良いと思います。 よくわかるマテリアルデザインの設計コンセプト | fladdict とてもわかりやすいです。3分もあれば読めますが、忙しい方は以下の要約に目を通していただければと思います。 簡単に言うと マテリアルデザインは紙とインクのメタファーからできている（公式の直訳だと印刷ベース） それぞれのマテリアルには「厚み」（1dp）の概念がある インタラクションは基本的に現実世界に即したものとなる 画面や他のマテリアルに対して貫通するような動きはダメ
CSS Nite LP47「Coder's High 2016」のフォローアップを公開します｜CSS Nite公式サイト
ベストセッション20192019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。 2010年から2019年のベスト・セッションCSS Niteベスト・セッション2019CSS Niteベスト・セッション2018CSS Niteベスト・セッション2017CSS Niteベスト・セッション2016CSS Niteベスト・セッション2015CSS Niteベスト・セッション2013CSS Niteベスト・セッション2012CSS Niteベスト・セッション20112010年のベスト20セッション CSS Niteについて CSS Nite（シーエスエス・ナイト）は、Web制作に関わる方のためのセミナーイベント。2005年10月にスタートし、2017年10月で丸12年。 これまでに、600回を超える関連イベントを通し
CSS3 Patterns Gallery
Click on a pattern to expand Textareas are editable Browser support Submit a new one Github repo Enjoy! Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial
Hover.css - A collection of CSS3 powered hover effects
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
.css() | jQuery API Documentation
The .css() method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the getComputedStyle() method in standards-based browsers versus the currentStyle and runtimeStyle properties in Internet Explorer prior to version 9) and the different terms browsers use for certain properties. F
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
【CSS】適切なブレイクポイントを考えてみる（レスポンシブデザイン用）
こんにちは、ウェブマーケティング部の杉尾です。 前々回、CSS3のメディアクエリについてお話しさせていただきました。 また、前回は『スマホ、タブレットの横幅』(端末解像度と実質解像度)を紹介しました。 今回はその続きとして、ブレイクポイント（CSSの切り替え地点）を考えてみます。 レスポンシブデザインでサイトを作る際に必ず必要となってくるので、参考にしてみてください。 レスポンシブデザインとメディアクエリ 現場において、メディアクエリは主にレスポンシブデザインのサイトを制作する際に使われます。 レスポンシブデザインは、一つのHTMLソースで、スマホからPCまで画面構成を崩すことなく表示できます。 閲覧端末ごとの制作が必要なくなり、また管理もしやすいので、ここ数年でかなり普及しました。 【詳しくはコチラ】 ⇒http://scene-live.com/page.php?page=95 ブレイ
Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターン まずはやって
60fps scrolling using pointer-events: none
60fps scrolling using pointer-events: none Paul Lewis did an interesting article a while back about avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class. UPDATE: I’ve done a follow up article which demonstrates a more robust technique. That approach doesn’t scale well an
Front-end-Developer-Interview-Questions/README.md at master · h5bp/Front-end-Developer-Interview-Questions · GitHub
#フロントエンドデベロッパー面接時の質問事項 @バージョン 2.0.0 本レポジトリはフロントエンドデベロッパー志願者のポテンシャルを見極めるのに有効な面接時の質問事項を列挙します。全ての下記質問事項を一人の志願者に聞くことは推奨されません（それは数時間もかかってしまうでしょう）。あなたが必要としているスキルを見極めるためには、下記の質問リストからいくつかの項目を選択するのがよいでしょう。 Rebecca MurpheyのBaseline For Front-End Developersもとても参考になるので面接前によく読むことをおすすめします。 注意: これらの質問の多くはオープンエンド型の質問であり、志願者から興味深い考えを引き出すことができるでしょう。この回答は単純でストレートな回答よりもより志願者の能力を見極めるのに役立ちます。 オリジナルのコントリビューター 質問の多くはPaul
WinShape Camps | Overnight Camps, Day Camps & Family Camp
WinShape Camps is THE place to spend your summer.Whether you’re looking for an overnight camp experience for kids, a family camp, a day camp right in your community, or the ultimate summer job, WinShape provides the space to flourish. So how do we take your summer to the next-level? We’re glad you asked! Top-Notch Summer Staff As the driving force behind our next-level adventures, our Summer Staff
Sliding Image Panels with CSS3
Slice 1 - Image 1 Slice 1 - Image 2 Slice 1 - Image 3 Slice 1 - Image 4
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Striped Gradient Mixin | CSS-Tricks
Css2Sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code
CSS3D Clouds
http://mulcms.plucial.com/ja/
