Tag: CSS
-
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…
-
I Agree to the Terms of Agreement
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…
-
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…
-
Center-align lists
It’s easy to center-align a bunch of text: [code lang=”html” title=”HTML”] <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> [/code] [code lang=”css” title=”CSS”] p {text-align:center;} [/code] But how do you center-align a list such as a ul or an ol with children set as inline (or side by side)? Simply set the parent (ul) to…
-
CSS, I could see what you’re doing there…
…you’re translating all the features and functions of all software combined into styles and you’re making the browser a mashup of those software. One day, Photoshop will have an “export to HTML and CSS” function wherein the lens flare filter I dearly love would be a bunch of vector shapes rendered by the browser. And…
-
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…
-
We’re waiting for position:sticky
Sounds like booger? Nope, it’s what’s been brewing in browsers and hopefully it becomes a standard. The basic syntax is: [code lang=”css” title=”CSS”] div {position:sticky;} [/code] We already have position:fixed and it sticks! Well, if you’re familiar with the CSS propety-value position:fixed, it fixes the position of an element relative to the viewport (and not…
-
Minify and un-minify CSS
Whether you have an unreadable stylesheet or you want to minify/compress it for optimization purposes, Client-side CSS (De)Compressor is your friend. Update: since the previous tool doesn’t exist anymore, here’s another tool to unminify your CSS: http://mrcoles.com/blog/css-unminify/ http://minify.avivo.si/#results
-
Setting the width of absolutely-positioned elements
One way to set the height of an element to 100% is to absoultely-position it yet you needed a max-width for it to follow (instead of a simple width) for layout reponse purposes. The solution is to simply set its width to 100% and set the max-width to your desired value. For example: [code lang=”css”…
-
100% parent, definite-width child
You want to have a 100% expanding parent while still having control over the child to have a definite width? What’s the use for this? A 100% background not interfering with the child that has width. [code title=”HTML” lang=”html”] <div class="container"> <div class="content"> Content </div> </div> [/code] [code title=”CSS” lang=”css”] .container { background-color:red; } .content…