Directory of RSS feeds
Statistics

RSS feeds in the directory: 2797

Added today: 0

Added yesterday: 0

Hi-Tech / Internet

Css-live - Severstal your world!

Community that speaks the languages of HTML, CSS and JavaScript

Found 38 items

Translation of the article eqio — A simple, tiny alternative to the element/container queries from the site medium.com for css-live.ru the author — Matt Stowe the Classic principles of responsive design are no longer responding to our developers design systems and component libraries for web needs. If we agree with Ethan Marcotte, the founder of the concept of "responsive design", it must be true. When we divide our components into separate reusable pieces with React and Vue, and similarly build the CSS architecture to fit classes with limited scope or libraries CSS-in-JS, everything is fine... but only until then. When it is necessary to use a component not in the context for which it was created, or the component is changed regularly to some spells and...

Translation of the article More accessible markup with display: contents from the site hiddedevries.nl for css-live.ru the author — Hidde de Vries CSS grids (CSS Grid Layout) allow you to turn an element into a grid (mesh) and positioning him to direct descendants (children) of this element. With this in mind, there is a temptation to use more "flat", uniform markings, but the markings less meaningful, the worse it usually its accessibility. C display:contents can be placed in the grid "grandchildren", so that we can be and accessible markup, and beautiful layout. Let us look at this in more detail! Below in more detail, I will explain what I mean by "children" and "grandchildren", and then show how you can improve the deal with display:contents. Note: in...

Translation of the article CSS Motion Path beyond the Big Three Properties with site danielcwilson.com published on css-live.ru with permission of the author — Dan Wilson . Although it works only in Chromium-browser and the draft specification is still under heavy development, animation, motion along the trajectory (CSS Motion Path) have grown a lot in these three years since the first implementation in Chrome 46. I have already described the basics of the main applications of CSS Motion Path in the form of three properties — offset-path defines the trajectory along which can move the element offset distance to position the element on this path, and offset-rotate, which is responsible for how the party moves forward sweep. After my review of the...

Selection of fresh effects, interesting ideas and useful suggestions. WebGL-slider with distortion Technology: CSS animation, Three.js, jQuery.js, Tweenmax.js. Author: Al Thornton (@ashthornton) See live example Animation buttons alignment Technology: CSS, jQuery.js, Tweenmax.js. Author: Valery Alikin (@AlikinVV) See live example the gallery Technology: CSS, CSS transforms, Photoswipe.js, lazysizes.js. Author: Michal Nivicola (@mican) See live example Create.js + Oreo Technology: canvas, create.js. Author: Sebastian DeRussy (@derossi_s) See live example the Icons of the Avengers Technology: CSS clip-path, JS. Author: Jhey (@jh3y) See live example Chronological tape Technology: SVG, CSS, JS. Author: Steve Gardner (@steveg3003) See live example the Infinity...

Translation of the article Why is not using the CSS cascade a problem? from the site www.quirksmode.org for css-live.ru the author — Peter Paul Koch When I announced I was going to write something for the JavaScript developers who do not understand CSS, many (including Jeremy) said that essential to be the head of the cascade and inheritance, as too many JS developers seem don't understand them. at First I agreed, but then I've got doubts, which I'm writing this note. as far As I can see, the problem is not that JavaScript developers don't understand the cascade, and that they do not want to use it. But is this a problem? global scope In CSS there is only global scope. Rule button.primary affect all buttons with that class on the whole page. This is the...

Selection of fresh effects, interesting ideas and useful suggestions. Animation about a designers CSS Technologies: CSS animation. Author: Julia Muzafarova (@miocene) See live example the Horse in motion by Edward Muybridge Technology: CSS animations, variable font. Author: Lawrence penny (@lorp) See live example Puzzle "tower of Hanoi" the Goal is to move all the disks from the left "tower" on the right. For once you can move only one disk. With a greater disk cannot be placed on a smaller one. Technology: CSS. Author: Bence Szabo (@finnhvman) See live example choose your favorite time of day at the Bottom, under the window you can choose the time of day. Technology: SVG, CSS, JS. Author: Olivia (@oliviale) See live example SVG pereklichka between tabs...

Translation of the article Another Collection of Interesting Facts About the CSS Grid site css-tricks.com for CSS-live.ru the author — Manuel Matusovic last year I put together a collection of interesting facts about the CSS Grid Layout after my master-class. This year I was working on another master class and learned a few fascinating facts about our beloved BOM layout. I'm not greedy, so once again happy to share their knowledge and insights with you, with the community CSS-Tricks. How does the shorthand notation grid to Read and understand the specification of the grid — Yes, or indeed any other — it is sometimes very difficult For example, I after a while understood how to use the short entry grid: | / [ auto-flow && dense? ] ? | [ auto-flow && dense? ]...

Selection of fresh effects, interesting ideas and useful suggestions. The slider in the scientific style of Technology: SVG, GSAP. Author: Chris Gannon (@chrisgannon) See live example responsive table with sorting data Technology: CSS, JS, jQuery. Author: Erin E. Sullivan (@erinesullivan) See live example the Demonstration of the contrast of text and background you Can change the color of text and background in both parts. Technology: CSS, variables, JS. Author: Mustafa ENES (@pavlovsk) See live example the hover Effect on the button Technology: SVG, CSS, CSS transforms. Author: Andreas Storm (@andreasstorm) See live example Tunnels Technology: Three.js, GLSL. Author: Liam Egan (@shubniggurath) See live example Graphic poster on the CSS how they can be...

Translation of the article Focusing on the Focus Styles from the site css-tricks.com for CSS-live.ru the author — Eric Baily Not every Internet user has a mouse at hand. When reading from a smartphone obviously! Besides, there are other input methods which people solve their problems. And they need styles for focus. the People People are difficult to find. We are not always consistent, and our decisions aren't always logical. Sometimes we even do something just like that. We easily get tired of messing around and tinkering with things to better fit our needs, regardless of their original purpose. People are also mortal. We can get sick or hurt, sometimes both troubles at once. Sometimes it's on time, sometimes for life. Anyway, sometimes the usual methods...

Selection of fresh effects, interesting ideas and useful suggestions. Solar system on CSS to Switch between planets is possible the navigation on the left or click over the image. Under the description of the planet is working the button "Read more" ("More"). Technology: CSS, CSS animation, CSS transformation. Author: Jamie Coulter (@jcoulterdesign) See live example Building with increasing roof Pull the roof up or down to change the number of floors. Technology: CSS, CSS grids, JS, jQuery.js. Author: creme (@creme) See live example three-Dimensional mosaic of hexagons Technology: Three.js, hex-grid.js, TweenMax.js. Author: Ivan Juarez N. (@radixzz) See live example Button to hide/show the password on CSS Click on the eyes. Technology: CSS. Author: n7best...

Translation of the article is A f*cking rant about f*cking const vs f*cking love site https://jamie.build/ css-live.ru author James Kyle I didn't want to be the author of this article, but Chris forced me, so this bloke is the main culprit. And I just got under the hand. But you are pretty sorted with the const in your JavaScript code, and I'm the least bit, but it really does. 1. const didn't work for me, and we all know it let's face it, what's the use of const zero point horseradish tenths, and the meaning of it we just invent... const ATONEMENTS = { true: "?" } ATONEMENTS.right = "but the figure"; ATONEMENTS.nafig = "live now with this"; const does not imply any invariance of the value, it only implies the invariance of the binding. Which is... Well...

Although the language of CSS has long been no releases (i.e. "CSS3" will never be "ready" and "CSS4" and above all will not be), the working group CSS periodically releases "snapshots" (snapshots), reflecting the real CSS state at any given moment. The last such "the", CSS-2017, was published a year ago, since then the W3C decided to make their annual — in something like the HTML5 specifications.x and ES20xx. Already have editorial draft the next "snapshot", CSS-2018. As before, the main audience for these "images" — browser vendors: it's time to sell (including without prefixes and flags), and what is better to experiment careful and sometimes have to wait at all. But the section "the Official definition of CSS" — the list of technologies that the W3C...

Selection of fresh effects, interesting ideas and useful suggestions. SVG image while scrolling Technology: SVG, CSS, jQuery.js, Scrollify.js. Author: Ali Klein (@AliKlein) See live example Unusual slider style slider Technology: JS, Anime.js. Author: lmgonzalves (@lmgonzalves) See live example Polygons while Holding the cursor shape can be moved. Please note that the color changes depending on the position relative to each other (red, green, blue). Technology: canvas, JS, Pixi.js. Author: Blake Bowen (@osublake) See live example Animation "Elders" based on Lovecraft the Lighting changes depending on the cursor position. Technology: JS, Three.js, GLSL. Author: Liam Egan (@shubniggurath) See live example Turn books on CSS Animation works depending on the...

Translation of the article Additive Animation with the Web Animations API from the site css-tricks.com for CSS-live.ru the author — Dan Wilson These features are not yet supported in any stable browser. However, everything I say is already in Firefox Nightly, and the key part is in Chrome Canary (when the flag "Experimental web platform"), so while reading this article I recommend that you use one of these browsers to see max in action. What method of animation on the web would you prefer the time will come when you'll need to animate one property in the individual animations. For example, you have the effect on mouse-over, scaling the image and the click event which invokes a shift — they both affect the transform. By default, these animations are not...

Selection of fresh effects, interesting ideas and useful suggestions. Three-dimensional town Click and hold the cursor you can "twist" the landscape. looks Spectacular in full page mode. Technology: canvas, JS. Author: Dave Desandro (@desandro) See live example Shuffling cards at the Vue Button to Shuffle the deck is shuffled. Buttons Slow — Medium — Fast, you can control the speed. Technology: CSS, Vue.js. Author: Dj Hassan (@itslit) See live example Animation page unsubscribe from a list Click on buttons to view animations. Technology: SVG, CSS transforms, GSAP. Author: agathaco (@agathaco) See live example Generator houses a New set is generated by clicking anywhere on the canvas. Technology: SVG, CSS, JS. Author: smlsvnssn (@smlsvnssn) See live example...