Search

Nalezeno "LINE": 627

Accordion Rows in CSS Grid

23.7.2020
I’d bet grid-template-columns is used about 10× more than grid-template-rows, but maybe everyone has just been missing out. Eric Meyer chucks a bunch of row lines onto his main site layout grid like this: grid-template-rows: repeat(7, min-content) 1fr repeat(3, min-content); That way, if...

CMD+Z for Git is Here

23.7.2020
Version control with Git has become a “commodity” by now: virtually every software project today uses Git, and virtually every developer knows Git to some extent. This explains why I sometimes hear the following question when I talk about what I do for a living: “A desktop client...

Using Flexbox and text ellipsis together

22.7.2020
You can truncate a single line of text with an ellipsis (…) fairly easily with text-overflow and a few friends. But, as you might expect, that truncation happens at the end of the line of text. What if you want to truncate content in the middle? Leonardo Faria details good use cases for this...

Backdrop Filter effect with CSS

16.7.2020
I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a frosted glass effect and the CSS property is backdrop-filter. The approach? Easy peasy: .container { backdrop-filter: blur(10px); } The...

Collective #613

9.7.2020
1-Line Layouts * Accordion Rows in CSS Grid * viewBox Newsletter * Knopf.css * WordPress Static Site The post Collective #613 appeared first on Codrops

When a Line Doesn’t Break

2.7.2020
We expect a line to break when the text on that line reaches the parent box boundaries. We see this every time we create a paragraph, just like this one. When the parent box doesn’t have enough room for the next word in a line, it breaks it and moves down to the next line and repeats that...

Responsive Styling Using Attribute Selectors

30.6.2020
One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context. <div class="span-12"</div<!-- we want this for small screens  --<div class="span-6"</div<!-- we want this for medium screens --<div...

Line-Animated Hamburger Menu

26.6.2020
This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the “three lines” thing you’re well familiar with), but then animate it in a way that is surprising and fun by controlling the SVG properties in CSS. CodePen Embed...

The Mad Magazine Fold-In Effect in CSS

25.6.2020
This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page in thirds, covering up the middle-third of that image, and a new image would form because the illustration was designed to perfectly line...

Hide Scrollbars During an Animation

24.6.2020
CSS still can’t animate to auto dimensions. .dropdown { transition: 0.2s; height: 0; } .dropdown.open { /* the height will change, but it won't animate. */ height: auto; } There is JavaScript trickery you can try. Brandon Smith outlined several techniques here a little while back....

WebP Image Support Coming to iOS 14

24.6.2020
Apple announced a ton of new updates at yesterday’s WWDC20 keynote address, from new hardware to updated applications. There’s lots to gawk at and enough device-envy to go around. But there’s one little line in the Safari 14 Beta release notes that caught my eye: Added WebP image...

LingoJam

17.6.2020
I’ll sometimes search the web for something like “Small Text Generator” knowing there will be some website that will turn some dumb thing I want to type like: Uhm hi when is that meeting again? into something fun like… ᵁʰᵐ ʰᶦ ʷʰᵉⁿ ᶦˢ ᵗʰᵃᵗ ᵐᵉᵉᵗᶦⁿᵍ ᵃᵍᵃᶦⁿˀ Important note about...

On Adding IDs to Headers

11.6.2020
Here’s a two-second review. If an element has an ID, you can link to it with natural browser behavior. It’s great if headings have them, because it’s often useful to link directly to a specific section of content. <h3 id="step-2"Step 2</a Should I be so inclined, I could...

How to Reverse CSS Custom Counters

11.6.2020
I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this: 5. Post Title 4. Post Title 3. Post Title 2. Post Title 1. Post Title But the above is just text. I wanted to do this with a semantic <ol> element. The easy way This can...

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