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!
Don’t simply use the shorthand if you want to set only the background color:
[code lang=”css” title=”CSS”]
div {background:red;}
[/code]
Because what that really means is:
[code lang=”css” title=”CSS”]
div {background:none repeat scroll 0 0 red;}
[/code]
The background values in order are:
One of the conflicts in using the shorthand in styling only the background color is that it sets the background-image to none.
In case that you need to style the same selector with a background image, the value in the shorthand property will persist.
This doesn’t have much importance other than satisfying one’s obsessive-compulsivity.
We all take the hexadecimal values of colors to put as background-color or color of elements on our webpages.
If you could see the HSB (hue, saturation, brightness) values of your color, they are in degree, percentage, percentage, respectively. Round them off to the nearest multiple of 5.
For example, I get these values for a shade of yellow:
H: 45°
S: 57%
B: 99%
Hex: #fdda6d
Transform it to:
H: 45°
S: 55%
B: 100%
Hex: #ffdc73
This way, you put some meaning behind your colors.
Let’s say you have this line on your webpage:
Hey guys, you may email me at yoyo@whatsup.heh or call me at 14344.
and you want to break the line right after the word “or”.
Do you do this:
[code lang=”html” title=”HTML”]
<p>Hey guys, you may email me at <a href="mailto:yoyo@whatsup.heh">yoyo@whatsup.heh</a> or<br>
call me at <a href="tel:14344">14344</a>.</p>
[/code]
or this?
[code lang=”html” title=”HTML”]
<p>Hey guys, you may email me at <a href="mailto:yoyo@whatsup.heh">yoyo@whatsup.heh</a> or
<span class="break">call me at <a href="tel:14344">14344</a></span>.</p>
[/code]
[code lang=”css” title=”CSS”]
span.break {display:block;}
[/code]
The latter? You’re doing a great start!
What I mean by this is, as you are writing the HTML markup, you should check your webpage in the browser as it is — without heavy consideration on how big the fonts should be or which color would be preettyy… Just imagine you’re a visually-impaired person “reading” a webpage.
The same way with sentences, it should run continously without consideration on the width of its container or the length of its line.
If we want a break in the line, it is purely for presentational purposes so do it thru CSS.
[code lang=”html”]
<div class="mod">
<div class="mod-cr">
<div class="mod-hd"><h3 class="mod-heading">Heading label</h3></div>
<div class="mod-ct"></div>
</div>
</div><!–.mod–>
[/code]
This is the basic structure of every content block in your webpage. This way, it would be modular, meaning, you could move it anywhere in the page without too much dependency on other elements.
Update – Nov 12, 2012:
[code lang=”css” highlight=”2,3,8,9″]
::-moz-selection {
color:#fff;
background: #00b6f2;
text-shadow: none;
}
::selection {
color:#fff;
background: #00b6f2;
text-shadow: none;
}
[/code]
[code lang=”css” highlight=”6″]
/*
* Image replacement
*/
.ir {
display:block;
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 100%;
}
[/code]
[code lang=”css”]
/*=========================Reset=========================*/
h1, h2, h3, h4, h5, h6, p, ul, ol, li {margin:0; padding:0;}
ul {list-style:none;}
/*=========================Set=========================*/
p {margin-bottom:1em;}
p:last-child {margin-bottom:0;}
[/code]
Resetting all basic text tags and setting the margin for <p> to bottom.
[code lang=”css” highlight=”1,17-34″]
@media only screen and (min-width: 1024px) {
/* Style adjustments for viewports that meet the condition */
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
}
[/code]
I changed the media query from em to px because I am targeting viewports with exact dimensions.
Clearfix which solves floating problems are placed inside this media query because for narrow viewports, I don’t plan to use floats.
[code lang=”css”]
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden,
legend,
.assistive-text {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus,
.assistive-text:active,
.assistive-text:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
[/code]
Update – Nov 13, 2012:
Update – Nov 14, 2012:
Polishing up some spacing by putting some margins and paddings.
