In this tutorial, we're going to explore the CSS shape-outside property which allows us to break out of the box a little. There's a reason it's called the box model, and that's because every element in a document is represented as a rectangular box. Even with CSS properties that alter the shape of an element - such as border-radius - we are still, by default, confined to a box.
CSS 3D Transforms can be used in plenty of creative ways, particularly if combined with CSS Transitions! Today’s nugget is a good example of how to use CSS to create a parallelepiped, whose faces are different projects. A filter on top of the page triggers the 3D rotations that reveal new projects.
How we approach layout on the web is changing, and at the forefront of that change is CSS Grid Layout. This quick start guide will skip the details and nuances, instead helping you get stuck in, right now.
If you have ever jumped on an escalator, then you can quickly understand floats. Your <div> is almost perfect. You decide to introduce some floats to fix the relationship between a few elements. The next thing you know, your newly floated elements jump out of your carefully chosen order, and stick to the side of your div like a magnet. The phrase “unintended behavior” comes to mind.
Hover is a pseudo class and can be used to style state. The hover state is active when a user’s mouse enters the bounding box of an element and is inactive when the user’s mouse leaves it. In this episode, we’ll look at the :hover pseudo-class on text links and cover some of the other link pseudo classes as well.
In the video covering letter G, we looked at the General Sibling selector which allows styling of a sibling element. There’s also the other child and sibling selectors for traversing down/across an element tree. But what about parent selectors? Well, despite the multiple use-cases of needing to select a parent element based on whether it contains certain children, this feature is not currently available in CSS.
General sibling is a little known but very useful CSS selector. It allows the styling of an element that is a sibling of another. We’ll look at the syntax, a practical example and then a quick round up of the other child and sibling selectors in CSS.
Learning CSS is a must these days and almost all of us were at the point where CSS was a big enigma and we had to learn it bit by bit. The easiest way to learn it is by making a website. With the help of good old trial and error you can learn it without reading 700 pages from CSS learning books where there’s more editorial text than direct explanations for a piece of code.
The float property is most commonly used for page layout. However, the original purpose of float was to allow text to wrap around an object, something commonly seen in print design. As float is often not used as originally intended, working with it can be a bit fragile and a bit tricky until you get used to its quirks.
Floating is great if you want to move an element to the left or right of a page, but unfortunately, you can’t do float: center to center an element. What a pain right? Well, never fear, here’s the low down on centering all sorts of elements.
There’s a number of pseudo-classes in CSS. These pseudo-classes help us style different states and target specific elements based on their relationship or position to other elements. The :enabled and :disabled pseudo-classes style form elements that can or cannot be filled in or selected. The :enabled pseudo-class can be used to style the enabled state of form elements such as button, input, optgroup, option, select and textarea elements.
Have you seen the emerging trend of a glitch effect creeping into some websites? Are you wondering how some of these effects were created?
I’ve got two sets of inputs and buttons here. They are both in their default state of enabled which we can demonstrate by styling them with the :enabled pseudo-class, giving them a dark gray background and a blue text color. If I now add the disabled attribute to the HTML of the first set of inputs, the user agent styles for disabled fields takes over and our :enabled styles do not as the inputs are no longer enabled. We can control the styling of disabled inputs in CSS with the :disabled pseudo-class.
vmin and vmax is an excellent substitute for, or addition to, CSS orientation media queries (@media screen and (orientation : portrait) or @media screen and (orientation : landscape)), since they respond immediately to the aspect ratio of the screen.
I’ve previously demonstrated fullscreen background video for web pages and shown how to use mix-blend-mode to create auto-contrast text, but I’ve never combined them in a single article like this one. Recently the fashion site Everlane site demonstrated just such a combination, which I’ve used as an inspiration for this article.
In this article, we will explore a concept that lets us resize our components by using CSS relative units (%, em, or rem). Not just the type size, but all the UI in that component. We'll look at practical examples, pros and cons of the approach, and even a complete web page built out in this manner.
The color property is used to change the color of text on the page, but what about the color of selected text? Using the ::selection pseudo element, text highlighted with the mouse can be styled. There are only a handful of properties that can be altered when styling the selected text.
How elements take up space on the page is controlled by their display. There used to be two broad display types in CSS: elements were inline or block-level. Block elements start on a new line and fill the width of their parent container.
Every element on a webpage is a box. The properties of the box can be described as the box-model. In this tip, I’ll be taking you through a “new and improved” approach for adjusting the box sizing so it seamlessly works across a whole project. This involves working with the width, height, margin, padding and border of the box.
The nth-child() and nth-of-type() selectors are “structural” pseudo-classes, which are classes that allow us to select elements based on information within the document tree that cannot typically be represented by other simple selectors. In the case of nth-child() and nth-of-type(), the extra information is the element’s position in the document tree in relation to its parent and siblings. Although these two pseudo-classes are very similar, they work in fundamentally different ways.