Updating a CSS Variable with JavaScript | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Here’s a CSS variable (formally called a “CSS custom property“): :root { --mouse-x: 0px; --mouse-y: 0px; } Perhaps you use them to set a position: .mover { left: var(--mouse-x); top: var(--mouse-y); } To update those values from JavaScript, you’d: let root = document.documentElement; root.addEventL
CSS Paint API | Blog | Chrome for Developers
New possibilities in Chrome 65 CSS Paint API (also known as “CSS Custom Paint” or “Houdini’s paint worklet”) is enabled by default starting in Chrome 65. What is it? What can you do with it? And how does it work? Well, read on, will ya’… CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usua
するするさせたい：サイボウズ採用情報のアニメーション（その2） - fragmentary
サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。 今回はするするさせられないか、がんばってみる。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションを止める まず、いまのjQueryベースなアニメーションを止める。 コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って
Element Queries - New way of thinking about responsive web design
CSS is the foundation of the contemporary web. It provides the formatting and layout directives that give web pages their distinctive appearance and feel. Nevertheless, traditional CSS has limitations. Media queries, for instance, enable you to modify styles according to the dimensions of the viewport, but they do not consider the size or context of specific page elements. This can lead to inconsi
SVG clip-path Hover Effect
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
timseverien/rcss.js · GitHub
Sometimes you want to apply styles with JavaScript. This can conflict with your responsive styles. For example: var list_items = document.querySelectorAll('.list__item'); var height = 0; var i; for(i = 0; i < list_items.length; i++) { height = Math.max(list_items[i].clientHeight, height); } for(i = 0; i < list_items.length; i++) { list_items[i].style.height = height + 'px'; } This script would run
CSS: User Agent Selectors — Rog.ie
Gone are the days of CSS hacks for browsers...wait, no they're not. There are still little rendering hiccups in both major and minor versions of Safari, Chrome, Firefox, Internet Explorer. The hacks to target those newer browsers are few and far between. Just recently, I ran across a radial gradient bug found only in Chrome 13.0x. Good luck searching for a CSS filter to apply a style purely for th
A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc.
A Responsive Design Approach for Complex, Multicolumn Data Tables In responsive web design, one of the toughest design problems to solve is how format complex tabular data for display on smaller screens. In this post, we’ll explore an experimental approach to rendering a complex table, using progressive enhancement and responsive design methods, that displays comfortably at a wide range of screen
CSS Browser Selector
Clever technique to help you on CSS hacks. Last updated: November 02, 2010 (v0.4.0) CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser. EXAMPLE The JavaScript support is disabled on your browser. Please, enable JavaScript and refresh this page. The color of th
実例から学ぶ、CSS3とjQueryを併用する際の切り分け方法
CSS3でもjQueryでも実装できるシャッターのようにスライドするエフェクトを例に、CSS3とjQueryを併用し切り分けて実装する方法を紹介します。 Garage Door Style Menu デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 マークアップとスタイリング jQuery Method CSS3 Method CSS3とjQueryの併用 -Modernizr マークアップとスタイリング HTML HTMLはクリーンでセマンティックに実装されています。 <ul id="garagedoor"> <li id="shutter1"><a href="#1">Link 1</a></li> <li id="shutter2"><a href="#2">Link 2</a></li> <li id="shutter3"><a href="#3">Link 3
YUI Library Examples: YAHOO Global Object: User Agent Detection
YUI Library Examples: YAHOO Global Object: User Agent Detection This example demonstrates the use of YAHOO.env.ua to identify the user's browser and to branch JavaScript logic based on what browser is being used. (Note: We strongly recommend using feature detection rather than user-agent sniffing to fork code; only use this technique where it is absolutely necessary to do so — for example, in case
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creating CSS Animations Using Move.js — SitePoint
http://flippinawesome.org/2013/08/12/introduction-to-animating-in-html/
Chrome+HTML5 Conference
CssUserAgent (cssua.js)
Adobe - CS5.5 Master Collection