Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
About Snippet
0
Comment
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.
[codepen_embed height=”360″ theme_id=”1820″ slug_hash=”nmEcq” default_tab=”result”]See the Pen Press Time by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
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 margin or padding).
Commenting is disabled.
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.
Categories
Chikka created the world’s first instant messenger for online chat to integrate mobile features via SMS. In 2000 the very first version of Chikka Text Messenger™ was tested for launch by its very first mobile operator partner Smart Communications.
~ Source
~ Source
It’s Chikka’s 14th anniversary today. Just a mere 2 years after its inception, I was jamming with Luna – simply unaware that one day I would be part of this solidly Filipino company.
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
Source: Day Cabuhat’s Instagram - Nice colors from colourcode
- ColorZilla’s Ultimate CSS Gradient Generator
Disclaimers
- 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
TL;DR
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]
Categories
In this basic HTML and CSS tutorial, we are going to demonstrate the following:
- the separation of HTML (content structure) and CSS (visual design)
- how to position a secondary element (like a graphic element or a label) thru CSS
position: absoluteandpadding
And some disclaimers:
- while it discusses semantics, it does not tackle accessibility attributes (say, ARIA)
- it does not show any SEO / screenreader test results regarding the benefits of an HTML markup with intentions on content structure or semantic HTML markup
- it only translates into HTML and CSS a specific component (from a much complicated whole), although the HTML and CSS process remains the same if applied to a whole