Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
Clipping in CSS and SVG — The clip-path Property and <clipPath> Element Published on 08 Jul, 2014 CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CS
Fixed Table Layouts | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. There is a CSS property for tables that, it seems to me, is well-supported, little known, and super useful. It changes the way that tables are rendered such that it gives you a sturdier, more predictable layout. It is this: table { table-layout: fixed; } The default property for table-layout is aut
ScaleOut | Supership
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
Opera News
AI Meet Opera Neon, the new AI agentic browser May 28th, 2025 Opera Neon is our first AI agentic browser designed for the next generation of the web. Desktop, Opera for iOS Opera wins two 2025 iF Design Awards May 15th, 2025 Hey all, Today, we’re proud to announce that Opera has won two 2025 iF Design Awards: one each for Opera... Desktop Opera Air gets performance lift, quality of life improvemen
PolymerでのCSSについて - Qiita
最近はPolymerにどっぷりです。Polymerをこのタイミングでプロダクション環境に使おうとしているのは、正直かなり厳しいとは思いますが、人柱のつもりでまぁ・・・。いや、プロダクション環境で人柱すんなって話ですね。 それはそれとして、Polymer、というかWeb Componentsが現状全うに動作する環境、というのは、事実上Chrome(PC/Android)しかありません。iOS上ではまだ確認してませんが、運がよければネイティブ実装があるのかなー、という程度です。 実際には、Platform.jsを確認してもらえればわかりますが、他のブラウザでネイティブ実装が進んでいるものはかなり少ない、ほとんどないといっても過言ではありません。 Web Componentsを利用するモチベーションとして、デザインの完全なカプセル化が可能、というのがあげられると思います。 （JavaScript
CSS Font Loading Module Level 3を試してみた - console.blog(self);
1年以上前から、ちゃんと調べたいと思っていたけど、やっていなかった。 CSS Font Loading Module Level 3は、2014/06/30時点で最終草案(Last Call Working Draft) になっている。CSS Font Loading Module Level 3はフォントのローディングに関する仕様書。 CSS Font Loading Module Level 3 - W3C Last Call Working Draft, 22 May 2014 最新のEditor's Draftはこっち。 CSS Font Loading Module Level 3 - Editor’s Draft フォントについての仕様書はCSS Font Module Level 3で、2014/06/30時点で勧告候補(Candidate Recommendation)にな
webpack
HomeGetting StartedMotivationWhat is webpack?Installation (WIP)Usage (WIP)Require Modules (WIP)Vendor Modules (WIP)Using LoadersDev Tools (WIP)Step-by-step tutorialsGetting startedGuidesCommonJsAMDUsage with GruntUsage with gulpwebpack for browserify usersCode SplittingOptimizationLong-time CachingHow to write a loaderHow to write a plugin (WIP)Shimming modulesTestingComparisonListsList of loaders
Webpack
Module Bundler Think Browserify with more Webpack vs Browserify Works with almost any module system AMD, CJS, UMD, Component, Latest Hipster Module System (LHMS) Can require in CSS, Images, Fonts etc. Uses CJS syntax to load modules var angular = require('angular'); angular.controller('foo', function() { }); Loaders Like browserify transforms Think CSS preprocessors ES6 Module Transpilers Convert
Grouping related classes in your markup – CSS Wizardry
21 May, 2014 Grouping related classes in your markup Written by Harry Roberts on CSS Wizardry. Table of Contents How it works Scanning your code Featured case study: NHS Vim Validity Errors Extra bytes Teams JavaScript To use, or not to use? N.B. 2016-02-23 I no longer advise this technique—it proved far too problematic on teams where people we unfamiliar with the syntax. If you do wish to clearly
CSSで画像を六角形にくり抜く - Weblog - Hail2u.net
Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転させて重ねるだけでも良かったけど、CSSグラデーションで重ねた方がフレキシブルに作れた。 Demo: CSS HEX Clip 切り抜きはCSSグラデーションを上に重ねて行うので、何らかの要素で括る必要がある以外には特別なマークアップは必要ない。 .hexclip { display: inline-block; position: relative; line-height: 1; background-image: linear-gradient( 30deg, #fff 0, #fff 18%, transparent 18%, transparent 100% ), linear-gradient(
CSSのローディング・アイコンのコスト
今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin
Responsive & Fixed One Page Nav
Adtile Technologies wrote this on Mar 3, 2014 Today, we are open sourcing the JavaScript code and the assets we used to build the above functionality for our new website. The code and examples are hosted on GitHub and can be found from here. There’s a live example too, under our site, give it a spin. Below is a list of some of the features provided: Fixed Nav Features Fixed positioned, always vis
Improving UI Animation Workflow with Velocity.js | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The following is a guest post by Julian Shapiro. Julian recently released Velocity.js, a more performant jQuery replacement for .animate(). He recently wrote about how JavaScript animations can be so fast over on David Walsh’s blog, a topic we’ve covered here as well. In this article, Julian introd
Elm - delightful language for reliable web applications
Elm uses type inference to detect corner cases and give friendly hints. NoRedInk switched to Elm about four years ago, and 300k+ lines later, they still have not had to scramble to fix a confusing runtime exception in production. Learn more. -- TYPE MISMATCH ---------------------------- Main.elm The 1st argument to `drop` is not what I expect: 8| List.drop (String.toInt userInput) [1,2,3,4,5,6] ^^
Продвижение сайтов в Москве - заказать услуги по раскрутке сайта, узнать цены на SEO от Demis Group
Более 20 лет выводим сайты клиентов в топ Яндекса и Google, увеличиваем объем органического трафика, количество звонков и заявок. Выполняем весь комплекс работ по развитию и продвижению — от оптимизации посадочных страниц под требования поисковых систем до проработки коммерческих факторов.
Refills - Patterns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus
CSS vs. JS Animation: Which is Faster?
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point walkthrough of how JavaScript-based DOM animation libraries, such as Velocity.js and GSAP, are more perfor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS JIT: Optimizing CSS Selector Matching with Just-in-Time Compilation
Buttons Builder
AniJS, A Library to Raise your Web Design without Coding