posted 2 months ago with 1 note

reblogged 2 months ago via (source) with 2 notes

lilbreck:

Contentment is a set of pretty nails and website coding.


posted 3 months ago with 1 note

ColorHexa.com is a free color tool providing information about any color. Just type any color values in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent value in Hexadecimal, Binary, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE-LCH, XYZ and xyY. ColorHexa will also generate matching color schemes such as complementary, split complementary, analogous, triadic, tetradic and monochromatic colors. So you will be able to know what colors best suit with the one you chose. It is also possible to blend colors together or create a gradient between them.

reblogged 3 months ago via (source) with 3 notes

lilbreck:

I would just like to show this off. Not the tags themselves (though i do love them!), but the fact that I got them to wrap even with a post source shown. It’s the little things that make me proud. 

For those who want to do this, here’s the bit of code to add into your dashboard style:

.source_url {display: block !important;}
.source_url_gradient {display: none !important;}
#posts .post_footer_links .tags {white-space: normal !important;}
.post_tags_wrapper {white-space: normal !important;}


posted 1 year ago with 0 notes

posted 1 year ago with 0 notes

A co-worker was using a definition list and I mentioned the accessibility issue. A table was better. But was it? HTML5 indicates that definition lists are now data lists and can take any name/value content. Based on the spec, my co-worker was using the definition list correctly.

I decided to test which is better: a <dl> or <table>. In these tests, I’m using the only two screenreaders that I have available to me: VoiceOver (with Chrome 17 on Mac and Safari 5.1, both on Lion) and NVDA (Firefox 11 on Windows 7 via VMWare Fusion).

Game on!

~ Jonathan Snook

Read full article

posted 1 year ago with 0 notes

If you’ve yet to get your hands dirty with media queries, now is your chance to create your first responsive website design. In this tutorial we’ll look at converting one of my previous WordPress theme designs into a responsive layout, while taking into consideration the design’s original grid structure.

posted 1 year ago with 1 note

Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we’re not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts.

reblogged 1 year ago via (source) with 3 notes

sonikakran:

Ha! So fucking true!


reblogged 1 year ago via (source) with 10 notes

dragoni:

coolio!

One of my least favorite parts about layout with CSS is the relationship of width and padding. You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand.

Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model.

Anyway, I have a recommendation for your CSS going forward:

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; box-sizing: border-box; }

This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise.

posted 1 year ago with 0 notes

li a {display:block;}

posted 1 year ago with 29 notes

Or the coding for this Tumblr theme is starting to make sense.

posted 1 year ago with 0 notes

A basic website thrown together for a college course I took recently that covered how to use Adobe Dreamweaver. Background graphics and logo are mine. Content images are both mine and from Stock.XCHNG.

posted 1 year ago with 8 notes

I’m thinking that having my first client be both work-for-free (or for software, depending on how you view it), and be my brother, might not have been such a great idea. I’ve basically sold my soul to my evil older brother so he will front the money for the software programs I lust after.

How bad can it be?