Pure CSS Landscape – An Evening in Southwold

[codepen_embed height=”265″ theme_id=”light” slug_hash=”xxGYWQG” default_tab=”css,result” user=”ivorjetski”]See the Pen Pure CSS Landscape – An Evening in Southwold by Ben Evans (@ivorjetski) on CodePen.[/codepen_embed] We could see how amazing of CSS in this pen.

:is() selector

:is() selector 🎉 the successor to :any() and :matches() sneak peak into our talk, here’s a neat gif I made with XD showing what the :is() selector syntax can do. be excited for Chrome Dev Summit y’all! https://developer.chrome.com/devsummit/

Everyone uses CSS frameworks today

Anytime the “what’s your favorite CSS framework” question pops up, you read the same comments: a bunch of developers expressing their love for framework X or Y, and others stating they don’t use frameworks. Some of the reasons why some developers say they don’t use CSS frameworks: Frameworks are opinionated. Why would I need a… continue reading

The Ultimate Guide to Flexbox Centering

Flexbox is a popular CSS layout module that helps you position HTML elements on the screen. There are multiple use cases when it can be a godsend; horizontal and vertical centering is one of them. Flexbox centering solves common alignment problems you might encounter when working with the traditional CSS box model. It allows you… continue reading

Scrolling Gradient

If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that. But, what if you don’t want a perfectly vertical gradient? Like you want just the top left corner… continue reading

CSS & JS Table Examples From CodePen

<Table> has always been a difficult HTML element to style across multiple browsers. But with CSS and JS you can easily achieve that and can create impressive table designs that fit your project. Here’s a list of some of the best CSS and JS tables I found on CodePen. Accordion CSS Table Mobile friendly accordion… continue reading

Styling elements based on sibling count

The original idea belongs to AndrĂ© LuĂ­s, but I think it could be improved to be much less verbose. André’s solution is like this: /* one item */ li:nth-child(1):nth-last-child(1) { width: 100%; } /* two items */ li:nth-child(1):nth-last-child(2), li:nth-child(2):nth-last-child(1) { width: 50%; } /* three items */ li:nth-child(1):nth-last-child(3), li:nth-child(2):nth-last-child(2), li:nth-child(3):nth-last-child(1) { width: 33.3333%; } /*… continue reading

CSS Timeline Examples From CodePen

With the emergence of social media, timelines have started to become popular and be used in other type of websites, such as blogs, portfolios, news portals, weather apps and many more. With the help of CSS & JS you can create stunning timelines that can be used in your current and future projects. That’s why… continue reading

CSS Animating Border

Transitioning border for a hover state. Simple, right? You might be unpleasantly surprised. The Challenge The challenge is simple: building a button with an expanding border on hover. Source: Animating Border | CSS-Tricks

CSS Media Queries for iPads & iPhones

Many times I’ve had to design responsive websites targeting specific devices with CSS media queries, and not just base the break points from the site’s content. Because of this, I’ve ended up with a somewhat large list of CSS media queries for typical devices over the past year or two. I’ve posted these media queries… continue reading

Front End Job Interview Q&A Collection: CSS

Unlike typical software engineer job interviews, front end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas. While there are some existing resources to help front end developers in preparing for interviews, they aren’t as abundant as… continue reading