CSS

1319 bookmarks
Custom sorting
Running the Numbers: CSS Specificity
Running the Numbers: CSS Specificity
CSS selectors have an inherent level of specificity which is a measurement of how distinctly we are defining the intended element(s) that we are trying to style.
·elinkdesign.com·
Running the Numbers: CSS Specificity
Solved With CSS! Dropdown Menus | CSS-Tricks
Solved With CSS! Dropdown Menus | CSS-Tricks
A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.
·css-tricks.com·
Solved With CSS! Dropdown Menus | CSS-Tricks
1 HTML Element + 5 CSS Properties = Magic! | CSS-Tricks
1 HTML Element + 5 CSS Properties = Magic! | CSS-Tricks
Let's say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that's there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves? The desired
·css-tricks.com·
1 HTML Element + 5 CSS Properties = Magic! | CSS-Tricks
Best Practices With CSS Grid Layout
Best Practices With CSS Grid Layout
In some ways, we are all still so new to CSS Grid Layout. A lot of folks keep asking about best practices that are available out there. Rachel Andrew ran a survey and shares the results as well as her thoughts in this article.
·smashingmagazine.com·
Best Practices With CSS Grid Layout
A Collection of Interesting Facts about CSS Grid Layout | CSS-Tricks
A Collection of Interesting Facts about CSS Grid Layout | CSS-Tricks
A few weeks ago I held a CSS Grid Layout workshop. Since I'm, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you. Have fun! Negative values lower than -1 may be used for
·css-tricks.com·
A Collection of Interesting Facts about CSS Grid Layout | CSS-Tricks
Another Collection of Interesting Facts About CSS Grid | CSS-Tricks
Another Collection of Interesting Facts About CSS Grid | CSS-Tricks
Last year, I assembled A Collection of Interesting Facts about CSS Grid Layout after giving a workshop. This year, I worked on another workshop and I've learned some more exciting facts about the layout spec we all so love. Of course, I'm not going to keep my knowledge to myself. I'm happy to share my findings once
·css-tricks.com·
Another Collection of Interesting Facts About CSS Grid | CSS-Tricks
New CSS Features Are Enhancing Everything You Know About Web Design | CSS-Tricks
New CSS Features Are Enhancing Everything You Know About Web Design | CSS-Tricks
We just hit you with a slab of observations about CSS Grid in a new post by Manuel Matuzo. Grid has been blowing our minds since it was formally introduced and Jen Simmons is connecting it (among other new features) to what she sees as a larger phenomenon in the evolution of layouts in web design. From Jeremy Keith's
·css-tricks.com·
New CSS Features Are Enhancing Everything You Know About Web Design | CSS-Tricks
Ninjas of Web Development: 30+ CSS Puns That’ll Crack You Up
Ninjas of Web Development: 30+ CSS Puns That’ll Crack You Up
Sometimes the words and commands are matched in a very funny way. Probably this inspired the clever guys to make up the witty puns. Here we prepared for you the most comic... #coding #colors #css3
·templatemonster.com·
Ninjas of Web Development: 30+ CSS Puns That’ll Crack You Up
Art Directing For The Web With CSS Grid Template Areas
Art Directing For The Web With CSS Grid Template Areas
(*This article is kindly sponsored by CoffeeCup Software*.) If you’re at all serious about web design or development, you need to be serious about learning and using CSS Grid, too. Andrew Clarke explains how.
·smashingmagazine.com·
Art Directing For The Web With CSS Grid Template Areas
Collection of CSS snippets
Collection of CSS snippets
Some time ago I asked on twitter about the favorite CSS snippets people use regularly. What's you favorite CSS snippets which you use again and again?Rules:- Has to fit in one
·justmarkup.com·
Collection of CSS snippets
Introduction to the CSS Grid Layout With Examples
Introduction to the CSS Grid Layout With Examples
What You'll Be CreatingIn this tutorial, I will cover the basics of the CSS grid layout with example scenarios. CSS Grid is supported by almost all modern browsers now, and it is ready to be used...
·code.tutsplus.com·
Introduction to the CSS Grid Layout With Examples
mix-blend-mode
mix-blend-mode
The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.
·developer.mozilla.org·
mix-blend-mode
Blend mode
Blend mode
The blend-mode CSS data type describes how colors should appear when elements overlap. It is used in the background-blend-mode and mix-blend-mode properties.
·developer.mozilla.org·
Blend mode
background-blend-mode | CSS-Tricks
background-blend-mode | CSS-Tricks
The background-blend-mode property defines how an element's background-image should blend with its background-color: .container { background-image: url('image.jpg'); background-color: red; background-blend-mode: screen; } See the Pen background-blend-mode by CSS-Tricks (@css-tricks) on CodePen. In the demo above, the
·css-tricks.com·
background-blend-mode | CSS-Tricks
Basics of CSS Blend Modes | CSS-Tricks
Basics of CSS Blend Modes | CSS-Tricks
Bennett Feely has been doing a good job of showing people the glory of CSS blend modes. There are lots of designerly effects that we're used to seeing in static designs (thanks to Photoshop) that we don't see on the web much, with dynamic content. But that will change as CSS blend modes get more support. I'd like to
·css-tricks.com·
Basics of CSS Blend Modes | CSS-Tricks
CSS Decorative Gallery - Web Designer Wall - Design Trends and Tutorials
CSS Decorative Gallery - Web Designer Wall - Design Trends and Tutorials
Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra tag and apply a background image to create […]
·webdesignerwall.com·
CSS Decorative Gallery - Web Designer Wall - Design Trends and Tutorials
Focusing on Focus Styles | CSS-Tricks
Focusing on Focus Styles | CSS-Tricks
Not everyone uses a mouse to browse the internet. If you’re reading this post on a smartphone, this is obvious! What’s also worth pointing out is that there are other forms of input that people use to get things done. With these forms of input comes the need for focus styles. People People are complicated. We don’t
·css-tricks.com·
Focusing on Focus Styles | CSS-Tricks