Category: Frontend Design
-
Press Time: Using CSS Transform to Nudge a Button
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. See the Pen Press Time by Brian Dys Sahagun (@briandys) on CodePen. It is important to provide for a hint when a user activates an element in your user interface…
-
The Separation of HTML and CSS
In its basic sense, HTML is standalone. It is independent from CSS especially from the perspective of screenreaders and search engine crawlers. This goes to show about the importance of semantics and content structure in the HTML markup. In this regard, I strongly advocate for the manipulation of the style sheet instead of the manipulation…
-
Recreating Spotify’s Album Cover
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. Circular images everywhere 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…
-
CSS Regions–we’re waiting for you
Your content will flow through various containers (called regions) which you specify. The CSS regions module allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be combined with positioning schemes as defined by…
-
To
or to
?
I’m being confounded about an article I’ve read about your logo being an image (and not a background image). You would notice about the differences between the two wherein img puts your actual image on the page and h1 replaces the text with a background image of your logo. You may be using one method…
-
Frontend UI Checklist Archive
Step 1: text + semantic tags Convert the mock-up to plain text and wrap each text to its semantic HTML tag write using notepad/simple text editor and save as .html no need to write <html><body> etc… begin writing the actual markup of the module you’re assigned to don’t use <div> or <span> for headings, use…
-
From vitruvian to breakdancing: The three frontend layers of a webpage
This week, I’m conducting a workshop on basic HTML and CSS at Chikka. Participants come from the corporate communication, creatives, and content teams. For a martian to easily digest a complicated topic such as a webpage, I’ve used a human being as a metaphor for the three frontend layers of a webpage. Frontend meaning the…
-
Designing HTML Emails
Designing HTML emails is just like designing a webpage. You go planning your page’s width and length of content and consider its appearance in your target browsers. Only that one of the browsers to consider is IE6! This is just an analogy to the fact that not all email clients have wide support for HTML…