maepon + css   311

jQuery:スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 | NxWorld
スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。
tw  gcw  cdtw  css  javascript 
january 2017 by maepon
Hamburger menu alternatives for mobile navigation – Medium
If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low…
tw  gcw  design  css  javascript 
november 2016 by maepon
Material Design
まじか。すごい変わりっぷりに見える(非デザイナーによる小並感
material  materialdesign  google  css  design  reference  webDesign  tw  gcw 
october 2016 by maepon
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。
tw  gcw  css  javascript  optimization  optimize 
october 2016 by maepon
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
この総合的な入門書では、アドレスバーに google.com と入力してからブラウザの画面に Google ページが表示されるまで、ブラウザの内部で何が起きているかについて説明します。
browser  html  web  css  javascript  tw  gcw 
august 2016 by maepon
vin-ni/hover-on-touch: Javascript plugin for an alternative hover function on mobile devices. It shows secondary information on Taphold & goes to a link on Tap.
hover-on-touch - Javascript plugin for an alternative hover function on mobile devices. It shows secondary information on Taphold & goes to a link on Tap.
tw  gcw  design  css  javascript 
may 2016 by maepon
saadeghi/browser-hack-sass-mixins: Browser-hack sass mixins: Apply your CSS to a specific browser
browser-hack-sass-mixins - Browser-hack sass mixins: Apply your CSS to a specific browser
sass  scss  css  tw  gcw 
april 2016 by maepon
ブラウザやOS、デバイス等を検出してclassを付与するスクリプト・「Detectr.js」
Detectr.js Detectr.jsはブラウザやOS、デバイス等を検出してclassを付与するスクリプトです。他ライブラリに依存せず単体で動作し、圧縮版で3.6KByと軽量です。下記のようにclassが付与されます。 OperaでアクセスしたらChromeと出てしまいましたが、今のChromeクローンライクなOperaでは致し方ないのですかね・・? 検出できる情報はGithubに一覧がありますのでご参照下さい。ライセンスはMIT。 Detectr.js Other Links WPデザインギャラリー トピアンテナ ドメイン検索・ドメイチ jQuery API検索・jSearch Blite desigN
css  javascript  library  tw  gcw 
april 2016 by maepon
Annotating Your (Critical) CSS
The following is a guest post by Wladston Ferreira Filho. We've covered critical CSS before, but the technique covered was specific to SCSS. Here Wladston covers the basics and introduces another way to do it, through PostCSS, and shows an example (with data) of the result. Critical CSS is an effective, but all-too-rarely used approach for improving page rendering performance. Critical CSS is two things together: Deferred loading of the main stylesheet Inlining the most vital ("above the fold") styles Implementing Critical CSS requires some work. For one, it means splitting the CSS in two (the critical parts and the rest) which can be a maintenance problem. Later in this article we'll look at a tool to counter this drawback by splitting CSS automatically based on annotations (i.e. /* comments */ ) in the main CSS file. The Facts Research by Mozilla, Akamai and many other sources confirm: small changes in page render time can significantly alter performance metrics. Under a bad network connection, page performance becomes even more important, as download times can be multiple times higher. Google even provides a service to give pages a "speed score", a not-so-subtle hint that performance can be related to SEO. Properly using Critical CSS is advised by Google to up your score. The technique is certain to cause a positive effect on render speed. The reduction in render time depends on how small you can make your Critical CSS, and how big your main stylesheet. How Critical CSS Works The "normal" approach to CSS is to include your main stylesheet as a in the . The downloading and parsing of that blocks rendering. Critical CSS makes your page render faster by bypassing that blocking. The first step is to "inline" (a streamlined tag in the ) the essential CSS required to render the page's above-the-fold content. That enables the second step: non-critical CSS can be loaded asynchronously (non-blocking), while the web page is rendering. Once the big CSS file arrives, it's appended to the page by JavaScript. A common way to make this work in practice is by using a CSS preprocessor. The preprocessor can detect specially authored comments on the CSS, so it can distinguish the critical CSS, and separate it automatically. This has been covered on CSS-Tricks before, using SCSS. Let's explore doing it in the native CSS syntax. Heads up: to make this work you'll need a server-side tool to inline the critical CSS into all pages you serve as well as
css  tw 
march 2016 by maepon
CSSグラデーションで作った背景パターンのサンプル | NxWorld
利用する機会が多いと思う背景パターンをCSSのグラデーションを使って幾つか作ってみました。
css  pattern  gcw 
november 2015 by maepon
« earlier      
per page:    204080120160

related tags

accessibility  accessible  animate  animation  animations  app  apple  bem  blog  boilerplate  bootstrap  border-radius  brick  browser  browser-test  browserhacks  browserify  browsers  button  canvas  cdtw  chart  checkbox  cheetsheet  clearfix  clip  code  code-snippets  coding  Collection  Color  colors  colorscheme  comparison  compass  compatibility  components  cscc  css  css-framework  css-sass  css3  csscomb  cssgrid  css_animation  demo  design  desktop  dev  development  devices  devtool  documentation  easing  ECMAScript  editor  effects  electron  email  experiments  extract  firefox  flex  flexbox  float  floats  focus  font  fonts  form  forms  foundation  framework  frameworks  free  front-end  frontend  gcw  generator  github  google  gradient  grid  grids  guide  guidelines  gulp  hack  hosting  hover  html  html5  icon  icons  ie  ie11  image  inline  interaction  ios  iphone  jacascript  javascrip  javascript  jquery  jquey  js  keyboard  layout  less  library  libsass  loader  loading  loading-effects  maps  markup  material  materialdesign  matrix  media-queries  mediaqueries  minify  minimal  minimalism  minin  mixin  mixins  mobile  mozilla  news  normalize  oocss  opensource  optimisation  optimization  optimize  osx  pattern  patterns  performance  photo  php  placeholder  plugin  plugins  polyfill  preloader  presentation  programming  progressive-enhancement  radius  reference  rendering  reset  resources  responsive  responsive-design  rwd  safari  sanitize  sass  scss  shadow  slider  slideshare  slideshow  smacs  smacss  small  smartphone  snipets  snippets  social  software  styleDocco  styleguide  stylestats  stylus  sublime  sublimetext  summary  svg  table  tables  template  templates  testing  tips  toggle  tool  tools  topics  transition  transitions  tutorial  tw  tw  twt  type  typography  ui  ux  via:popular  viewport  web  web-components  webcomponents  webdesign  webdev  webtool  WordPress  スタイルガイド 

Copy this bookmark:



description:


tags: