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 46 items

Translation of the article Components and concerns from adactio.com published on css-live.ru with permission of the author by Jeremy Keith Sometimes we are too addicted to the false opposition in the world of web design and web development. Recently, I noticed one pop up regularly in the design of systems and components. This is about shared responsibility. The web has a long history of separation of structure, presentation and behavior using HTML, CSS and JavaScript. It regularly serves us. If you write code in this order to ensure that something worked (in some way) before adding the next layer, the result will be reliable and resilient to failures. But in the present era of a component indicate that it makes sense to divide things according to their...

Translation of the article Effective Standards Work, Part 2: Threading the Needle from the site infrequently.org for css-live.ru the author — Alex Russell too often We are not satisfied with the process of standardization in the web. This series of articles examines what forces are involved in this, how do we improve the situation, and as efficiently as possible to guide the development of new products. In the first part ("Operational environment") it was about the constant calls for standards and about the forces that give rise to misunderstandings. It also described the dynamics of the ecosystem, where changing anything is so hard, even if not to take into account the volatile corporate strategy browser companies. the Essential ingredients to Promote the...

Translation of the article is Resilient, DRI, Contextual site keithjgrant.com for css-live.ru the author — Keith Grant I've been thinking, what is the philosophy of CSS. One seems to "understand" it, and others don't. I always thought that if you were right to point this out, then maybe CSS would make more sense for those who are "butting" with him. One of my goals motivation in writing the book "CSS inside" was to try to articulate some of these things. Today I'll be on the other side. I'll look at the three primary characteristics of CSS that set it apart from conventional programming languages: sustainability, declarative, and contextual. I believe that understanding these aspects of CSS is the key to mastery in it. CSS stable If you accidentally delete...

For the coder and especially the web-master knowledge of English should be included in the list of mandatory skills. And it's not that English is necessary in order to understand the specifications. If you intend to grow in your profession, you will have a lot to learn, ie read books, websites and forums. And you won't go far if you are going to be limited to Russian-speaking resources. Because the most sensible texts out in English. CSS Live and online English language school Skyeng joined forces and found 10 great resources that will help you in your work – unless of course you know English. to Learn Tutlpus Priceless (and free) resource with video lessons and interactive tasks. More than 270 courses on all occasions, both for beginners and for those who...

Translation of an article State of the Web: Top Image-Optimization Strategies from the website dougsillars.com for css-live.ru with the permission of the author — Doug Sillars Image is a key part of the web. Beautiful images invite the visitor deeper into the story trying to convey your page, whether news, entertainment or e-Commerce. But despite the importance of images, their large size can (potentially) slow down the loading of pages and users in the end simply leave the website. Actually, the HTTP archive shows that the average mobile site for ~50% of images (by volume in kilobytes). For several years, this percentage was relatively constant, but nevertheless the sites are increased, and hence the size of the images too. In fact, compared with the...

Selection of fresh effects, interesting ideas and useful suggestions. "Mona Lisa" from the lines Technology: canvas, JS. Author: Nikita Dubko (@dark_mefody) See live example TIC-TAC-toe on CSS Technology: CSS, SVG, and CSS animations. Author: Jhey (@jh3y) See live example Portrait of Chris Coiera Technology: SVG, CSS, CSS animation, Vue.js, Tween max.js. Author: David Stout (@davidastout3) See live example Switch in the form of a tennis ball Technology: SVG, React.js, GSAP. Author: Chris Gannon (@chrisgannon) See live example CSS animation icon menu Technology: CSS, CSS-transform. Author: Olivia (@oliviale) See live example the Demonstration function crossfade() Under the illustration is the slider to change the values of the cross-fade. Technology: CSS...

Yesterday (already the third for may 2018) teleconference of the Working group CSS has brought a few surprises: in function calc() was added long-awaited opportunity to share the values of the same dimension to each other (for example, calc(500px / 100vw)), obtaining the dimensionless coefficients (and in the future — generally any mathematically valid operations with CSS values, for example, to calculate the area of shapes in square pixels by multiplying the height by the width, or divide the distance by the time, getting the speed of the animation in pixels per second). And pseudo-classes :matches(), :not() (list of arguments) and :has() from a module, selectors level 4 has changed the rules of specificity — now it will not be calculated dynamically...

Translation of the article Where the Break Lines is Complicated. Here's all the Related CSS and HTML. from the site css-tricks.com for CSS-live.ru the author — Chris Coyer let's Say there's a really long word in some text, of a container which is not enough width for him. A typical reason for this is the long URL in the leaked text. What's going on? Depends on CSS. As this CSS controls the layout and how it disposes of this text. That might look like the situation will not fit text: the Text coming out of box — visual problem. the First decision — overflow: hidden; as a sort of "front" reception, not to give the text (and anything) to stay put. But this would harm the accessibility of the text. In some desktop browsers to select text you three times to...

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? ]...