Two of the ways in which you can show an illusion of a button being pressed are: darkening the
background-color and nudging its vertical position.
It is important to provide for a hint when a user activates an element in your user interface (in this example, a button). The feedback assures the user that the element “responds” to his action.
The advantage of using
transform: translateY is that it does not affect the elements around it (unlike using
I remember a talk I had with Jayce during a cab ride to MRT, I was telling her about a difficulty I am having with my team about managing projects and deliverables and mostly about their productivity which is greatly dependent on my plans to develop and further each of our careers.
I realized in the process that I have my own inadequacies especially my own productivity, the way I am not focused on their individual projects because most of the time I leave them to plan their own day and I plan my own. Which resulted in a vague sense of accomplishment. What did we finish this week? Can it be improved? Should be do something better than having lots of free time?
So I resolved in resolving my management style first before taking it on other people in my team.
This week, I am being hands-on and aware that I am not micromanaging anyone. Because nobody likes even the worst or best micro-manager in the world.
Do you read the news? I bet you do on Twitter and thru Facebook News Feed.
Some news sites are cleaner than others (especially foreign news sites) wherein the reader could focus on the article.
Have you passed by Guadalupe Bridge? I’m sure you’ve already seen the billboard capital of Metro Manila.
It looks like this on a sunny day:
And this morning, I saw it on a news website:
Might as well:
I have no unsolicited advice for cluttered news sites since revenue maybe booming from advertisements (heck, you only need a linkbait or a scary headline). But local news sites have been this way since a decade ago.
This is what we need. A breath of fresh air.
The Verge has some colorful boxes that contain a preview of their articles. Basically, they look like this (RIP Robin Williams):
We’ll recreate one of those boxes using the following:
- HTML & CSS
- A picture of our favorite local band, Eraserheads
- Nice colors from colourcode
- ColorZilla’s Ultimate CSS Gradient Generator
- I didn’t view the HTML or CSS source of The Verge
- I recreated it using the visible information with emphasis on the content structure
- the semantics could be improved by ARIA
- no information on browser compatibility
This is the final result of the recreation.
[codepen_embed height=”395″ theme_id=”1820″ slug_hash=”tJdGn” default_tab=”result”]See the Pen Recreating The Verge’s Article Preview Boxes by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]