Tech notes for css


CSS 3: Animate or transition from one css value to another

To transition from one css value to another, you can use the transition attribute.

In your element, set the value you want to transition, with the time taken to do such: transition: flex-basis 0.3s; for example.

And the change flex-basis value somehow to see the transition, usually by changing either class or style property of an element.

You can change the type of transition by setting the transition-timing-function attribute: to ease-in-out for example.

css

CSS: Create a simple dropdown without javascript

Here's the absolute basics of creating a dropdown with CSS without javascript.

First create a container box, and give it a class.

<span class="dropdown_container">
</span>

Then within that place the actual content to show pre-dropdown.

<span class="dropdown_container">
  <span>Some text</span>
</span>

Now the content--with a class--to show when the dropdown is activiated:

<span class="dropdown_container">
  <span>Some text</span>
  <span class="dropdown">I am the dropdown</span>
</span>

Now with the css, hide the .dropdown class by default:

.dropdown { 
  display: none;
}

But when we hover over the .dropdown_container let's set the display property of .dropdown to block.

.dropdown_container:hover .dropdown { 
  display: block;
}

And voila. The final code is:

.dropdown {
  display: none;
}
.dropdown_container:hover .dropdown {
  display: block;
}

...

<span class="dropdown_container">
  <span>Some text</span>
  <span class="dropdown">I am the dropdown</span>
</span>
css

CSS: Flexbox simple explainer

Although flexbox is a rather lot to comprehend, it can be broken down into a bunch of questions asked to the layout items.

Things should become clearing in the example afterward.

Conversation

To the container:

  • "What axis do you want to place your items down?" (flex-direction)
  • "While placing the items down that axis, how would you like to align the items?" (justify-content)
  • "How would you like those items aligned down the other axis?" (align-items)
  • "If there's not enough space in the container for the items, should I wrap them?" (flex-wrap)

To the individual items:

  • "Do you want to differ to the way you're being aligned, regarding the align-items propery?" (align-self)
  • "What's the basis of the size down the flex-direction before growing or shrinking the items (in px or percentage)?" (flex-basis)
  • "While layout out down the flex-direction, should we grow your size to fill the space?" (flex-grow)
  • "While layout out down the flex-direction, should we shrink your size" (flex-shrink)

Example

Let's say you've got a div that takes up the whole screen (height and width at 100%). And you want a collection of divs within to be placed at the bottom of the screen in the center.

The questions would be:

To the container:

"I want the items places down the 'row', or should I say X, axis" (flex-direction: row), "I want them aligned in the center" (justify-content: center), "I want those items aligned to the bottom of the Y axis" (align-items: flex-end), "And if there's not enough room, wrap the items" (flex-wrap: wrap).

To the items:

You'd leave these blank, in this case.

If you wanted to the last item to be aligned, not to the bottom, but to the middle, you could set align-self: center on that item. You could also use 'flex-basis' to give it 50% of the space down the flex-direction axis

If you played with any of the flex-grow or flex-shrink properties, it'd no longer be aligned down the middle of the flex-direction, since it'd start taking up all the space available in the case of flex-grow: 1, with flex-grow: 2 meaning take up twice as much room as the item with flex-grow: 1.

css css-flexbox

Page 2 of 2
prev
Click me