Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.
I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!
If you have a padded content, everything in it will be bound by the padding around it.
But how do we expand an element to the edges of the container, disobeying the padding – something like a full-width picture.
We use negative left and right margins to offset the spacing brought about by the padding.
The tendency of the negative margin is to, instead of inserting the specified space, it allows the content to fill in a space to that direction. So, for margin-left: -1rem, it will allow the content 1rem at the left – couple that with a margin-right: -1rem, it will allow the content 1rem at the right. That will offset the 1rem padding around the container.
[codepen_embed height=”798″ theme_id=”1820″ slug_hash=”FybHu” default_tab=”result”]See the Pen A Dose of Negativity by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
As tested on the img element, margin-right does not work – so we wrap the image in a div and apply the negative margins on that element.
You can use negative margins to offset/correct unwanted spacings around elements.
Update – 10/9/2014
This post has been moved to Design DriveThru.
It’s like trying to solve a puzzle – you try out different solutions until you either come to a dead end or to face more questions.
That’s how it is trying to establish a foundation, a system in simplifying the process of designing an internet product such as websites, apps, and nowadays, whatnot.
How can we simply turn the abstract ideas of clients into a bunch of playing cards we could easily identify and arrange and ultimately build into a house (not made of cards)? Also at the same time, with only a flick of a switch, upload themselves and make available for usage.
That’s what I’m trying to find out (at least the first part).
I’m lazy. But it’s the lazy people who invented the wheel and the bicycle because they didn’t like walking or carrying things.
I’m looking for a bubblegum patch for tables displayed in narrow viewports. So, I thought about display: block, max-width: 100%, and overflow-x: auto. Take a look at the examples: Example 1 shows the problem of the overflowing content of the table and Example 2 shows the quick solution.
[codepen_embed height=”621″ theme_id=”1820″ slug_hash=”Kobqa” default_tab=”result”]See the Pen Lay It on the Table by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
A while ago, I was connecting my HTC phone to Mac and it needed a piece of app to do so. Of course, there’s a requirement to agree to something I seldom read.
My behavior is to press on the label “I agree to the terms of the license agreement” instead of on the checkbox hoping that this will also tick the box.
But nothing happens because the label is a mere label unconnected from the form element (checkbox).
We must provide an action whether the user’s behavior is to press on the checkbox or on the label – the box should toggle.
First of all, let me tell you that I am grateful for our forefathers who relentlessly struggled to gain our independence a long time ago. Independence literally from foreign oppressors.
But personally, this day feels like celebrating my 13th birthday. Cakes and gifts and party hats didn’t bear much delight anymore. Suddenly it became irrelevant.
Today, Google is celebrating Philippine Independence Day. And lots of government officials. And organizations. And Filipino people, too.
Ever use Spotify? It’s been around for many years now but just two months ago it landed here in Philippines – making everyone curb their Aegis.
No doubt that the traditional rectangle image has lost its edge literally. CSS border-radius enabled designers to carve the sharp edges into rounded corners. And take it to the extreme, the corners vanish and the shape becomes a circle.
Spotify’s app presents album and artist covers in a circular manner with the same picture faded in the background.
This is what we’ll recreate using HTML and CSS.
