Search

Nalezeno "aspect ratio": 24

Is There Too Much CSS Now?

24.10.2022
As front-end developers, we’ve wished for a lot of things over the years — ways to center things in CSS, encapsulate styles, set an element’s aspect ratio, get finer-grained control over our colors, select an element based on its children’s … Is There Too Much CSS Now? originally...

Collective #698

10.2.2022
Creating Generative SVG Grids * CSSUI * Aspect Ratio is Great * How to Favicon in 2022 * Stylo The post Collective #698 appeared first on Codrops

“Weak declaration”

23.6.2021
PPK looks at aspect-ratio, a CSS property for layout that, for the most part, does exactly what you would think it does. It’s getting more interesting as it’s behind a flag in Firefox and Safari now, so we’ll have … The post “Weak declaration” appeared first...

Super Mario World Is Now Playable In Widescreen

21.6.2021
Software engineer and SNES ROM hacker Vitor Vilela has led a team which has created and released Super Mario World Widescreen, a download that lets you play Nintendo’s Super Mario World—first released in 1990—on modern widescreen displays.Read more

Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal

10.5.2021
I recently came across an interesting problem. I had to implement a grid of cards with a variable (user-set) aspect ratio that was stored in a --ratio custom property. Boxes with a certain aspect ratio are a classic problem in … The post Variable Aspect Ratio Card With Conic Gradients...

Collective #647

4.2.2021
Mutsuacen * New aspect-ratio CSS property * Fusuma * Dark Patterns in UI Copy 2021 The post Collective #647 appeared first on Codrops

New in Chrome 88: aspect-ratio

20.1.2021
And it was released yesterday! The big news for us in CSS Land is that the new release supports the aspect-ratio property. This comes right on the heels of Safari announcing support for it in Safari Technology Preview 118, … The post New in Chrome 88: aspect-ratio appeared first...

`aspect-ratio` is going to deprecate FitVids

8.1.2021
Jen was just tweetin’ about how the latest Safari Technical Preview has aspect-ratio. Looks like Chrome and Firefox both have it behind a flag, so with Safari joining the party, we’ll all have it soon. I played with it … The post `aspect-ratio` is going to deprecate FitVids...

Collective #637

30.11.2020
Building TakeNote * Boop! * Native Aspect Ratio Boxes in CSS * List.js * A tale of four prototypes The post Collective #637 appeared first on Codrops

Fluid Images in a Variable Proportion Layout

3.7.2020
Creating fluid images when they stand alone in a layout is easy enough nowadays. However, with more sophisticated interfaces we often have to place images inside responsive elements, like this card: For now, let’s say this image is not semantic content, but only decoration. That’s...

On fixed elements and backgrounds

3.6.2020
After just playing with apsect-ratio and being pleasantly surprised at how intuitive it is, here’s an example of CSS acting unintuitively: If you have a fixed element on your page, which means it doesn’t move when you scroll, you might realise that it no longer acts fixed if you apply a...

A First Look at `aspect-ratio`

29.5.2020
Oh hey! A brand new property that affects how a box is sized! That’s a big deal. There are lots of ways already to make an aspect-ratio sized box (and I’d say this custom properties based solution is the best), but none of them are particularly intuitive and certainly not...

A Grid of Logos in Squares

6.4.2020
Let’s build a literal grid of squares, and we’ll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo grid before. You can probably already picture it: an area of a site that lists the donors, sponsors, or that is showing off...

Fluid Width Video

11.3.2020
IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting the video and presenting it via the HTML5 <video tag. You might...

Do This to Improve Image Loading on Your Website

20.2.2020
Jen Simmons explains how to improve image loading by simply using width and height attributes. The issue is that there’s a lot of jank when an image is first loaded because an img will naturally have a height of 0 before the image asset has been successfully downloaded by the browser. Then it needs...

Centering a div That Maintains Aspect-Ratio When There’s Body Margin

18.2.2020
Andrew Welch had a little CSS challenge the other day to make an ordinary div: • centered vertically + horizontally• scales to fit the viewport w/ a margin around it• maintains an arbitrary aspect ratio• No JS There's a video in that tweet if it helps you visualize the challenge. I saw Paul...

Helping Browsers Optimize With The CSS Contain Property

10.2.2020
There is a growing number of things that we have to do to help the browser achieve for peak performance. Responsive image syntax has several. For example, needing to tell the browser how large the image will be in our layout with the sizes attribute and how big the images are with w descriptors....

Oh Hey, Padding Percentage is Based on the Parent Element’s Width

13.11.2019
I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the element itself. So if an element is 1,000 pixels wide with padding-top: 50%, that padding is 500 pixels. It's weird having top padding based...

Responsive Iframes

25.7.2019
Say you wanted to put the CSS-Tricks website in an <iframe>. You'd do that like this: <iframe src="https://css-tricks.com"></iframe> Without any other styling, you'd get a rectangle that is 300x150 pixels in size. That's not even in the User Agent stylesheet, it's just some...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace